快速实现微信小程序的一个按钮组件（微信小程序按钮）

微信小程序有一个按钮组件。微信小程序原本存在于按钮组件中，样式并不难看，还有很多扩展属性。只要您阅读文档并在阅读时尝试，构建理想的按钮还是很容易的。微信小程序按钮入口。但有时您可能会觉得原生按钮组件的配置过于复杂或不符合当前要求，因此您可能需要自定义一个按钮组件。

好的，首先，举个例子，我想要这个效果。

有五种不同的颜色。

有三种不同尺寸可供选择。

有镂空效果

可以四舍五入

可以禁用

可以设置图标。

编码的第一步是创建一个组件。首先，打开编辑器。在这里，打开微信开发者工具，然后创建一个组件，就像这样。

我在这里使用Vscode，然后使用less，easyless插件会自动将less编译成wxss样式。

第二步，控制结构和风格结构需要注意:

文本应该显示在中间，因此在这里使用flex布局可能会很方便。

您需要预留图标位置。如果未设置，则不会显示。

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

注意相应的结构和风格。

。PM-button { border -radius:0；font -体重:正常；显示器:flexflex -流:行nowrapjustify -内容:居中；align -项目:居中；white -space:nowrap；}。PM-按钮:not（【size =‘mini‘】）{ width:0；}。PM-button --normal { width:80px！重要；高度:40pxfont -大小:16px}。PM-button --normal。PM-button --round { border -radius:40px；}。PM-button --small {宽度:60px！重要；高度:30pxfont -大小:14px}。PM-button --small。PM-button --round { border -radius:30px；}。PM-button --mini { width:40px！重要；高度:20pxfont -大小:12px}。PM-button --mini。PM-button --round { border -radius:20px；}。PM-button --原色{ background -color:# 1989 fa；边框:1px实心# 1989fa颜色:白色；}。PM-button --primary。PM-button --plain { color:# 1989 fa；}。PM-button --success { background -color:# 07c 160；边框:1px纯色# 07c160颜色:白色；}。PM-button --success。PM-button --plain { color:# 07c 160；}。PM-button --danger { background -color:# ee0a 24；边框:1px纯色# ee0a24颜色:白色；}。PM-button --danger。PM-button --plain { color:# ee0a 24；}。PM-button --warning { background -color:# ff 976 a；边框:1px纯色# ff976a颜色:白色；}。PM-button --warning。PM-button --plain { color:# ff 976 a；}。PM-button --默认{ background -color:# ffffff；border:1px solid # ebedf 0；颜色:黑色；}。PM-button --主要:活动、。PM-button --成功:活动、。PM-button --危险:活动、。PM-button --警告:活动、。PM-button --默认:活动{不透明度:0。8；}。PM-button --default:active { background -color:# ebedf 0；}。PM-button --plain { background -color:透明；}。PM-button --plain:active {不透明度:1！重要；background -color:# ebedf 0；}。PM-按钮--禁用{不透明度:0。6；}。PM-按钮--禁用:活动{不透明度:0。6！重要；}。PM-button --disabled。PM-button --plain:active、。PM-button --disabled。PM-button --default:active { background -color:transparent；}第三步，逻辑处理组件（{ /** *组件属性列表*/properties:{ size:{ type:string，value:& # 39；正常& # 39；}，类型:{ type: String，value:& # 39；初级& # 39；}，plain: Boolean，disabled: Boolean，round: Boolean，cStyle: String，icon: String，iconColor: String，iconSize: String }，/* * *组件的方法列表*/methods:{ click handler（）{！this . data . disabled & & this . triggerevent（& # 39；点击& # 39；，{ }）} }）推荐教程:微信小程序

以上是快速实现一个微信小程序的按钮组件的细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序中echarts的用法以及你可能遇到的坑，快来收藏避雷吧！！（微信小程序echarts降低等级）
• 教你如何自定义微信小程序的底部导航栏(如何给微信小程序添加底部导航)
• 微信小程序中如何实现子对父的参数传递（页面沟通）（小程序父对子的价值传递）
• 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）

本文由主机参考刊发，转载请注明：快速实现微信小程序的一个按钮组件（微信小程序按钮） https://zhujicankao.com/102405.html