vant组件ImagePreview 遇到的一个问题
ImagePreview 是一个图箱插件,自动创建遮罩层,但是当我把它封装到一个插件里面(imgbox.vue);在两个页面都引入这个同一个组件,遮罩层会在某一个页面显示,另一个页面消失.
仔细想了下,应该是他只会创建一个遮罩层,然后创建后就不在处理了,只是显示和隐藏操作,这就导致第一个页面的遮罩层被第二个页面拿走了,没法拿出来,唯一的办法就是重载了.
通过v-if对这个imgbox进行重载渲染,创建一个判断属性,每次判断这个来是否挂载组件.
这个判断属性要在当前页面mounted生命周期时挂载一次,但是这也只能挂载一次,所以我们还要监控路由的变化,如果又到了这两个页面,就再进行一次挂载,离开时就丢掉.
data(){
return {
imgBoxShow: false
}
},
watch: {
$route(to, form) {
if (to.name === "xxx") { //填页面对应的路由名
this.imgBoxShow = true;
} else {
this.imgBoxShow = false;
}
}
},
mounted() {
this.imgBoxShow = true;
}
<imgbox v-if="imgBoxShow "/>
两个页面都对应修改即可
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
评论
最新文章
如何在项目中使用一个自定义的npm模块(如何使用一个魔改后的npm模块)
0点赞
·
1评论
Debian12 更新系统版本(目前更新至12.5版本)
0点赞
·
0评论
Nestjs CORS配置和生产环境处理
1点赞
·
0评论
Debian12 SSH连接报错:Error Handshake failed no matching host key format
0点赞
·
0评论
Prisma 使用MongoDB创建数据时报错:Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.
0点赞
·
0评论
目录
暂无目录
全部评论 1
武汉空调维修
Google Chrome Windows 7