Link 链接 ​

vue

<template>
  <div class="mb-4">
    <w-title>基础用法</w-title>
    <div>
      <div class="flex gap-4">
        <w-link
          href="http://wued.winning-health.com.cn:8088/win-design/"
          target="_blank"
          >默认链接</w-link
        >
        <w-link type="primary">主要链接</w-link>
        <w-link type="success">成功链接</w-link>
        <w-link type="warning">警告链接</w-link>
        <w-link type="danger">错误链接</w-link>
        <w-link type="error">错误链接</w-link>
        <w-link type="info">普通链接</w-link>
      </div>
      <div class="flex gap-4 mt-4">
        <w-link
          disabled
          href="http://wued.winning-health.com.cn:8088/win-design/"
          target="_blank"
          >默认链接</w-link
        >
        <w-link type="primary" disabled>主要链接</w-link>
        <w-link type="success" disabled>成功链接</w-link>
        <w-link type="warning" disabled>警告链接</w-link>
        <w-link type="danger" disabled>错误链接</w-link>
        <w-link type="info" disabled>普通链接</w-link>
      </div>
    </div>
  </div>
  <w-divider />
  <div class="">
    <w-title>去除下划线：:underline="false"</w-title>
    <div class="flex gap-4">
      <w-link
        :underline="false"
        href="http://wued.winning-health.com.cn:8088/win-design/"
        target="_blank"
        >默认链接</w-link
      >
      <w-link
        type="error"
        underline="hover"
        href="http://wued.winning-health.com.cn:8088/win-design/"
        target="_blank"
        >hover</w-link
      >
      <w-link
        type="primary"
        underline="always"
        href="http://wued.winning-health.com.cn:8088/win-design/"
        target="_blank"
        >always</w-link
      >
      <w-link
        type="success"
        underline="never"
        href="http://wued.winning-health.com.cn:8088/win-design/"
        target="_blank"
        >never</w-link
      >
    </div>
  </div>
</template>

<style scoped>
.w3-link + .w3-link {
  margin-left: 8px;
}
.w3-link .w3-icon--right.w3-icon {
  vertical-align: text-bottom;
}
</style>

vue

<template>
  <div>
    <w-link :icon="Edit">编辑</w-link>
    <w-link>
      查看<w-icon class="w3-icon--right"><ViewSolid /></w-icon>
    </w-link>
  </div>
</template>

<script setup lang="ts">
import { Edit, ViewSolid } from '@win-design-next/icons-vue'
</script>

<style scoped>
.w3-link {
  margin-right: 8px;
}
</style>