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

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

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

有五种不同的颜色。

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

有镂空效果

可以四舍五入

可以禁用

可以设置图标。

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

我在这里使用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；，{ }）} }）推荐教程:微信小程序

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

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

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