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

接下来在button.vue中实现传入不同值赋予不同类名，从而实现显示不同效果。

   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  };  }, }); " _ue_custom_node_="true">

这样一来传入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="" --="">  
 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 文字按钮 
  
  朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 
  
  圆角按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 
  
  禁用按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 
  
  禁用按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 
  
  默认按钮 中等按钮 小型按钮 超小按钮 

启动项目我们就会在浏览器中看到我们的各式各样的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使图标在按钮右侧。

      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  };  }, }); " _ue_custom_node_="true">

然后在examples/App.vue使用并查看效果

  图标按钮 图标按钮  import { Button } from 'kitty-ui' " _ue_custom_node_="true">.k-button {  margin-right: 10px; } " _ue_custom_node_="true">

最后

到这里一个button组件的开发基本就结束了，看起来一个不起眼的button组件里面其实还是包含些许内容的。如果你想了解更多组件的实现的话可以关注专栏，将不定期更新其它组件的实现。

如果你觉得本篇文章对你有帮助的话，动动指头点个赞吧orz，你的鼓励将会是我持续创作的动力