链接

链接组件。

基础使用

通过 text 属性设置链接文本。

<template>
	<pure-link text="百度"></pure-link>
</template>

主题

通过 theme 属性设置链接主题。

<template>
	<pure-link
		text="主要"
		theme="primary"
	></pure-link>
	<pure-link
		text="成功"
		theme="success"
	></pure-link>
	<pure-link
		text="警告"
		theme="warning"
	></pure-link>
	<pure-link
		text="错误"
		theme="error"
	></pure-link>
	<pure-link
		text="信息"
		theme="info"
	></pure-link>
</template>

下划线

通过 underline 属性设置链接下划线。

<template>
	<pure-link
		text="百度"
		underline
	></pure-link>
</template>

图标

• 通过 beforeIconName 属性设置前置图标名称。
• 通过 afterIconName 属性设置后置图标名称。

<template>
	<pure-link
		text="查看详情"
		theme="warning"
		beforeIconName="__arrow-left"
		afterIconName="__arrow-right"
	></pure-link>
</template>

禁用状态

通过 disabled 属性设置禁用状态。

<template>
	<pure-link
		text="查看详情"
		disabled
	></pure-link>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
text	[String, Number]		链接文本
beforeIconName	String		前置图标名称
afterIconName	String		后置图标名称
underline	Boolean	false	是否显示下划线
disabled	Boolean	false	是否禁用
theme	String		主题

事件

名称	参数	说明
onClick		点击事件

插槽

名称	参数	说明
#default		默认，链接内容

样式变量

名称	说明
--pure-link-align-items	内容对齐方式
--pure-link-gap	内容间距
--pure-link-icon-font-size	图标字体大小
--pure-link-icon-font-weight	图标字体粗细
--pure-link-icon-color	图标字体颜色
--pure-link-color	文本颜色，只有设置主题时生效
--pure-link-underline-bottom	下划线位置
--pure-link-underline-left	下划线位置
--pure-link-underline-width	下划线宽度
--pure-link-underline-height	下划线高度
--pure-link-underline-color	下划线颜色
--pure-link-underline-radius	下划线圆角
--pure-link-disabled-color	禁用状态下的文本颜色
--pure-link-disabled-opacity	禁用状态时的透明度