从微信小程序到鸿蒙js开发【07】——menudialog (2)

需要用户确认操作的功能十分常用,比如是否删除,是否下单等。在微信小程序中采用的是wx.showModal(),弹窗内容、按钮内容和颜色都可以自定义,事件在success函数中进行捕获:

wx.showModal({ title: "提示", content: "确认删除吗?", confirmColor: "#e20a0b", confirmText: "对,删了它", cancelColor: "#777777", cancelText: "再考虑一下", success: res => { if(res.confirm) { console.log("删除成功!"); } else if(res.cancel) { console.log("取消删除操作。") } } })

从微信小程序到鸿蒙js开发【07】——menu&toast&dialog

在鸿蒙中,prompt模块的showDialog()方法提供了弹出对话框:

prompt.showDialog({ title: "操作提示", message: "确认删除吗?", buttons: [ { text: "我要删除", color: "#e20a0b" }, { text: "取消操作", color: "#777777" } ], success: res => { prompt.showToast({ message: "点击了第" + res.index + "个按钮" }) } })

从微信小程序到鸿蒙js开发【07】——menu&toast&dialog

对话框也是在底部弹出的,且按钮可以自行定义。点击按钮后,success方法会获取按钮的索引值,根据索引进行业务逻辑的编写。

从微信小程序到鸿蒙js开发【07】——menu&toast&dialog

想要设置三个按钮也是可以的,这个功能微信小程序的showModal()是没有的。

prompt.showDialog({ title: "操作提示", message: "确认删除吗?", buttons: [ { text: "我要删除", color: "#e20a0b" }, { text: "取消操作", color: "#777777" }, { text: "附加按钮", color: "#333333" } ], success: res => { prompt.showToast({ message: "点击了第" + res.index + "个按钮" }) } })

从微信小程序到鸿蒙js开发【07】——menu&toast&dialog

3、dialog对话框组件

prompt.showDialog()只能弹出具有提示文字和按钮的对话框,如果需要更丰富的模态对话框功能,鸿蒙还提供了dialog组件,这个组件在微信小程序中也是没有的。和menu一样,写在hml中的dialog并不会显示,也不会占用页面空间,需要通过id在方法中被唤起。

<dialog> <div> <div> <image src="{{ phone ? (imgUrl + \'phone.png\') : (imgUrl + \'phone1.png\') }}"></image> <input type="number" placeholder="请输入手机号" onchange="inputPhone"></input> </div> <div> <image src="{{ pwd ? (imgUrl + \'password.png\') : (imgUrl + \'password1.png\') }}"></image> <input type="password" placeholder="请输入密码" onchange="inputPwd"></input> </div> <button>登录</button> </div> </dialog>

这里需注意,官方文档中说的“支持单个子组件”的意思是,dialog中只能有一个直接子组件,即需要用一个div将内容套起来。

从微信小程序到鸿蒙js开发【07】——menu&toast&dialog

同样地,根据id找到元素,使用show()方法唤起对话框。对话框的show()方法无重载,会在页面底部弹出。dialog的大小取决于子组件div的大小,div给样式即可。

menuSelect(event) { let value = event.value; if ("login" == value) { this.phone = ""; this.pwd = ""; this.$element("loginDialog").show(); } else if ("register" == value) { this.phone = ""; this.pwd = ""; this.$element("registerDialog").show(); } },

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwxysw.html