更新记录
1.1.1(2020-08-20) 下载此版本
修复form-type无法使用的bug
1.1.0(2020-08-18) 下载此版本
新增倒计时按钮功能
1.0.1(2020-08-16) 下载此版本
修复了参数color的bug
查看更多平台兼容性
一、使用说明
-
解压下载的压缩包,将组件放在项目的components目录下
-
引用组件
// main.js import Vue from 'vue' import App from './App' import wybButton from '@/components/wyb-button/wyb-button.vue' // 引入 Vue.component('wyb-button', wybButton) // 全局注册,即所有.vue页面都可以不用声明直接使用 Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount()
<wyb-button class="btn" width="190rpx" type="filled">纯色</wyb-button> <wyb-button class="btn" width="190rpx" type="plain">简约</wyb-button> <wyb-button class="btn" width="190rpx" type="hollow">镂空</wyb-button>
-
Demo体验地址:点我访问(请用手机访问,或用桌面浏览器启动手机调试模式)
-
如果觉得我的插件还不错,可以下载我的插件的示例集合Demo => 传送门,里面有我全部的插件以及全部插件的示例工程
二、参数说明
-
Props
参数名 类型 默认值 说明 可选值 type String 'filled' 按钮的外观类型 filled:纯色
plain:简约
hollow:镂空
none:镂空无边框width String 90%屏宽 按钮宽度(除小程序外支持百分比,单位随意) - height String '80rpx' 按钮高度(除小程序外支持百分比,单位随意) - color HexColor '#007AFF' 按钮颜色 - font-size String, Number 38.8%按钮高度 按钮文字的字体大小(单位:rpx) - radius Array ['7px'] 按钮的四角弧度
1. 当数组中只有一个元素时,四角弧度相等且均为array[0]
2. 当数组中有四个元素时,array[0]是左上角的弧度,array[1]是右上角的弧度,array[2]是右下角的弧度,array[3]是左下角的弧度
3. 数组的长度必须为1或4,不能为2或3
4. 当值为['100%'],且按钮宽高相等时,按钮为圆形
5. 当弧度足够大时,例如1000px,按钮为圆角- border-size String, Number 1 按钮边框的宽度(单位:px) - border-type String 'solid' 按钮边框的类型 solid:实线
dashed:虚线
dotted:点阵ripple Boolean false 是否开启水波纹(水波纹与hover-class不同时存在) true | false ripple-bg-color HexColor, RgbColor 'rgba(0,0,0,0.15)' 水波纹的颜色 - is-show-loading Boolean false 是否显示加载动画(启用后如果不显示加载动画,请加大宽度,直到显示) true | false disabled Boolean false 是否禁用按钮 true | false icon-path Sting - 图标地址,为空时不显示图标,支持网络地址(启用后如果不显示图标,请加大宽度,直到显示) - icon-size String, Number 38.8%按钮高度 图标大小(单位:rpx) - icon-margin-right String, Number 15 图标距离按钮文字的距离(单位:rpx) - count-down Boolean false 是否开启倒计时 true | false count-down-num Number 60 倒计时的时间(单位:s) - count-down-text String '后重新获取' 显示在倒计时后面的文字 - box-shadow String - 按钮阴影,格式同css - form-type String - 用于 <form>
组件,点击分别会触发<form>
组件的 submit/reset 事件submit:提交表单
reset:重置表单data-param String - 用于data-xxx属性,通过currentTarget.dataset.param获取 - open-type String - 平台开放能力,具体请看uniapp文档关于button组件部分说明
https://uniapp.dcloud.io/component/button以下为微信小程序(只对微信小程序生效)开放能力参数:
参数名 类型 默认值 说明 lang String 'en' 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 session-from String - 会话来源,open-type="contact"时有效 send-message-title String 当前标题 会话内消息卡片标题,open-type="contact"时有效 send-message-path String 当前分享路径 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 send-message-img String 截图 会话内消息卡片图片,open-type="contact"时有效 show-message-card boolean false 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 -
Event
事件名 说明 生效时机 @click 点击事件 - @longclick 长按事件 - @getphonenumber 获取用户手机号回调 open-type="getPhoneNumber" @getuserinfo 用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo open-type="getUserInfo" @error 当使用开放能力时,发生错误的回调 open-type="launchApp" @opensetting 在打开授权设置页并关闭后回调 open-type="openSetting" @launchapp 打开 APP 成功的回调 open-type="launchApp"
三、其它说明
- 由于按钮的自定义自由度较高,所以如果觉得麻烦,可以直接复制示例demo中写好的样式使用(点我下载)
- 不得不说,uni-app本身的button组件已经很完备了,只是样式上设置比较麻烦。所以我写了这样一个组件,容纳了市面上大多数的按钮风格
- 如果想实现悬浮按钮,在组件上给个class自己写一下position、top、left、right、bottom这几个属性就行了