更新记录

1.1.7（2020-09-25）

修复异步关闭无法结束loading的bug

1.1.6（2020-09-25）

新增调整内容边距的参数padding

1.1.5（2020-09-04）

修复自定义模式在小程序中启用scroll-view时，滚动不灵敏的bug

平台兼容性

一、使用说明

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

2. 引用组件

   <wyb-modal 
    ref="modal" 
    title="穿越火线" 
    content="你喜欢肖枫还是路小北？"
    cancel-text="路小北"
    confirm-text="肖枫"
    @cancel="onCancelClick"
    @confirm="onConfirmClick" />

   import wybModal from '@/components/wyb-modal/wyb-modal.vue'
   export default {
       components: {
           wybModal
       }
   }

   this.$refs.modal.showModal() // 显示
   this.$refs.modal.hideModal() // 隐藏

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

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

二、参数说明

1. Props

   参数名	类型	默认值	说明	可选值
   title	String	"标题"	模态框标题
   show-title	Boolean	true	是否显示模态框标题	true | false
   content	String	"内容"	模态框内容
   confirm-text	String	"确认"	确认按钮的文字
   cancel-text	String	“取消	取消按钮的文字
   confirm-color	HexColor	"#007aff"	确定按钮的文字颜色（不可使用RgbColor）
   cancel-color	HexColor, RgbColor	"#000000"	取消按钮的颜色
   show-cancel	Boolean	true	是否显示取消按钮
   width	String, Number	600	模态框的宽度（单位：rpx）
   height	String, Number	350	模态框的高度（单位：rpx）
   line-height	String, Number	30	模态框内容的行高（单位：rpx）
   radius	String, Number	5	模态框的圆角值（单位：px）
   mask-click-close	Boolean	false	点击遮罩是否可以关闭模态框	true | false
   mask-alpha	Number	0.5	遮罩的透明度
   duration	Number	400	模态框入场退场动画的时间（单位：ms）
   animation	String	"zoom-lessen"	模态框的动画类型	zoom-lessen | zoom-largen | bounce | slide-up | slide-down
   bg-color	HexColor, RgbColor	"#ffffff"	模态框的背景颜色
   color	HexColor, RgbColor	"#000000"	模态框中所有文字的颜色 1. 会被cancel-color与confirm-color覆盖 2. 若不填，bg-color属于浅色时为黑色，属于深色时为白色
   zoom-lessen-multi	Number	1.2	当animation="zoom-lessen"时，模态框的基础放大倍数
   slide-multi	Number	0.15	当animation="slide-*"时，模态框的位移倍数（对于自身宽高的倍数）
   custom	Boolean	false	是否自定义内容	true | false
   negative-top	Number	0	弹出框向上偏移的距离
   async-close	Boolean	false	是否开启异步关闭（开启后点确认按钮会出现加载动画，同时模态框不会关闭，需要自己用ref属性关闭）	true | false
   padding	Array	[20]	模态框内容的边距，单位(rpx) 当数组中只有一个元素时，上下左右四个边距都是该元素； 当数组中有4个元素时，分别对应上边距、右边距、下边距和左边距

2. Events

   事件名	说明
   @confirm	点击确定按钮的回调
   @cancel	点击取消按钮的回调