popover 和 v-if 的巧用,自动卸载popver内容

博客讨论了在网页应用中,如何处理弹窗(popover)内内容的挂载与卸载问题。当popover打开和关闭时,内容状态未能正确同步,可能导致用户看到相同界面但实际状态不同。解决方案是通过v-model控制开关状态,实现内容的动态加载和卸载,确保每个界面状态的一致性。文章以Vue为例,展示了如何利用v-if实现这一目标。
摘要由CSDN通过智能技术生成

首先说需求;popver打开关闭的同时,完成内部东西的卸载与挂载。
这个东西首先要从popver的编译说起,pop窗口被编译在网页的app层,里面的东西也就跟着一起在app层了。这就产生了一个非常不正确的状态情况。
刚打开界面的时候。popver没被人点过,里面的内容是未被挂载的状态,一旦pop被点开,被挂载了,再关闭pop,这时候依旧是被挂载在app层的。因此,给你一个没有打开的pop的情况的画面,无法判断pop里面的内容是否被挂载。对于用户来说,同样的画面有两种不同的情况,就很不合理。
举例:pop外有三个选项,abc,点啥pop显示啥,多选。
用户使用的时候正常操作:打开pop,看自己啥都没选,关闭pop。abc随便选选,打开pop。这时候pop中就能显示出来用户选了啥。
错误操作:abc随便选选,打开pop。这时候因为pop从来没被打开过,因此abc的内容不能被同步到pop中。
如果我们可以让状态同步:

            <el-popover
              trigger="click"
              v-model="switchModal">
              <div v-if="switchModal">xxxxxxxxx</div>
            </el-popover>

switchModal受到pop中v-model的控制,每次pop开关引起它变化,它又控制了里面内容的卸载与挂载。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值