Vue 实现点击空白处隐藏某节点
时间:2021-07-15
本文章向大家介绍Vue 实现点击空白处隐藏某节点,主要包括Vue 实现点击空白处隐藏某节点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
手动监听判断
<template> <div> <span ref="projectButton"> <el-popover v-model="visible" trigger="manual" placement="bottom" @show="show" @hide="hide"> <p>啦啦啦</p> <el-button slot="reference" type="primary" @click="visible = !visible">show</el-button> </el-popover> </span> </div> </template> <script> export default { data() { return { visible: false, } }, methods: { show() { document.addEventListener('click', this.hidePanel, false) }, hide() { document.removeEventListener('click', this.hidePanel, false) }, hidePanel(e) { if (!this.$refs.projectButton.contains(e.target)) { this.visible = false this.hide() } }, }, } </script>
自定义指令
<template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <script> const clickoutside = { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回 if (el.contains(e.target)) { return false } // 判断指令中是否绑定了函数 if (binding.expression) { // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法 binding.value(e) } } // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听 el.__vueClickOutside__ = documentHandler document.addEventListener('click', documentHandler) }, update() {}, unbind(el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__) delete el.__vueClickOutside__ }, } export default { name: 'HelloWorld', data() { return { show: true, } }, directives: { clickoutside }, methods: { handleClose(e) { this.show = false }, }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .show { width: 100px; height: 100px; background-color: red; } </style>
vue 指令
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
遮罩
<template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false" class="btn">点击出现弹框</button> </div> <button @click="showModal=true" class="btn">点击出现弹框</button> </div> </template> <script> export default { data() { return { showModal: false, } }, } </script> <style scoped> .mask { background-color: #000; opacity: 0.3; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .pop { background-color: #fff; position: fixed; top: 100px; left: 300px; width: calc(100% - 600px); height: calc(100% - 200px); z-index: 2; } .btn { background-color: #fff; border-radius: 4px; border: 1px solid blue; padding: 4px 12px; } </style>
转自:https://www.jianshu.com/p/ec87b4473758
原文地址:https://www.cnblogs.com/listen9436/p/15016289.html
- 十分钟学perl够用(客服MM都懂了)
- Java多线程并发编程一览笔录
- Tomcat6/7应用服务器-禁用RC4等弱密码套件
- mybaits3整合spring总结
- 如何使用Airgeddon找回WiFi密码
- 设计缺陷将导致亚马逊Echo变身成为监听设备
- Unity引擎与C#脚本简介
- Redis分布式缓存系统Lua脚本食用指引
- 基于复杂方案OWSAP CsrfGuard的CSRF安全解决方案(适配nginx + DWR)
- XMLHttpRequest对象如何兼容各浏览器使用?
- Java使用wsdl生成axis版本webservice服务端/客户端代码
- Java微信支付快速入门&工具类
- redis集群 - linux安装与配置笔记
- Apache RocketMQ 4.0.0 - linux安装与配置笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 leet(两数之和 II - 输入有序数组)难度:简单-Day20200720
- 一天一大 leet(分割数组的最大值)难度:困难-Day20200725
- 一天一大 leet(矩阵中的最长递增路径)难度:困难-Day20200726
- 一天一大 lee(克隆图)难度:中等-Day20200812
- 一天一大 lee(有效的括号)难度:简单-Day20200814
- 一天一大 leet(判断子序列)难度:简单-Day20200727
- 一天一大 leet(寻宝)难度:困难-Day20200729
- LeetCode刷题记录(easy难度21-40题)
- 一天一大 lee(移除盒子)难度:困难-Day20200815
- LeetCode刷题记录(easy难度1-20题)
- 改变 Python 中线程执行顺序的方法
- 一天一大 leet(整数拆分)难度:中等-Day20200730
- iOS客户端启动速度优化实践
- 一天一大 leet(魔术索引)难度:简单-Day20200731
- 一天一大 lee(回文对)难度:困难-Day20200806