1.0.5 • Published 5 years ago
miniprogram-modal-x v1.0.5
小程序对话框组件
开发背景:小程序原生的wx.showModal组件不能任意控制显示/隐藏,在某些场景下需要手动函数控制关闭。
NPM
npm install miniprogram-modal-x -save
// 注:并在开发者工具中,选择工具 => 构建npm
Example
// 在当前页面的.json内注册为局部的(或者在app.json内,注册为全局的)
"usingComponents": {
"customModal": "miniprogram-modal-x"
}
// 在.wxml内
<view>
<customModal modal="{{modal}}" bind:modalCallback="modalCallback"></customModal>
</view>
// 在.js内
Page({
data: {
modal: {
status: false,
title: '操作提醒',
content: '此操作不可逆,您确定要删除吗?',
cancelText: '取消',
confirmText: '确定',
cancelColor: '#999'
},
},
// 回调函数
modalCallback(opts) {
let type = opts.detail.type; // type => sure / cancel
this.setData({
modal: {
...this.data.modal,
status: false
}
});
if (type === 'sure') {
// 确认
// ...
}
},
// 显示对话框
showModal() {
this.setData({
modal: {
...this.data.modal,
status: true
}
});
}
});
Api
参数
Name | Type | Default | Description |
---|---|---|---|
modal | Object | 对话框描述、状态 | |
modal.status | Boolean | false | 控制对话框,显示/隐藏 |
modalPFn | Function | 点击回调函数,包含type类型(sure => 确定, cancel => 取消) |
其他说明
1、其他字段不赘述,同 wx.showModal一样 2、此对话框组件的样式于原生的一致