在vue项目中这个效果应用非常广泛,今天带大家了解一下其中的原理和实现方法.
1.使用ref绑定到要隐藏的元素身上,使用document.addEventListener给全局添加监听事件.
2.使用contains方法判断绑定的元素是否存在于页面的DOM中(包含关系),只会返回布尔值,咱们默认返回false.
3.button按钮记得阻止冒泡,否则点击事件将失效.
下面咱们来看一下完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div>
<span v-show="flag" ref="shows">过重重关卡看盛世的烟花,赢尽了天下输了她。</span>
<button @click.stop="btn">按钮</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#box',
data() {
return {
flag: false
}
},
methods: {
text() {
document.addEventListener("click", e => {
if (this.$refs.shows) {
let self = this.$refs.shows.contains(e.target);
if (!self) {
this.flag = false;
}
}
})
},
btn() {
this.flag = !this.flag
}
},
created() {
this.text()
}
})
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
