Link

文字超链接

基础用法

由 type 属性来选择 Text 的类型

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

显示代码

<template>
	<div class="link-content link-basic">
		<div class="link-basic-default">
			<ued-link
				class="vp-raw"
				v-for="(item, index) in linkType"
				:key="index"
				:type="item.type"
			>
				{{ item.text }}
			</ued-link>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const linkType = ref([
	{ type: '', text: '默认链接' },
	{ type: 'primary', text: '主要链接' },
	{ type: 'success', text: '成功链接' },
	{ type: 'warning', text: '警告链接' },
	{ type: 'danger', text: '危险链接' },
	{ type: 'info', text: '信息链接' },
])
</script>

禁用状态

文字链接不可用状态。

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

显示代码

<template>
	<div class="link-content link-disabled">
		<div class="link-disabled-default">
			<ued-link
				class="vp-raw"
				v-for="(item, index) in linkType"
				:key="index"
				:type="item.type"
				disabled
			>
				{{ item.text }}
			</ued-link>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const linkType = ref([
	{ type: '', text: '默认链接' },
	{ type: 'primary', text: '主要链接' },
	{ type: 'success', text: '成功链接' },
	{ type: 'warning', text: '警告链接' },
	{ type: 'danger', text: '危险链接' },
	{ type: 'info', text: '信息链接' },
])
</script>

下划线

文字链接下划线。

有下划线无下划线

显示代码

<template>
	<div class="link-content link-underline">
		<div class="link-underline-default">
			<ued-link>有下划线</ued-link>
			<ued-link :underline="false">无下划线</ued-link>
		</div>
	</div>
</template>

图标

带图标的链接

TIP

使用 icon 属性来为按钮添加图标。 您可以传递组件名称的字符串（提前注册）或组件本身是一个 SVG Vue 组件。

Plus CirclePlus CirclePlus

显示代码

<template>
	<div class="link-content link-underline">
		<div class="link-underline-default">
			<ued-link class="vp-raw" :icon="Plus"> Plus</ued-link>
			<ued-link class="vp-raw">
				CirclePlus<ued-icon class="ued-icon--right"> <CirclePlus /></ued-icon>
			</ued-link>
		</div>
		<ued-link>
			<template #icon>
				<CirclePlus />
			</template>
			CirclePlus
		</ued-link>
	</div>
</template>

<script lang="ts" setup>
import { Plus } from '@ued-plus/components'
</script>

API

属性

属性名	说明	类型	默认值
type	类型	default/success/warning/danger/info	-
underline	是否下划线	boolean	true
disabled	是否禁用状态	boolean	false
href	原生 href 属性	string	-
href	原生 target 属性	_blank/_parent/_self/_top	_self
icon	图标组件	Component	-

插槽

插槽名	说明
defalut	自定义默认内容
icon	自定义图标组件