Link文字链接

基础用法

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

<template>
  <div class="t-basic-link-area">
    <as-link>默认链接</as-link>
    <as-link type="primary">主要链接</as-link>
    <as-link type="success">成功链接</as-link>
    <as-link type="warning">警告链接</as-link>
    <as-link type="danger">危险链接</as-link>
    <as-link type="info">信息链接</as-link>
  </div>
</template>
<script>
export default {
  name: "t-basic-link"
}
</script>
<style>
</style>

Expand Copy Copy

禁用状态

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

<template>
  <div class="t-disabled-link-area">
    <as-link disabled>默认链接</as-link>
    <as-link type="primary" disabled>主要链接</as-link>
    <as-link type="success" disabled>成功链接</as-link>
    <as-link type="warning" disabled>警告链接</as-link>
    <as-link type="danger" disabled>危险链接</as-link>
    <as-link type="info" disabled>信息链接</as-link>
  </div>
</template>
<script>
export default {
  name: "t-disabled-link"
}
</script>
<style>
</style>

Expand Copy Copy

下划线

无下划线 有下划线

<template>
  <div class="t-underline-link-area">
    <as-link :underline="false">无下划线</as-link>
    <as-link>有下划线</as-link>
  </div>
</template>
<script>
export default {
  name: "t-underline-link"
}
</script>
<style>
</style>

Expand Copy Copy

图标

编辑 查看

<template>
  <div class="t-icon-link-area">
    <as-link icon="as-icon-edit">编辑</as-link>
    <as-link>查看<i class="as-icon-view as-icon--right"></i> </as-link>
  </div>
</template>
<script>
export default {
  name: "t-icon-link"
}
</script>
<style>
</style>

Expand Copy Copy

Attributes

参数	默认值	说明
type	default	类型 ,类型为String,可选值为primary/success/warning/danger/info/text
underline	true	是否下划线,类型为Boolean
disabled	false	是否禁用状态,类型为Boolean
href	--	原生href属性,类型为String
icon	--	图标类名,类型为String