更新记录

1.1.1（2020-08-20）

修复form-type无法使用的bug

1.1.0（2020-08-18）

新增倒计时按钮功能

1.0.1（2020-08-16）

修复了参数color的bug

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件

   // 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>

3. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

1. 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"时有效

2. 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"

三、其它说明

1. 由于按钮的自定义自由度较高，所以如果觉得麻烦，可以直接复制示例demo中写好的样式使用（点我下载）
2. 不得不说，uni-app本身的button组件已经很完备了，只是样式上设置比较麻烦。所以我写了这样一个组件，容纳了市面上大多数的按钮风格
3. 如果想实现悬浮按钮，在组件上给个class自己写一下position、top、left、right、bottom这几个属性就行了