uni-popup-dialog踩过的坑

使用uni-app 弹出框这个组件的时候,记住要引用uni-app示例中的uni-popup-dialog组件,

如果你是从插件市场(https://ext.dcloud.net.cn/plugin?id=329)导入的,就会出现问题,

主要问题是获取不到弹出框中input的值,并且会报错,主要是插件市场的代码有问题造成的。

正确代码

onOk() {
				this.$emit('confirm', () => {
					this.popup.close()
					if (this.mode === 'input') this.val = this.value
				}, this.mode === 'input' ? this.val : '')
			},

下面的错误代码,大家自行对比差别

onOk() {
				if (this.mode === 'input'){
					console.log(this.value)
					this.$emit('confirm', this.val)
				}else{
					this.$emit('confirm')
				}
				if(this.beforeClose) return
				this.popup.close()
			},

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-popup-dialog是一种在UNI-APP开发中常用的弹窗组件,它可以在页面中弹出一个对话框供用户进行操作。而取消事件是指当用户点击对话框中的取消按钮时,触发的事件。 取消事件通常用于在用户取消操作时执行一些逻辑,比如关闭弹窗、重置表单等。在使用uni-popup-dialog组件时,可以通过监听取消事件来处理用户取消操作。 具体实现取消事件的方法如下: 1. 在uni-popup-dialog组件中,可以通过设置bind:cancel来绑定取消事件的回调函数,例如:bind:cancel="onCancel"。 2. 在对应的页面或组件中,定义onCancel方法,该方法会在用户点击取消按钮时被触发。 3. 在onCancel方法中编写具体的取消逻辑,比如关闭弹窗、重置表单等。 示例代码如下: 在组件中设置uni-popup-dialog组件的取消事件回调函数: ``` <uni-popup-dialog bind:cancel="onCancel"></uni-popup-dialog> ``` 在对应的页面或组件中定义onCancel方法,并编写取消逻辑: ``` methods: { onCancel: function() { // 关闭弹窗逻辑 // uni.hidePopupDialog(); // 重置表单逻辑 // this.form = {}; } } ``` 上述代码中,当用户点击uni-popup-dialog组件中的取消按钮时,会触发onCancel方法。在该方法中,可以根据具体需求编写取消事件的相关逻辑。 总结:通过设置uni-popup-dialog组件的取消事件回调函数,并在对应的方法中编写取消逻辑,可以实现uni-popup-dialog取消事件的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值