Link 链接

基本用法

基础的文字链接用法。

LinkLink

<template>
  <l-link>Link</l-link>
  <l-link disabled>Link</l-link>
</template>

链接状态

链接的状态分为 normal - 正常(默认) 、 warning 、 success 、 danger 四种，可以通过 status 属性设置。

Success LinkSuccess Link

Warning LinkWarning Link

Danger LinkDanger Link

<template>
  <div>
    <p>
      <l-link status="success">Success Link</l-link>
      <l-link status="success" disabled>Success Link</l-link>
    </p>
    <p>
      <l-link status="warning">Warning Link</l-link>
      <l-link status="warning" disabled>Warning Link</l-link>
    </p>
    <p>
      <l-link status="danger">Danger Link</l-link>
      <l-link status="danger" disabled>Danger Link</l-link>
    </p>
  </div>
</template>

加载中

通过设置 loading 属性来让链接处于加载中状态。

LinkLinkLink

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

const loading1 = ref(false);
const loading2 = ref(false);

const handleClick1 = () => {
  loading1.value = true;
  setTimeout(() => {
    loading1.value = false;
  }, 3000);
};
const handleClick2 = () => {
  loading2.value = true;
  setTimeout(() => {
    loading2.value = false;
  }, 3000);
};
</script>

<template>
  <div>
    <l-link loading>Link</l-link>
    <l-link :loading="loading1" @click="handleClick1">Link</l-link>
    <l-link :loading="loading2" @click="handleClick2" icon="edit">Link</l-link>
  </div>
</template>

Link API

Link Props

属性名	说明	类型	默认值
href	链接地址	string	-
status	链接状态	'normal' | 'warning' | 'success' | 'danger'	"normal"
loading	加载状态	boolean	false
disabled	禁用状态	boolean	false
target	同原生 target 属性	'_self' | '_blank' | '_parent' | '_top'	'_self'

Link Slots

插槽名	说明
default	默认内容

Link Events

事件名	说明	回调参数
click	点击链接时触发	(e: MouseEvent) => void