快速为你的微信小程序实现一个按钮组件（你的小程序中的按钮有哪些类型？）

微信小程序中存在按钮组件

微信小程序中原生存在按钮组件，样式不难看，扩展属性也很多。 如果您阅读文档和实验，构建理想的按钮仍然很容易。 微信小程序按钮入口。 不过，有时候你可能会发现原生按钮组件的配置过于复杂或者不能满足你当前的需求，需要自定义按钮组件。

那么让我们开始吧。

例如，如果您想要这种效果。

有 5 种不同颜色可供选择

有 3 种不同尺寸可供选择

具有镂空效果

可以圆角

可以禁用

可以设置图标

代码第一步创建组件

先打开编辑器，现在打开微信开发者工具，创建组件。 像这样

我在这里更少使用Vscode，并使用easyLess插件自动将less编译为wxss风格。

第二步，控件的结构和样式

结构中注意：

文本需要居中，所以Flex Layout在这里很有用

必填保留图标的位置。 如果不设置则不会显示。

必须设置背景颜色控制选项。

请注意相应的结构和风格。

.pm-button { border-radius: 0; font-weight: 正常; flex-flow：行午睡；-对齐内容：居中；-对齐项目：居中；}.pm-button：not（[size ='mini'] ) { 宽度: 0;} .pm-button--正常 { 宽度: 80px 高度: 40px 重要; 字体-大小：16px;}.pm-按钮--normal.pm-按钮--圆形{边框-半径：40px;}.pm-按钮--小{宽度：60px！重要；高度：30px字体-大小： 14px;}.pm-按钮--small.pm-按钮--圆形{边框-半径: 30px;}.pm-按钮-[k3 ]迷你{宽度：40px !重要; 高度: 20px; 字体- 大小: 12px;}.pm-button--mini.pm-button--round { border- 半径: 20px;}.pm- 按钮--primary {背景-颜色：#1989fa； 1px 实心 #1989fa; 颜色：白色;}.pm-button--primary.pm-button--plain { 颜色：#1989fa;}.pm-button[ k3]-成功{背景-颜色：#07c160；边框：1px实体#07c160； 颜色：白色;}.pm-button--success.pm-button--plain { 颜色：#07c160;}.pm-button--危险{背景-颜色：#ee0a24；边框：1px纯色#ee0a24； 白色;}.pm-button--danger.pm-button--plain { 颜色: #ee0a24;}.pm-button-- 警告 {背景 - 颜色：#ff976a；边框：1px 实心颜色：#ff976a； 白色;}.pm-按钮--警告g.pm-button--plain {颜色：#ff976a;}.pm-button--默认{背景-颜色：#ffffff 边框：1px 实心#ebedf0; ; 颜色： 黑色;}.pm-button--primary:active,.pm-button--success:active,.pm-button--danger :active ,.pm-button--warning:active,.pm-button--default:active { 不透明度: 0.8;}.pm-按钮--默认：活动{背景-颜色：#ebedf0;}.pm-按钮--普通{背景-颜色：透明;}.pm-按钮--plain:active {不透明度: 1!重要背景-颜色: #ebedf0;}.pm-button--disable { 不透明度：0.6;}.pm-button--disable:active { 不透明度：0.6 !重要;}.pm-按钮--disabled.pm-button--plain:active,.pm-button--disabled.pm[k3 ] ] 按钮 - - Default:active {background-color:transparent;}第三步 Component({ /** * 组件属性列表 */properties: { size: { type: String, value: 'norm al' }, type: {类型：字符串，值：'primary'}，普通：布尔值，禁用：布尔值，圆形：布尔值，cStyle：字符串，图标： String, iconColor: String, iconSize: String }, /** * 组件方法列表 */methods: { clickHandler() { !this.data.disabled && this.triggerEvent('click', {}) } }})

推荐教程：“微信小程序”

下载微信App

微信 是一款移动通信软件，支持通过蜂窝网络发送语音消息、视频、照片和文本。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 遇到麻烦的朋友，请快来保存您的下载体验吧！

下载

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

• 简单分析如何解决迷你程序中的更新跳跃错误（需要迷你程序）
• 请逐步告诉我如何在线部署微信系数（如何在线部署为迷你程序）
• 使用异步/异步/等待微信开发（小程序异步/等待支持）
• 微信系的图像处理（中心和全屏）（微信小程序设置图像位置和大小）
• 介绍微信小程序中的wxs模块并展示如何使用（微信小程序中如何使用该模块，代码解释）

本文由主机参考刊发，转载请注明：快速为你的微信小程序实现一个按钮组件（你的小程序中的按钮有哪些类型？） https://zhujicankao.com/142470.html