概述
原生HTML的button只能保证功能存在，样式都不怎么好看。当然也可以通过编写css样式来改变原生HTML中的button显示，但是现在各个UI框架都很流行，也很方便，很多时候都是直接引入框架就能获得非常好看、好用的样式组件。那么此篇文章使用Vue也来实现一个好看、使用的Button小组件。

实现
button.vue
首先需要在模板页面将基本button组件需要的元素进行组装

<template>  <button    :class="[      'pm-button', `pm-button--${type}`, `pm-button--${size}`,      {        'pm-button--plain': plain,        'pm-button--disabled': disabled      },      `pm-button--${shape}`    ]"    :disabled="disabled"    @click="clickHandler"  >    <i v-else-if="icon" :class="['pm-button__icon pm-font', `pm-icon-${icon}`]"></i>    <slot></slot>  </button></template><script>  const Constant = {    typeMap: {      default: "default",      primary: "primary",      success: "success",      warning: "warning",      danger: "danger"    },    buttonSizeMap: {      large: "large",      normal: "normal",      small: "small",      mini: "mini"    },    shapeMap: {      default: "default",      round: "round",      circle: "circle"    }  }  export default {    name: "PmButton",    props: {      type: {        default: Constant.typeMap.default,        type: String      },      size: {        default: Constant.buttonSizeMap.normal,        type: String      },      plain: {        default: false,        type: Boolean      },      icon: String,      loading: {        default: false,        type: Boolean      },      shape: {        default: Constant.shapeMap.default,        type: String      },      disabled: Boolean    },    methods: {      clickHandler(event) {        this.$emit("click", event);      }    }  }</script>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以添加我的web前端交流裙：【600】+【610】+【151】，即可免费获取。

2.button.less
接下来需要为button添加不同种类的样式，适配使用的时候传入的值，而得到对应种类的button

@import "../common/index.less";    //额外的基础变量.pm-button {  position: relative;  display: inline-block;  border-radius: @button-border-radius;  margin: 0;  padding: 0;  text-align: center;  border: @button-border-width solid;  box-sizing: border-box;  outline: none;  &::before {    position: absolute;    top: 50%;    left: 50%;    width: 100%;    height: 100%;    background-color: @black;    border: inherit;    border-color: @black;    border-radius: inherit;    transform: translate(-50%, -50%);    opacity: 0;    content: ' ';  }  &:active::before {    opacity: .1;  }  &--default {    color: @button-default-color;    background-color: @button-default-background-color;    border-color: @button-default-border-color;  }  &--primary {    color: @button-primary-color;    background-color: @button-primary-background-color;    border-color: @button-primary-border-color;  }  &--success {    color: @button-success-color;    background-color: @button-success-background-color;    border-color: @button-success-border-color;  }  &--warning {    color: @button-warning-color;    background-color: @button-warning-background-color;    border-color: @button-warning-border-color;  }  &--danger {    color: @button-danger-color;    background-color: @button-danger-background-color;    border-color: @button-danger-border-color;  }  &--large {    font-size: @button-large-font-size;    height: @button-large-height;    line-height: @button-large-line-height;    padding: @button-large-padding;  }  &--normal {    font-size: @button-normal-font-size;    height: @button-default-height;    line-height: @button-default-line-height;    padding: @button-normal-padding;  }  &--small {    font-size: @button-small-font-size;    height: @button-small-height;    line-height: @button-small-line-height;    padding: @button-small-padding;    min-width: @button-small-min-width;  }  &--mini {    font-size: @button-mini-font-size;    height: @button-mini-height;    line-height: @button-mini-line-height;    padding: @button-mini-padding;    min-width: @button-mini-min-width;  }  &--plain {    background-color: @button-plain-background-color;    &.pm-button--primary {      color: @button-primary-background-color;    }    &.pm-button--success {      color: @button-success-background-color;    }    &.pm-button--warning {      color: @button-warning-background-color;    }    &.pm-button--danger {      color: @button-danger-background-color;    }  }  &--round {    &.pm-button--large {      border-radius: @button-large-height;    }    &.pm-button--normal {      border-radius: @button-default-height;    }    &.pm-button--small {      border-radius: @button-small-height;    }    &.pm-button--mini {      border-radius: @button-mini-height;    }  }  &--circle {    padding: 0;    &.pm-button--large {      width: @button-large-height;      border-radius: @button-large-height;    }    &.pm-button--normal {      width:@button-default-height;      border-radius: @button-default-height;    }    &.pm-button--small {      width:@button-mini-height;      border-radius: @button-small-height;    }    &.pm-button--mini {      width:@button-mini-height;      border-radius: @button-mini-height;    }  }  &--disabled {    opacity: .5;  }  &__icon {    position: relative;    top: .11rem;  }}

测试Button小组件

<template>  <div>    <h3>按钮种类</h3>    <div class="default">      <pm-button type="default">默认按钮</pm-button>      <pm-button type="primary">普通按钮</pm-button>      <pm-button type="success">成功按钮</pm-button>      <pm-button type="warning">警告按钮</pm-button>      <pm-button type="danger">危险按钮</pm-button>    </div>    <h3>按钮大小</h3>    <div class="size">      <pm-button size="large" type="primary">大按钮</pm-button>      <pm-button size="normal" type="primary">普通按钮</pm-button>      <pm-button size="small" type="primary">小按钮</pm-button>      <pm-button size="mini" type="primary">Mini按钮</pm-button>    </div>    <h3>镂空按钮</h3>    <div class="default">      <pm-button type="primary" plain>普通按钮</pm-button>      <pm-button type="success" plain>成功按钮</pm-button>      <pm-button type="warning" plain>警告按钮</pm-button>      <pm-button type="danger" plain>危险按钮</pm-button>    </div>    <h3>圆形按钮</h3>    <div class="default">      <pm-button type="primary" shape="round">普通按钮</pm-button>      <pm-button icon="like-o" shape="circle"></pm-button>    </div>    <h3>图标按钮</h3>    <div class="size">      <pm-button type="success" icon="like-o"></pm-button>      <pm-button type="primary" icon="search">搜索按钮</pm-button>    </div>    <h3>按钮点击</h3>    <div class="size">      <pm-button @click="btnClick" type="success">支付成功</pm-button>      <pm-button @click="btnClick2">点击我</pm-button>      <pm-button type="danger" disabled>被禁用</pm-button>    </div>  </div></template><script>  export default {    name: "ButtonTest",    methods: {      btnClick() {        this.$toast.success("支付成功");      },      btnClick2(e) {        console.log(e)      }    }  }</script><style scoped>  .default, .size {    display: flex;    flex-direction: row;    justify-content: flex-start;    flex-wrap: wrap;  }  button {    margin: .2rem .6rem;  }  button:last-child {    margin: .2rem 0 .2rem .6rem;  }</style>

效果展示
简单几个文件，就完成了组件化的button，当需要使用时，直接引入使用即可，简单方便，可复用。运行测试页面后，会得到这样的效果图。

实现一个基于Vue的Button小组件