vue中用指令优雅的实现 点击div外部空白处隐藏div

最新推荐文章于 2023-02-08 08:59:18 发布
最新推荐文章于 2023-02-08 08:59:18 发布
阅读量463 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42304808/article/details/118017418
版权
本文介绍了如何在Vue.js中利用指令优雅地实现点击div外部时隐藏div的功能。主要步骤包括给document添加click事件监听，并在事件触发时判断点击目标是否为当前div。
摘要由CSDN通过智能技术生成

思路

1、给document增加一个click事件监听
2、当发生click事件的时候判断是否点击的当前对象

vue2 指令
自定义指令的钩子函数
自定义指令的钩子函数参数
代码实现

<template>
    <div>
        <div class="show" v-show="show" v-clickoutside="handleClose">
            显示
        </div>
    </div>
</template>
最低0.47元/天 解锁文章
whylost迷心
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现自定义下拉菜单
几百块的博客
03-23 1482
<template> <div class="selectBox" style="padding:50px"> <input type="text" v-model="inputValue" @click.stop="showActive" /> <ul class="list" v-show="isShow"> <li :class="isActive == index ? 'blue' : ''" .
使用vue开发项目页面顶部出现空白区域
Giraffe0615的博客
01-01 2465
原因： HTML元素默认样式: 　　1.body　　margin:8px; 　　2.ul　　 padding:40px; 　　3.p　　　　margin:16px; 解决办法： 在当前页面css部分添加： <style lang="scss"> *{ margin:0; padding:0; border:0 } </style> ...
vue实现一个类似浏览器搜索功能(ctrl + f)
lyhqgh的博客
05-17 5318
vue实现一个类似浏览器搜索功能【ctrl + f】 一、介绍自己项目的需求二、先说说我的数据怎么设置的三、具体功能的实现思路和代码：1、点击左侧目录跳转到对应位置2、滚动到相应位置左侧目录树的对应标题变蓝色3、搜索功能4、目录展开和收起5、结语 一、介绍自己项目的需求 首先这个项目是一个静态的用户手册，左侧是目录树，右侧就是对应的内容区域。 因此接下来的需求就一目了然了： 点击左侧目录跳转到对应位置； 滚动右侧内容到达左侧目录的对应位置左侧目录相对应的会变成蓝色； 添加搜索功能 (1)监听输入框输入，
Vue基础（一）：指令概念（内容、属性、事件、双向绑定、条件、列表）
欢迎来到长风沛雨的博客
11-16 1281
学了vue的指令内容，六种指令的分类概念，筛选一些关于指令的内容记录一下。
【Vue2.0】黑马课程笔记（一）基本指令和过滤器
小女不才
04-06 1663
目录(一)什么是Vue.js（1）为什么要学习流行框架？（2）框架和库的区别（3）Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别（二）Vue指令（1）Vue.js 模板语法1.1 v- 一些常见指令1.2 循环语句：`v-for:`1.3 v-model:双向数据绑定1.4 事件修饰符：stop,prevent。1.5 绑定class类样式1.6 绑定style行内样式 ...
VUE
Cool的博客
03-16 735
VueCLI3--运行单个*.vue文件 1.安装全局扩展 npminstall-g@vue/cli-service-global 2.运行.vue文件 vueserve文件夹名 注意: 如果已经安装过可以直接运行vue serve 文件夹运行时, 会自动生成一个node_modules文件夹 Vue官方api JSON.parse(JSON.stringify(row)) JSON.parse('要转换的数据') JSO...
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 6236
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue笔记-1-环境搭建/入门学习
の博客
06-30 2187
Vue系列入门教程
H5 vue-pdf 使用方法 复制粘贴直接用
q4717529的博客
02-08 2771
【代码】H5 vue-pdf 使用方法 复制粘贴直接用。
详解vue中点击空白处隐藏div的实现（用指令实现）
08-27
Vue 中点击空白处隐藏 div 的实现（用指令实现） 在 Vue 中，想要实现点击空白处隐藏 div 的功能，需要使用自定义指令来实现。本文将详细介绍如何使用指令来实现这个功能。 首先，需要了解 Vue 中的指令是什么？...
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）
10-16
以上三种方法都能有效地实现点击空白区域隐藏Vue中的节点。选择哪种方式取决于具体项目的需求，如组件复用性、代码简洁性和性能等因素。在实际开发中，自定义指令和遮罩层方案可能更为常见，因为它们可以更方便地...
vue自定义指令-实现div和图片的拖拽，放大，缩小
最新发布
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
10-15
3. 监听`document`的`click`事件，处理点击空白区域的隐藏操作。 4. 为列表项绑定点击事件，处理点击后的特定逻辑，如显示提示或执行其他操作。 这个简单的示例展示了Vue如何通过声明式绑定和事件监听来处理复杂的...
vue-cli设置publicPath几种方式对比
热门推荐
whylost
06-11 1万+
publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = { publicPath: '/', } html中被打包的css和js路径如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-U
element-UI el-table树形数据 修改小三角图标
whylost
05-14 9367
el-table树形数据 默认样式 有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。 更改成自定义样式 因为是vue的 <style scoped>内写CSS 样式，所以需要添加 /deep/ 进行穿透 .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .
element-UI tree树形控件 修改小三角图标
whylost
05-13 7954
el-tree 默认样式 可以看到有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。 更改成自定义样式 因为是vue的 <style scoped>内写CSS 样式，所以需要添加 /deep/ 进行穿透 .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .e
Vue实现获取当前时间、日期并实时刷新
whylost
05-09 4145
Vue实现获取当前时间、日期并实时刷新 1. 获取当前时间的方法 getTime(){ var _this = this; let yy = new Date().getFullYear(); let mm = new Date().getMonth()+1; let dd = new Date().getDate(); let hh = new Date().getHours(); let mf = new D
VUE中element-UI 样式修改（vue的scoped影响样式修改）
whylost
05-12 4142
在vue中引入第三方组件库的时候，vue组件中样式的scoped就会阻碍我们修改第三方组件库的样式 在所有需要重新定义样式的element组件上添加自定义class(防止自定义样式影响全局) 1. 在样式外新增一个样式不添加 scoped 的<style>标签 <style> /* 这个样式起效果 */ .myClass .el-input__inner{ border-radius: 10px; } </style> <style scoped>
vue实现点击空白处,隐藏div
06-09
1. 在需要隐藏的 `div` 外面包一个父级元素，并且给这个父级元素添加一个点击事件。 ``` <div class="wrapper" @click="hideDiv"> <div class="content" v-show="showDiv">Hello World</div> </div> ``` 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值