hare-uiLink 链接
文字超链接
基本使用
基础的文字链接用法：
<template>
<div class="link-container">
<h-link>default</h-link>
<h-link type="primary">primary</h-link>
<h-link type="success">success</h-link>
<h-link type="warning">warning</h-link>
<h-link type="danger">danger</h-link>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
.link-container *{
margin: 0 10px;
}
</style>
下划线
文字链接下划线：
<template>
<div class="link-container">
<h-link :underline="false">Without Underline</h-link>
<h-link>With Underline</h-link>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
.link-container *{
margin: 0 10px;
}
</style>
禁用状态
文字链接不可用状态：
<template>
<div class="link-container">
<h-link disabled>default</h-link>
<h-link type="primary" disabled>primary</h-link>
<h-link type="success" disabled>success</h-link>
<h-link type="warning" disabled>warning</h-link>
<h-link type="danger" target="_blank" href="www.baidu.com" disabled>danger</h-link>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
.link-container *{
margin: 0 10px;
}
</style>
组件 API
Attributes 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 类型 | enum | primary / success / warning / danger | default |
| underline | 是否下划线 | boolean | true / false | true |
| disabled | 是否禁用 | boolean | true / false | false |
| href | 原生 href 属性 | string |
Slots 插槽
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |