文字按钮

这里以 error 错误按钮为例

1.suit-button {
2    &.is-text {
3        background-color: transparent; // 背景颜色透明
4        border-color: transparent; // 边框颜色透明
5    }
6}
7
8// 错误按钮
9.suit-button--error {
10    &.is-text {
11        color: #ffa81a;
12        &:hover {
13            background-color: #fff6e8;
14            border-color: #fff6e8;
15        }
16    }
17}

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});
26</script>
27
28<template>
29  <button
30    :class="[
31      ns.b(),
32      ns.m(type),
33      ns.is('round', round),
34      ns.is('disabled', disabled),
35      ns.is('text', text),
36    ]"
37  >
38    <span>
39      <slot v-if="$slots.default"></slot>
40    </span>
41  </button>
42</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">警告</suit-button>
7    <suit-button type="error" text>错误</suit-button>
8  </div>
9</template>

:::

文字按钮#

文字按钮