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