wepy-modal
基于wepy框架开发的微信小程序modal组件
使用
1、安装
npm install wepy-modal -S
2、引入
3、使用方法
3.1、通过invoke调用
this;
3.2 通过props参数控制
4、参数说明
4.1 代码演示
body内容填充区
4.2 参数配置说明
属性/方法 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | modal的显示与隐藏 | Boolean | false |
className | modal的class命名 | String | false |
title | modal的标题文字(没有则不显示title) | String | '' |
cancelTxt | 取消按钮自定义文字 | String | 取消 |
okTxt | 确定按钮自定义文字 | String | 确定 |
showOk | 是否展示【确定】按钮 | Boolean | true |
showCancel | 是否展示【取消】按钮 | Boolean | true |
actions | 自定义的操作按钮,样例:[{name: '按钮一', color: 'red'}], name: 按钮名称,color:按钮颜色(css的颜色即可) | Array | [] |
actionMode | 横列或竖列展示自定义操作按钮(默认横排) | String | '' |
onClickItem | 当点击自定义的操作按钮时触发,参数index为点击按钮的索引,参数action为点击按钮的配置项 | function(index, action) | 无 |
onClickOk | 当点击确定按钮时触发 | function | 无 |
onClickCancel | 当点击取消按钮时触发 | function | 无 |
4.3 modal的body内容自定义
为了更好的自定义modal的body内容,使用了slot插槽技术,可以使用wepy的slot技术来自定义modal的body内容。
自定义body内容填充区
5、注意事项
- 因为小程序的设计,小程序textarea组件拥有最高层级,不能通过z-index限制,所以在打开modal组件时,如果页面下有textarea组件,可以使用wx:if手动把texarea组建“删掉”,不然在ios手机上会出现点击击穿bug,该问题暂时还没有合理的解决方案。