Vue 一个元素控制另外一个元素的显示和隐藏,同时点击一个元素以外的地方,隐藏另外一个元素
<div @click.stop="basic()" style="width: 100px;height: 100px;background-color: black;"><!-- 注意,这个需要阻止冒泡@click.stop="basic()" -->控制元素</div><divclass="person" v-if="sign" style="wid
·
<div @click.stop="basic()" style="width: 100px;height: 100px;background-color: black;">
<!-- 注意,这个需要阻止冒泡@click.stop="basic()" -->
控制元素
</div>
<div class="person" v-if="sign" style="width: 100px;height: 100px;background-color: red;">
被控制元素
</div>
data() {
return {
sign: true,
}
},
created() {
//添加全局点击事件,注意里面需要使用箭头函数
if (typeof window !== 'undefined') {
document.addEventListener('click', (e) => {
if (e.target.className !== 'person') {
this.sign = false
}
})
}
},
methods: {
basic() {
this.sign = !this.sign
},
}
有两点需要注意的地方:
1.控制元素需要阻止冒泡@click.stop="basic()"
2.在created添加全局点击事件时,注意里面需要使用箭头函数
更多推荐
已为社区贡献5条内容
所有评论(0)