圆角按钮

圆角按钮是指按钮左右两侧为半圆形

1export const useNamespace = (block) => {
2  // 命名前缀就是命名空间
3  const namespace = defaultNamespace;
4
5  // 生成 Block（块）
6  const b = (blockSuffix = "") =>
7    _bem(namespace, block, blockSuffix, null, null, null);
8  // 生成 Element（元素）
9  const e = (element) =>
10    element ? _bem(namespace, block, null, element, null, null) : "";
11  // 生成 Modifier（修改器）
12  const m = (modifier, value) =>
13    modifier ? _bem(namespace, block, null, null, modifier, value) : "";
14  // 状态设置
15  const is = (activeName, state) =>
16    activeName && state ? `is-${activeName}` : "";
17  return {
18    namespace,
19    b,
20    e,
21    m,
22    is,
23  };
24};

1.suit-button {
2    &.is-round {
3        border-radius: 100px; // 圆角
4    }
5}

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});
18</script>
19
20<template>
21  <button :class="[ns.b(), ns.m(type), ns.is('round', round)]">
22    <span>
23      <slot v-if="$slots.default"></slot>
24    </span>
25  </button>
26</template>

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

:::

圆角按钮#

圆角按钮