禁用按钮

这里以 success 成功按钮的禁用效果为例

1// 成功按钮
2.suit-button--success {
3    background-color: #14cd70;
4    border-color: #14cd70;
5    color: #fff;
6    &:hover {
7        background-color: #5adc9b;
8        border-color: #5adc9b;
9    }
10    &.is-disabled {
11        cursor: not-allowed; // 鼠标样式为禁止
12        &, &:hover, &:focus {
13            background-color: #89e6b7;
14            border-color: #89e6b7;
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});
22</script>
23
24<template>
25  <button
26    :class="[
27      ns.b(),
28      ns.m(type),
29      ns.is('round', round),
30      ns.is('disabled', disabled),
31    ]"
32  >
33    <span>
34      <slot v-if="$slots.default"></slot>
35    </span>
36  </button>
37</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">错误</suit-button>
8  </div>
9</template>

:::

禁用按钮#

禁用按钮