button组件几乎是每个组件库都有的；其实实现一个button组件是很简单的。本篇文章将带你一步一步的实现一个button组件。如果你想了解完整的组件库搭建，你可以先看使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库，这篇文章有详细介绍。当然如果你只想知道一个button组件如何开发出来的，只看这篇也就够了。(样式部分参造了elementui组件库）
首先我们先看下我们这个button组件要实现的功能
- 使用type，plain属性来定义按钮基本样式
- round，size控制按钮形状大小
- 通过disabled来控制按钮是否可点击
- 支持icon加入图标增强辨识度
type实现
我们的type可以传入的值可以是primary, success, info，warning, danger分别展示不同按钮颜色,type传入text显示文字按钮(没有边框和背景色的按钮)
这里只展示了一个primary的样式，因为其它值的样式实现是一样的。需要的话可以到button组件样式进行查看。
所以在button/types.ts文件中我们定义一下type的类型：
import { ExtractPropTypes } from 'vue' export const ButtonType = ['primary', 'success', 'info', 'warning', 'danger','text'] export const buttonProps = { type: { type: String, validator(value: string) { //这里表示type只能接收这些值 return ButtonType.includes(value) } } } export type ButtonProps = ExtractPropTypes<typeof buttonProps>
接下来在button.vue中实现传入不同值赋予不同类名，从而实现显示不同效果。
<template> <button class="k-button" :class="styleClass"> <slot /> </button> </template> <script lang="ts"> import './style/index.less' import { defineComponent, computed } from 'vue' import { buttonProps } from './types' export default defineComponent({ name: 'k-button', props: buttonProps, setup(props) { const styleClass = computed(() => { return { [`k-button--${props.type}`]: props.type } }) return { styleClass }; }, }); </script>
这样一来传入primary组件就会有个类名k-button--primary吗，传入其它值也一样。然后我们就可以给它们写样式了。进入style/index.less:
.k-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: 0.1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; &:hover { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } } .k-button--primary { color: #fff; background-color: #409eff; border-color: #409eff; &:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; } } .k-button--text { border-color: transparent; color: #409eff; background: transparent; padding-left: 0; padding-right: 0; &:hover { color: #66b1ff; border-color: transparent; background-color: transparent; } }
plain(朴素按钮)和round(圆角按钮)
我们可以通过传入plain和round来决定这个按钮是否为朴素按钮和圆角按钮，很显然它们是个布尔类型
//types.ts ... export const buttonProps = { type: { type: String, validator(value: string) { return ButtonType.includes(value) } }, plain: Boolean, round: Boolean } ...
然后在button.vue定义我们的styleClass
//button.vue const styleClass = computed(() => { return { [`k-button--${props.type}`]: props.type, 'is-plain': props.plain, 'is-round': props.round } })
最后在style/index.less写上我们的样式
... .k-button--primary.is-plain { color: #409eff; background: #ecf5ff; border-color: #b3d8ff; &:hover { color: #fff; background-color: #409eff; border-color: #409eff; } } .is-round { border-radius: 20px; }
注意
两个连在一起的类名如：.k-button--primary.is-plain 代表一个元素只有包含这两个类名，定义的样式才生效
禁用按钮
同样的，在types.ts定义disabled的类型
//types.ts ... export const ButtonType = ['primary', 'success', 'info', 'warning', 'danger'] export const buttonProps = { type: { type: String, validator(value: string) { return ButtonType.includes(value) } }, plain: Boolean, round: Boolean, disabled: Boolean } ...
然后在button.vue定义我们的styleClass
//button.vue const styleClass = computed(() => { return { [`k-button--${props.type}`]: props.type, 'is-plain': props.plain, 'is-round': props.round, 'is-disabled': props.disabled } })
最后添加上我们的样式
... .k-button.is-disabled { color: #c0c4cc; cursor: not-allowed; background-image: none; background-color: #fff; border-color: #ebeef5; } .k-button--primary.is-disabled, .k-button--primary.is-disabled:active, .k-button--primary.is-disabled:focus, .k-button--primary.is-disabled:hover { color: #fff; background-color: #a0cfff; border-color: #a0cfff; } //朴素按钮禁用 .k-button--primary.is-disabled.is-plain, .k-button--primary.is-disabled.is-plain:active, .k-button--primary.is-disabled.is-plain:focus, .k-button--primary.is-disabled.is-plain:hover { color: #8cc5ff; background-color: #ecf5ff; border-color: #d9ecff; } ...
size
通过size我们可以控制按钮的大小，组件接收的size值有：midium, small, mini。实现方式和上面差不多，这里就直接展示部分代码了
- types.ts
//types.ts ... export const ButtonSize = ['midium', 'small', 'mini']; export const buttonProps = { type: { type: String, validator(value: string) { return ButtonSize.includes(value) } }, plain: Boolean, round: Boolean, disabled: Boolean } ...
- button.vue
//button.vue const styleClass = computed(() => { return { [`k-button--${props.type}`]: props.type, 'is-plain': props.plain, 'is-round': props.round, 'is-disabled': props.disabled, [`k-button--${props.size}`]: props.size, } })
- style/index.less
//index.less ... .k-button--medium { padding: 10px 20px; font-size: 14px; border-radius: 4px; } .k-button--small { padding: 9px 15px; font-size: 12px; border-radius: 3px; } .k-button--mini { padding: 7px 15px; font-size: 12px; border-radius: 3px; }
最后我们在项目中引用（examples）来查看效果;
<-- App.vue --> <template> <div> <Button>默认按钮</Button> <Button type="primary">主要按钮</Button> <Button type="success">成功按钮</Button> <Button type="info">信息按钮</Button> <Button type="warning">警告按钮</Button> <Button type="danger">危险按钮</Button> <Button type="text">文字按钮</Button> <br> <br> <Button plain>朴素按钮</Button> <Button type="primary" plain>主要按钮</Button> <Button type="success" plain>成功按钮</Button> <Button type="info" plain>信息按钮</Button> <Button type="warning" plain>警告按钮</Button> <Button type="danger" plain>危险按钮</Button> <br> <br> <Button round>圆角按钮</Button> <Button type="primary" round>主要按钮</Button> <Button type="success" round>成功按钮</Button> <Button type="info" round>信息按钮</Button> <Button type="warning" round>警告按钮</Button> <Button type="danger" round>危险按钮</Button> <br> <br> <Button disabled>禁用按钮</Button> <Button type="primary" disabled>主要按钮</Button> <Button type="success" disabled>成功按钮</Button> <Button type="info" disabled>信息按钮</Button> <Button type="warning" disabled>警告按钮</Button> <Button type="danger" disabled>危险按钮</Button> <br> <br> <Button disabled>禁用按钮</Button> <Button type="primary" disabled plain>主要按钮</Button> <Button type="success" disabled plain>成功按钮</Button> <Button type="info" disabled plain>信息按钮</Button> <Button type="warning" disabled plain>警告按钮</Button> <Button type="danger" disabled plain>危险按钮</Button> <br> <br> <Button>默认按钮</Button> <Button size="medium">中等按钮</Button> <Button size="small">小型按钮</Button> <Button size="mini">超小按钮</Button> </div> </template> <script lang="ts" setup> import { Button } from 'kitty-ui' </script> <style lang="less"> .k-button { margin-right: 10px; } </style>
启动项目我们就会在浏览器中看到我们的各式各样的button组件了
图标
通过icon属性设置按钮图标，支持Icon组件里的所有图标(Icon组件下一篇文章将会详细介绍)。
- types.ts中设置icon类型
export const buttonProps = { type: { type: String, validator(value: string) { return ButtonType.includes(value) } }, plain: Boolean, round: Boolean, disabled: Boolean, icon: String, iconPosition: String, size: { type: String, validator(value: string) { return ButtonSize.includes(value) } } }
- 修改button组件
icon可以传入icon组件中定义的name，iconPosition可选right使图标在按钮右侧。
<!-- button.vue --> <template> <button class="k-button" :class="styleClass"> <Icon class="icon" v-if="iconFont.iconName && iconFont.iconPosition != 'right'" :name="iconFont.iconName" /> <slot /> <Icon class="icon" v-if="iconFont.iconPosition == 'right' && iconFont.iconName" :name="iconFont.iconName" /> </button> </template> <script lang="ts"> import './style/index.less' import { defineComponent, computed } from 'vue' import { buttonProps } from './types' import Icon from '../Icon/icon.vue' export default defineComponent({ name: 'k-button', props: buttonProps, components: { Icon }, setup(props) { const styleClass = computed(() => { return { [`k-button--${props.type}`]: props.type, 'is-plain': props.plain, 'is-round': props.round, 'is-disabled': props.disabled, [`k-button--${props.size}`]: props.size, } }) //图标 const iconFont = computed(() => { const iconName = props.icon const position = props.iconPosition return { iconName, iconPosition } }) return { styleClass, Icon, iconFont }; }, }); </script>
然后在examples/App.vue使用并查看效果
<template> <div> <Button type="success" icon="edit">图标按钮</Button> <Button type="primary" icon="map" icon-position="right">图标按钮</Button> <Button type="primary" icon="ashbin"></Button> </div> </template> <script lang="ts" setup> import { Button } from 'kitty-ui' </script> <style lang="less"> .k-button { margin-right: 10px; } </style>
最后
到这里一个button组件的开发基本就结束了，看起来一个不起眼的button组件里面其实还是包含些许内容的。如果你想了解更多组件的实现的话可以关注专栏，将不定期更新其它组件的实现。
如果你觉得本篇文章对你有帮助的话，动动指头点个赞吧orz，你的鼓励将会是我持续创作的动力
