边框按钮

这里以 primary 按钮为例

1.suit-button {
2    &.is-border {
3        &, &hover {
4            background-color: transparent;
5        }
6    }
7    &.is-dashed {
8        border-style: dashed;
9    }
10}
11
12// 主要按钮
13.suit-button--primary {
14    &.is-border {
15        color: #3069ff
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  link: {
26    type: Boolean,
27    default: false,
28  },
29  border: {
30    type: Boolean,
31    default: false,
32  },
33  dashed: {
34    type: Boolean,
35    default: false,
36  },
37});
38</script>
39
40<template>
41  <button
42    :class="[
43      ns.b(),
44      ns.m(type),
45      ns.is('round', round),
46      ns.is('disabled', disabled),
47      ns.is('text', text),
48      ns.is('link', link),
49      ns.is('border', border),
50      ns.is('dashed', dashed),
51    ]"
52  >
53    <span>
54      <slot v-if="$slots.default"></slot>
55    </span>
56  </button>
57</template>

1<template>
2  <div>
3    <suit-button>默认</suit-button>
4    <suit-button type="primary" border dashed>主要</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>

:::

边框按钮#

边框按钮