广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

微信小程序原生存在Button组件，而且样式也不丑，拓展属性也很多，只要去看文档，一边看一边试，还是很容易构造一个理想的按钮Button出来。微信小程序Button传送门。但是某些时候可能也会觉得原生Button组件配置过于复杂，或者并不满足当前需求，那么就可能需要自定义一个Button组件了。

比如想要这样的效果。

拥有五种不同的颜色

拥有三种不同的大小

拥有镂空效果

可以圆角

可以禁用

可以设置图标

首先打开编辑器，这里就打开微信开发者工具吧，然后创建一个组件，像这样

我这里用的是Vscode然后用到了less，和easyLess插件自动编译less为wxss样式。

结构中需要注意：

文字应该居中显示，所以此处可能需要使用flex布局方便些

需要预留图标位置，没有设置时，则不显示

需要设置背景颜色控制选项

注意结构和样式对应即可

<button  class="pm-button pm-button--{{size}} pm-button--{{type}} {{plain?'pm-button--plain':''}} {{round?'pm-button--round':''}} {{disabled?'pm-button--disabled':''}}"  style="{{cStyle}}"  bindtap="clickHandler">  <pm-icon icon="{{icon}}" color="{{iconColor}}" size="{{iconSize}}" wx:if="{{icon}}"></pm-icon>  <slot/></button>

.pm-button {  border-radius: 0;  font-weight: normal;  display: flex;  flex-flow: row nowrap;  justify-content: center;  align-items: center;  white-space: nowrap;}.pm-button:not([size='mini']) {  width: 0;}.pm-button--normal {  width: 80px !important;  height: 40px;  font-size: 16px;}.pm-button--normal.pm-button--round {  border-radius: 40px;}.pm-button--small {  width: 60px !important;  height: 30px;  font-size: 14px;}.pm-button--small.pm-button--round {  border-radius: 30px;}.pm-button--mini {  width: 40px !important;  height: 20px;  font-size: 12px;}.pm-button--mini.pm-button--round {  border-radius: 20px;}.pm-button--primary {  background-color: #1989fa;  border: 1px solid #1989fa;  color: white;}.pm-button--primary.pm-button--plain {  color: #1989fa;}.pm-button--success {  background-color: #07c160;  border: 1px solid #07c160;  color: white;}.pm-button--success.pm-button--plain {  color: #07c160;}.pm-button--danger {  background-color: #ee0a24;  border: 1px solid #ee0a24;  color: white;}.pm-button--danger.pm-button--plain {  color: #ee0a24;}.pm-button--warning {  background-color: #ff976a;  border: 1px solid #ff976a;  color: white;}.pm-button--warning.pm-button--plain {  color: #ff976a;}.pm-button--default {  background-color: #ffffff;  border: 1px solid #ebedf0;  color: black;}.pm-button--primary:active,.pm-button--success:active,.pm-button--danger:active,.pm-button--warning:active,.pm-button--default:active {  opacity: 0.8;}.pm-button--default:active {  background-color: #ebedf0;}.pm-button--plain {  background-color: transparent;}.pm-button--plain:active {  opacity: 1!important;  background-color: #ebedf0;}.pm-button--disabled {  opacity: 0.6;}.pm-button--disabled:active {  opacity: 0.6 !important;}.pm-button--disabled.pm-button--plain:active,.pm-button--disabled.pm-button--default:active {  background-color: transparent;}

Component({  /**   * 组件的属性列表   */  properties: {    size: {      type: String,      value: 'normal'    },    type: {      type: String,      value: 'primary'    },    plain: Boolean,    disabled: Boolean,    round: Boolean,    cStyle: String,    icon: String,    iconColor: String,    iconSize: String  },  /**   * 组件的方法列表   */  methods: {    clickHandler() {      !this.data.disabled && this.triggerEvent('click', {})    }  }})

推荐教程：《微信小程序》

以上就是快速实现一个微信小程序的Button组件的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~