请问如何实现vue点击其他地方隐藏div
网友回复
1、原生方法
js的contains方法用来查看dom元素的包含关系
<div id="box" style="width:110px;height:110px;background-color:red"></div> <script type="text/javascript"> document.addEventListener('click', (e)=> { var box = document.getElementById('box'); if (box.contains(e.target)) { alert('点在内'); } else { alert('点在外'); } }) </script>
2、 vue 写法
ref是vue获取DOM元素的方法,在标签上绑定ref属性,js在组件内部用this.$refs.ref的值,调用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=vue.2.2.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { var app = new Vue({ el: '#app', data: { isshow: true }, created() { document.addEventListener('click', (e)=> { //console.log(this.$refs.box); if (!this.$refs.box.contains(e.target)) { this.isshow = false; } }) } }); }); </script> <style> </style> </head> <body> <div id="app"> <div id="box" ref="box" v-sh...
点击查看剩余70%
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?