app端在nvue页面,使用uni-popup组件时,第二次打开组件内绑定的所有事件失效

文章讨论了在使用uni-app的NVue页面上,uni-popup组件内的点击事件在第一次打开与关闭后失效的问题。提出使用v-if重新渲染解决,直到uni-app官方修复。展示了如何打开和关闭弹窗的方法。
摘要由CSDN通过智能技术生成

app端在nvue页面,使用uni-popup组件时,uni-popup里面的点击事件,第一次打开与关闭事件正常,第二次打开组件内绑定的所有事件失效。

个人感觉是因为事件绑定失效导致的,不知道uni-app什么时候能解决,目前我们可以用v-if重新渲染这个部分来间接重新绑定一下事件。

<uni-popup ref="popupAgreement" type="center" :is-mask-click="false">
	<div class="popup_inner">
			<div class="popup_btns" v-if="dialog_open">
				<button class="popup_btn cancel" @click="refuse"> <text class="btn_text">不同意</text> </button>
				<button class="popup_btn popup_btn_confirm" @click="confirm_popup"> <text class="btn_text">同意</text> </button>
		</div>
	</div>
</uni-popup>
/**打开隐私权限弹窗*/
open_dialog() {
	this.dialog_open = true
	this.$refs.popupAgreement.open('center')
},
/**关闭dialog* */
closePopup() {
	this.dialog_open = false
	this.$refs.popupAgreement.close()
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在其他页面上点击按钮来隐藏或显示弹出层,你可以使用 Vuex 来实现状态管理。以下是一个示例代码,展示了如何在不同页面上通过点击按钮来隐藏或显示弹出层: 首先,在你的 uni-app 项目中安装 Vuex: ``` npm install vuex ``` 然后,创建一个 `store` 文件夹,并在该文件夹下创建一个 `index.js` 文件,用于创建和管理 Vuex 的状态。 store/index.js: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { showPopup: false }, mutations: { setShowPopup(state, payload) { state.showPopup = payload } }, actions: { setShowPopup({ commit }, payload) { commit('setShowPopup', payload) } }, getters: { showPopup(state) { return state.showPopup } } }) ``` 接下来,在需要显示弹出层的页面中,引入 `uni-popup` 组件Vuex 的 `store`: your-page.vue: ```vue <template> <view> <uni-popup :show="showPopup" @close="closePopup"> <!-- 弹出层的内容 --> </uni-popup> <!-- 其他页面内容 --> <button @click="openPopup">打开弹出层</button> </view> </template> <script> import { mapGetters, mapActions } from 'vuex' import uniPopup from '@dcloudio/uni-popup' export default { components: { uniPopup }, computed: { ...mapGetters(['showPopup']) }, methods: { ...mapActions(['setShowPopup']), openPopup() { this.setShowPopup(true) }, closePopup() { this.setShowPopup(false) } } } </script> ``` 在上述示例中,我们使用 Vuex 来管理 `showPopup` 的状态。在 `actions` 中,我们定义了一个 `setShowPopup` 的 action,用于改变 `showPopup` 的值。在页面中的 `openPopup` 方法中,我们调用 `setShowPopup(true)` 来显示弹出层;在 `closePopup` 方法中,我们调用 `setShowPopup(false)` 来隐藏弹出层。 在其他页面中,你可以通过点击按钮来改变 `showPopup` 的值,从而控制弹出层的显示和隐藏。只需要在点击按钮的事件中调用 `setShowPopup` action,并传递相应的参数即可。 记得根据实际情况调整代码,并确保在需要显示弹出层的页面中引入正确的组件Vuex 的 `store`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pony君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值