圆形按钮#
1suit-button {
2 &.suit-button--size_small {
3 &.is-circle {
4 width: 24px;
5 }
6 }
7 &.suit-button--size_default {
8 height: 32px;
9 &.is-circle {
10 width: 32px;
11 }
12 }
13 &.suit-button--size_large {
14 &.is-circle {
15 width: 40px;
16 }
17 }
18 &.is-circle {
19 border-radius: 100px;
20 padding: 0;
21 min-width: auto;
22 }
23}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 block: {
38 type: Boolean,
39 default: false,
40 },
41 size: {
42 type: String,
43 default: "",
44 },
45 circle: {
46 type: Boolean,
47 default: false,
48 },
49});
50</script>
51
52<template>
53 <button
54 :class="[
55 ns.b(),
56 ns.m(type),
57 ns.is('round', round),
58 ns.is('disabled', disabled),
59 ns.is('text', text),
60 ns.is('link', link),
61 ns.is('border', border),
62 ns.is('dashed', dashed),
63 ns.is('block', block),
64 ns.m('size', size),
65 ns.is('circle', circle),
66 ]"
67 >
68 <span>
69 <slot v-if="$slots.default"></slot>
70 </span>
71 </button>
72</template>1<template>
2 <div>
3 <suit-button>默认</suit-button>
4 <suit-button type="primary" size="small" circle>主要</suit-button>
5 <suit-button type="success" size="large" circle>成功</suit-button>
6 <suit-button type="warning" size="default" circle>警告</suit-button>
7 <suit-button type="error" circle>错误</suit-button>
8 </div>
9</template>:::
目录