链接按钮

这里以 warning 警告按钮为例

1.suit-button {
2    &.is-link{
3        &, &:hover{
4            padding: 0;
5            height: auto;
6            min-width: auto;
7            background-color: transparent;
8            border-color: transparent;
9            text-decoration: underline;
10        }
11    }
12}
13
14// 警告按钮
15.suit-button--warning {
16    &.is-link{
17        color: #4d5059;
18        &:hover{
19            color: #767a87;
20        }
21    }
22}

1<script lang="ts" setup>
2import { useNamespace } from "@suit-ui/hooks";
3defineOptions({
4  name: "SuitButton",
5});
6const ns = useNamespace("button");
7
8const props = defineProps({
9  type: {
10    type: String,
11    default: "default", // 默认值
12  },
13  round: {
14    type: Boolean,
15    default: false,
16  },
17  disabled: {
18    type: Boolean,
19    default: false,
20  },
21  text: {
22    type: Boolean,
23    default: false,
24  },
25  link: {
26    type: Boolean,
27    default: false,
28  }
29});
30</script>
31
32<template>
33  <button
34    :class="[
35      ns.b(),
36      ns.m(type),
37      ns.is('round', round),
38      ns.is('disabled', disabled),
39      ns.is('text', text),
40      ns.is('link', link)
41    ]"
42  >
43    <span>
44      <slot v-if="$slots.default"></slot>
45    </span>
46  </button>
47</template>

1<template>
2  <div>
3    <suit-button>默认</suit-button>
4    <suit-button type="primary" round>主要</suit-button>
5    <suit-button type="success" disabled>成功</suit-button>
6    <suit-button type="warning" link>警告</suit-button>
7    <suit-button type="error" text>错误</suit-button>
8  </div>
9</template>

:::

链接按钮#

链接按钮