vue弹窗调用另一个弹窗_vue 点击弹窗以外的其他区域可以关闭弹窗

image.png

代码实例

html

js

mounted () {

let _this = this;

document.addEventListener('mouseup',(e) =>{

let tree = this.$refs.container

if (tree) {

if (!tree.contains(e.target)) {

this.showDialog=false

}

}

})

}

上面的还是不行的没关系，第二种方法 ===>

image.png

image.png

HTML部分

class="select"

@click.stop="showDialog=!showDialog"

>

js部分

mounted() {

//判断点击的是否是类型下拉区域

document.addEventListener("click", this.bodyCloseMenus);

}

//组件销毁时别忘记清除

destroyed() {

document.removeEventListener("click", this.bodyCloseMenus);

},

methods: {

//页面其他区域点击关闭分类

bodyCloseMenus(e) {

let self = this;

if (self.showDialog == true) {

//排除本身

let tree = self.$refs.container

if(tree){

if (!tree.contains(e.target)) {

self.showDialog = false;

}

}

}

},

}

以上测试还不行的话在另寻方法吧~