快速实现一个微信小程序的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组件的详细内容，更多内容请关注技术你好其它相关文章！