使用原生button封装一个通用按钮组件

效果图

代码

1. <script lang="ts" setup>
2. import { computed, ref, watch } from "vue";
4. /**
5. * 按钮属性接口
6. */
7. interface ButtonProps {
8.   /** 按钮类型：default(默认)/dark/plain/link */
9.   type?: "default" | "dark" | "plain" | "link";
10.   /** 禁用状态 */
11.   disabled?: boolean;
12.   /** 按钮内容 */
13.   text?: string;
14.   /** 图标组件 */
15.   icon?: any;
16.   /** 图标宽度 */
17.   iconWidth?: number | string;
18.   /** 图标高度 */
19.   iconHeight?: number | string;
20.   /** 按钮宽度 */
21.   width?: number | string;
22.   /** 按钮高度 */
23.   height?: number | string;
24.   /** 宽度自适应 */
25.   widthAuto?: boolean;
26.   /** 高度自适应 */
27.   heightAuto?: boolean;
28.   /** 水平内边距 */
29.   paddingX?: number | string;
30.   /** 垂直内边距 */
31.   paddingY?: number | string;
32.   /** 自定义背景色 */
33.   backgroundColor?: string;
34.   /** 自定义边框 */
35.   border?: string;
36. }
38. const props = withDefaults(defineProps<ButtonProps>(), {
39.   type: "default",
40.   disabled: false,
41.   text: "",
42.   icon: undefined,
43.   iconWidth: 14,
44.   iconHeight: 14,
45.   width: 92,
46.   height: 32,
47.   widthAuto: false,
48.   heightAuto: false,
49.   paddingX: 0,
50.   paddingY: 0,
51.   backgroundColor: "",
52.   border: ""
53. });
55. /**
56. * 导入图标
57. */
58. const iconSrc = ref("");
60. /**
61. * 处理图标路径
62. */
63. const loadIcon = () => {
64.   if (!props.icon) {
65.     iconSrc.value = "";
66.     return;
67.   }
69.   // 直接使用传入的图标路径或对象
70.   iconSrc.value = props.icon;
71. };
73. // 初始加载图标
74. loadIcon();
76. // 监听图标属性变化，重新加载图标
77. watch(
78.   () => props.icon,
79.   () => {
80.     loadIcon();
81.   }
82. );
84. // 计算样式
85. const buttonClass = computed(() => {
86.   return {
87.     "ds-button": true,
88.     [`ds-button--${props.type}`]: true,
89.     "is-disabled": props.disabled,
90.     "is-custom-style": props.backgroundColor || props.border
91.   };
92. });
94. // 计算图标样式
95. const iconStyle = computed(() => {
96.   return {
97.     width:
98.       typeof props.iconWidth === "number"
99.         ? `${props.iconWidth}px`
100.         : props.iconWidth,
101.     height:
102.       typeof props.iconHeight === "number"
103.         ? `${props.iconHeight}px`
104.         : props.iconHeight,
105.     marginRight: props.text ? "4px" : "0"
106.   };
107. });
109. // 计算按钮样式
110. const buttonStyle = computed(() => {
111.   const paddingXValue = typeof props.paddingX === "number" ? `${props.paddingX}px` : props.paddingX;
112.   const paddingYValue = typeof props.paddingY === "number" ? `${props.paddingY}px` : props.paddingY;
113.   
114.   const style = {
115.     width: props.widthAuto ? "auto" : (typeof props.width === "number" ? `${props.width}px` : props.width),
116.     height: props.heightAuto ? "auto" : (typeof props.height === "number" ? `${props.height}px` : props.height),
117.     padding: props.paddingX || props.paddingY ? `${paddingYValue} ${paddingXValue}` : "",
118.     boxSizing: "border-box" as const
119.   };
120.   
121.   // 添加自定义背景色 - 支持所有CSS颜色值（包括rgba、hex、颜色名称、渐变等）
122.   if (props.backgroundColor && !props.disabled) {
123.     style["background"] = props.backgroundColor;
124.   }
125.   
126.   // 添加自定义边框
127.   if (props.border) {
128.     style["border"] = props.border;
129.   }
130.   
131.   return style;
132. });
134. const emit = defineEmits(["click"]);
136. /**
137. * 按钮点击事件处理
138. * @param event 鼠标事件
139. */
140. const handleClick = (event: MouseEvent) => {
141.   if (props.disabled) return;
142.   emit("click", event);
143. };
144. </script>
146. <template>
147.   <button
148.     :class="buttonClass"
149.     :style="buttonStyle"
150.     :disabled="disabled"
151.     @click="handleClick"
152.   >
153.     <img v-if="icon" :src="iconSrc" :style="iconStyle" />
154.     <span v-if="text">{{ text }}</span>
155.     <slot v-else />
156.   </button>
157. </template>
159. <style lang="scss" scoped>
160. .ds-button {
161.   display: flex;
162.   align-items: center;
163.   justify-content: center;
164.   padding: 4px 16px;
165.   font-size: 14px;
166.   font-weight: 600;
167.   text-align: center;
168.   cursor: pointer;
169.   border: none;
170.   border-radius: 4px;
171.   outline: none;
172.   transition: all 0.3s;
174.   &.is-custom-style {
175.     &:hover:not(.is-disabled) {
176.       opacity: 0.9;
177.     }
179.     &:active:not(.is-disabled) {
180.       opacity: 0.8;
181.     }
183.     &.is-disabled {
184.       opacity: 0.5;
185.       cursor: not-allowed;
186.     }
187.   }
189.   &--default {
190.     color: #fff;
191.     background: #06ad7e;
193.     &:hover:not(.is-disabled) {
194.       background: #07ca93;
195.     }
197.     &:active:not(.is-disabled) {
198.       background: #008661;
199.     }
201.     &.is-disabled {
202.       color: rgb(255 255 255 / 50%);
203.       cursor: not-allowed;
204.       background: rgb(6 173 126 / 50%);
205.     }
206.   }
208.   &--dark {
209.     color: #06ad7e;
210.     background: rgb(240 251 248 / 10%);
212.     &:hover:not(.is-disabled) {
213.       background: rgb(240 251 248 / 15%);
214.     }
216.     &:active:not(.is-disabled) {
217.       color: #008661;
218.       background: rgb(255 255 255 / 2%);
219.     }
221.     &.is-disabled {
222.       color: rgb(6 173 126 / 50%);
223.       cursor: not-allowed;
224.       background: rgb(240 251 248 / 5%);
225.     }
226.   }
228.   &--plain {
229.     color: #06ad7e;
230.     background: transparent;
232.     &:hover:not(.is-disabled) {
233.       background: rgb(255 255 255 / 5%);
234.     }
236.     &:active:not(.is-disabled) {
237.       color: #008661;
238.       background: rgb(255 255 255 / 2%);
239.     }
241.     &.is-disabled {
242.       color: rgb(6 173 126 / 50%);
243.       cursor: not-allowed;
244.     }
245.   }
247.   &--link {
248.     color: #06ad7e;
249.     background: transparent;
250.     padding: 4px 0;
252.     &:hover:not(.is-disabled) {
253.       color: #07ca93;
254.       background: transparent;
255.     }
257.     &:active:not(.is-disabled) {
258.       color: #008661;
259.       background: transparent;
260.     }
262.     &.is-disabled {
263.       color: rgb(6 173 126 / 50%);
264.       cursor: not-allowed;
265.       background: transparent;
266.     }
267.   }
268. }
269. </style>

复制代码

文档

DsButton 按钮组件

一个自界说按钮组件，提供多种样式范例和状态，实用于体系中的各种交互场景。
功能特点

• 支持四种样式范例：默认(default)、暗色(dark)、朴素(plain)和链接(link)
  
• 可自界说按钮尺寸、内容和图标
  
• 支持自界说配景色(支持rgba、渐变等全部CSS配景值)和边框样式
  
• 支持禁用状态
  
• 支持宽高自顺应和自界说内边距
  
• 响应式筹划，顺应差别场景
  

组件API

属性

属性名阐明范例可选值默认值type按钮范例stringdefault / dark / plain / linkdefaultdisabled禁用状态booleantrue / falsefalsetext按钮文本内容string-‘’icon图标路径string-undefinediconWidth图标宽度number / string-14iconHeight图标高度number / string-14width按钮宽度number / string-92height按钮高度number / string-32widthAuto宽度自顺应booleantrue / falsefalseheightAuto高度自顺应booleantrue / falsefalsepaddingX水平内边距number / string-0paddingY垂直内边距number / string-0backgroundColor自界说配景色string全部CSS颜色值/渐变‘’border自界说边框stringCSS边框值‘’变乱

变乱名阐明回调参数click点击按钮时触发event: MouseEvent使用示例

底子用法

1. <template>
2.   <ds-button text="默认按钮" />
3.   <ds-button type="dark" text="暗色按钮" />
4.   <ds-button type="plain" text="朴素按钮" />
5.   <ds-button type="link" text="链接按钮" />
6. </template>

复制代码

禁用状态

1. <template>
2.   <ds-button text="默认按钮" disabled />
3.   <ds-button type="dark" text="暗色按钮" disabled />
4.   <ds-button type="plain" text="朴素按钮" disabled />
5.   <ds-button type="link" text="链接按钮" disabled />
6. </template>

复制代码

带图标的按钮

1. <template>
2.   <ds-button
3.     text="添加"
4.     icon="/src/assets/icons/add.png"
5.   />
6.   
7.   <ds-button
8.     type="plain"
9.     text="删除"
10.     icon="/src/assets/icons/delete.png"
11.     icon-width="16"
12.     icon-height="16"
13.   />
14.   
15.   <ds-button
16.     type="link"
17.     text="链接"
18.     icon="/src/assets/icons/link.png"
19.   />
20. </template>

复制代码

自界说配景色和边框

1. <template>
2.   <!-- 自定义背景色 - 十六进制 -->
3.   <ds-button
4.     text="蓝色按钮"
5.     background-color="#3a7afe"
6.   />
7.   
8.   <!-- 自定义背景色 - rgba -->
9.   <ds-button
10.     text="半透明按钮"
11.     background-color="rgba(58, 122, 254, 0.7)"
12.   />
13.   
14.   <!-- 自定义背景色 - 渐变 -->
15.   <ds-button
16.     text="渐变按钮"
17.     background-color="linear-gradient(90deg, #3a7afe, #6c5ce7)"
18.     width="120"
19.   />
20.   
21.   <!-- 自定义边框 -->
22.   <ds-button
23.     text="带边框按钮"
24.     type="plain"
25.     border="1px solid #34564c"
26.   />
27.   
28.   <!-- 背景色和边框都自定义 -->
29.   <ds-button
30.     text="自定义样式"
31.     background-color="rgba(255, 103, 0, 0.8)"
32.     border="1px solid #ff6700"
33.   />
34. </template>

复制代码

自界说尺寸

1. <template>
2.   <ds-button text="小按钮" width="80" height="28" />
3.   <ds-button text="中等按钮" width="100" height="36" />
4.   <ds-button text="大按钮" width="120" height="44" />
5. </template>

复制代码

宽高自顺应

1. <template>
2.   <ds-button text="宽度自适应" width-auto />
3.   <ds-button text="高度自适应" height-auto />
4.   <ds-button text="宽高都自适应" width-auto height-auto />
5. </template>

复制代码

自界说内边距

1. <template>
2.   <ds-button text="自定义内边距" padding-x="20" padding-y="10" />
3.   <ds-button
4.     type="dark"
5.     text="更大的内边距"
6.     padding-x="30"
7.     padding-y="15"
8.     width-auto
9.   />
10. </template>

复制代码

使用插槽

除了使用text属性设置按钮内容外，还可以使用默认插槽：

1. <template>
2.   <ds-button>
3.     <span style="color: yellow">自定义内容</span>
4.   </ds-button>
5. </template>

复制代码

样式定制

按钮具有四种根本范例，每种范例有差别的样式：

• default: 绿色配景，白色笔墨
  
  
  
  • 悬停时配景色变亮
    
  • 按下时配景色变暗
    
  • 禁用时透明度低沉
    
  
  
• dark: 半透明配景，绿色笔墨
  
  
  
  • 悬停时配景色变亮
    
  • 按下时笔墨颜色变暗
    
  • 禁用时透明度低沉
    
  
  
• plain: 透明配景，绿色笔墨
  
  
  
  • 悬停时有稍微配景色
    
  • 按下时笔墨颜色变暗
    
  • 禁用时透明度低沉
    
  
  
• link: 透明配景，绿色笔墨，无边框和内边距
  
  
  
  • 悬停时笔墨颜色变亮，无配景色变化
    
  • 按下时笔墨颜色变暗，无配景色变化
    
  • 禁用时透明度低沉，鼠标样式为禁用状态
    
  
  

自界说样式

除了预设的四种范例，还可以通过以部属性自界说按钮样式：

• backgroundColor: 设置按钮的配景，支持全部CSS配景属性值：
  
  
  
  • 十六进制颜色：#3a7afe
    
  • RGB/RGBA颜色：rgb(58, 122, 254) 或 rgba(58, 122, 254, 0.7)
    
  • 颜色名称：blue、red 等
    
  • 渐变：linear-gradient(90deg, #3a7afe, #6c5ce7)
    
  • 其他CSS配景值
    
  
  
• border: 设置按钮的边框样式，可使用任何有效的CSS边框值
  

当使用自界说配景色或边框时，按钮的悬停和激活效果会变为透明度变化。
全局注册

该组件已通过index.ts设置为可全局注册：

1. import DsButton from '@/components/DsButton';
3. app.use(DsButton);

复制代码

注册后，可在任何组件中直接使用<ds-button>标签，无需单独导入。
注册入口

1. import type { App } from "vue";
2. import Button from "./index.vue";
4. /**
5. * 注册按钮组件
6. */
7. export default {
8.   install(app: App) {
9.     app.component("DsButton", Button);
10.   }
11. };
13. export { Button as DsButton };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告