button 样式_实现一个基于Vue的Button小组件

概述

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

实现

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

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

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-s