Link 文字链接

文字超链接

基础用法

基础的文字链接用法。

默认链接主要链接成功链接警告链接危险链接信息链接

<template>
  <Link>默认链接</Link>
  <Link type="primary">主要链接</Link>
  <Link type="success">成功链接</Link>
  <Link type="warning">警告链接</Link>
  <Link type="danger">危险链接</Link>
  <Link type="info">信息链接</Link>
</template>

<script setup>
import Link from '@/components/Link/Link.vue'
</script>
<style scoped>
@import '@/components/Link/style.css';
.s-link {
  margin: 0 5px;
}
</style>

禁用状态

文字链接不可用状态。

默认链接主要链接成功链接警告链接危险链接信息链接

<template>
  <Link disabled>默认链接</Link>
  <Link type="primary" disabled>主要链接</Link>
  <Link type="success" disabled>成功链接</Link>
  <Link type="warning" disabled>警告链接</Link>
  <Link type="danger" disabled>危险链接</Link>
  <Link type="info" disabled>信息链接</Link>
</template>

<script setup>
import Link from '@/components/Link/Link.vue'
</script>
<style scoped>
@import '@/components/Link/style.css';
.s-link {
  margin: 0 5px;
}
</style>

下划线

文字链接下划线。

无下划线有下划线

<template>
  <Link :underline="false">无下划线</Link>
  <Link >有下划线</Link>

</template>

<script setup>
import Link from '@/components/Link/Link.vue'
</script>
<style scoped>
@import '@/components/Link/style.css';
.s-link {
  margin: 0 5px;
}
</style>

图标

带图标的文字链接可增强辨识度。

编辑查看

<template>
  <Link icon="pen">编辑</Link>
  <Link icon="eye">查看</Link>

</template>

<script setup>
import Link from '@/components/Link/Link.vue'
</script>
<style scoped>
@import '@/components/Link/style.css';
.s-link {
  margin: 0 5px;
}
</style>

Link Attributes

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info	—
disabled	是否禁用状态	boolean	—	false
underline	是否下划线	boolean	—	true
icon	图标类名	string	—	-
target	打开链接的方式	string	_blank/_self/_parent/_top	_self
href	链接地址	string	—	-