vue项目实现点击目标区域之外可关闭(隐藏)目标区域

目录
  • 点击目标区域之外可关闭目标区域
    • 解决思路
      • 方法一
      • 方法二
  • vue点击组件外部隐藏组件自身
    • 示图:点击外层元素隐藏自定义车牌选择框
    • 代码如图中所写
    • 核心

点击目标区域之外可关闭目标区域

解决思路

方法一

1、vue模块中的内容  -- class为myPanel的div是我们要处理的那个小组件。

<template>
    <div class="hello">
        <div class="myPanel" v-if="panelShow"></div>
    </div>
</template>

2、定义点击事件 -- 直接在生命周期钩子函数mounted(dom挂载完成之后)中添加点击事件，通过判断目标元素的class名称可实现对应的效果

mounted(){
    document.addEventListener('click', (e)=> {
        if (e.target.className != 'myPanel') {
            this.panelShow= false;
        }
    })
}

方法二

1、vue模块中的内容  -- class为myPanel的div是我们要处理的那个小组件。其中，stop修饰符是用来阻止函数的传递，简单理解就是执行自身绑定的事件，不影响其他位置绑定的事件。此处clickPanel函数中可不做任何处理，单纯用来阻止点击事件传递到绑定在body上的click事件去。

<template>
    <div class="hello">
        <div @click.stop="clickPanel" class="myPanel" v-if="panelShow"></div>
    </div>
</template>

2、通过watch监听panelShow的值，对应在body绑定点击事件/取消绑定的点击事件

watch: {
  panelShow(val) {
    if(val) {
      document.body.addEventListener('click', () => {
          this.panelShow = false;
      })
    } else {
      document.body.removeEventListener('click', () => {});
    }
  }
}

注：也可以通过给body绑定一个点击事件，然后去判断点击的元素是否是需要隐藏掉的元素。

vue点击组件外部隐藏组件自身

在开发组件的时候，点击组件外部隐藏组件自身的这种情况很长见到，例如：时间选择框组件，下拉选件等。

示图:点击外层元素隐藏自定义车牌选择框

代码如图中所写

核心

1、最外层div中添加一个@click.stop（取消事件冒泡），可以不添加事件名。

2、在mounted给body添加一个点击事件，事件触发组件的隐藏。

    document.body.addEventListener('click', () => {
        this.show = false;
    }, false);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中实现点击空白区域关闭弹窗的两种方法

    1. 第一种做法 首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现 <div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是弹窗里面的内容部分 </div> </div>

  • Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

    平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo <!-- 按钮 --> <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button> <!-- 下拉列表 --> <div v-if="ShowHidden" @click.stop="&quo

  • 详解vue中点击空白处隐藏div的实现（用指令实现）

    详解vue中点击空白处隐藏div的实现（用指令实现）

    简单想应该怎么实现? 1.肯定是给document增加一个click事件监听 2.当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现. 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNod

  • Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    1. 绑定元素 2. mounted生命周期 3. 实现思路 页面挂载完后,监听全局点击事件 获取当前点击的元素,根据需求获取当前元素本身的属性 判断当前点击元素与要隐藏的元素是否相同 当前点击元素与要隐藏的元素不相同则隐藏 4. 最终效果 接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗 方法: 步骤1:给页面最外出的元素div加点击事件:@click="popShow = false". 步骤2:给点击目标元素加点击事件:@click="popShow = true

  • vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    目录 点击目标区域之外可关闭目标区域 解决思路 方法一 方法二 vue点击组件外部隐藏组件自身 示图:点击外层元素隐藏自定义车牌选择框 代码如图中所写 核心 点击目标区域之外可关闭目标区域 解决思路 方法一 1.vue模块中的内容  -- class为myPanel的div是我们要处理的那个小组件. <template>     <div class="hello">         <div class="myPanel" v-if=

  • vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

    vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在; 实现如下 maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它 <div class="mask" v-show="maskSho

  • vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

    为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点,触发不了点击事件 实现过程 安装vue-particles npm install vue-particles --save-dev 全局配置vue-particles 在main.js里面: import VueParticles from 'vue-particles' Vue.use(VueP

  • vue 项目引入echarts 添加点击事件操作

    main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale

  • vue项目实现对某个区域绘制水印

    vue项目实现对某个区域绘制水印

    本文实例为大家分享了vue实现对某个区域绘制水印,供大家参考,具体内容如下 首先看一下效果: 其实原理很简单,就是使用canvas画成图,然后设置div的背景即可,这里参考了其他人思路又按照我自己的需求,封装了一个插件,可以直接在项目中使用,这里可以对某一个单独的区域设置水印: 'use strict' const watermark = {} /** * * @param {要设置的水印的内容} str * @param {需要设置水印的容器} container */ const setWa

  • vue项目如何实现Echarts在label中获取点击事件

    目录 vue Echarts在label中获取点击事件 vue echarts图表点击事件 柱状图 vue Echarts在label中获取点击事件 需要针对Echarts图像对label添加点击事件,一开始设置如下代码: <template> <div id="bar-echart" ref="barEchartDom" /> </template> <script> import * as echarts from

  • Vue项目中使用better-scroll实现菜单映射功能方法

    Vue项目中使用better-scroll实现菜单映射功能方法

    组件全部代码 <template> <div class="goods"> <!--左侧区域--> <div class="menu-wrapper" ref="left"> <ul class="menu"> <li class="menu-item border-bottom" :class="{'current':curren

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

  • 浅谈 Vue 项目优化的方法

    好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&

随机推荐