vue 手写点击 div盒子 外面空白区域控制隐藏_点击浮动盒子以外的区域浮动盒子隐藏-程序员宅基地

技术标签: ui  vue.js  vue el-ment 功能点记载  javascript  

需求:需要写一个类似于elment-ui中 el-dialog的弹出框,点击弹出框外部任意一个位置,都能关闭弹出框的效果。

右下角的 圆形按钮,控制左边的全部功能盒子的显示隐藏,要求:点击全部功能盒子以外的任意地方,都能实现隐藏该盒子。

 结构部分:

 代码部分:

监听事件:

  watch: {
    showFlag(newVal, oldVal) {
      if (newVal) {
        // 若显示,则监听失去焦点事件。
        document.addEventListener("click", this.click_allFunction_side, true);
      } else {
        // 不显示,销毁监听事件。
        document.removeEventListener("click", this.click_allFunction_side, true);
      }
    }
  },

方法部分:

 methods: {
    imgClick() {
      this.showFlag = true;
    },
    close() {
      this.showFlag = false;
    },
    click_allFunction_side(e) {
      // console.log(this.$el.contains(e.target),118);
      if (!this.$el.contains(e.target)) {
        this.showFlag = false;
      }
    }
  }

处理思路部分借鉴下面网址的中的内容,另有其他的处理方法,也可查看:

https://www.jb51.net/article/175671.htmicon-default.png?t=LA46https://www.jb51.net/article/175671.htm

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_60602436/article/details/121167027

智能推荐

HashMap的jdk1.8分析_hashmap jdk1.8-程序员宅基地

文章浏览阅读229次。HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型。随着JDK版本的更新,JDK1.8对HashMap底层的实现进行了优化,例如引入红黑树的数据结构和扩容的优化等。本文结合JDK1.7和JDK1.8的区别,深入探讨HashMap的结构实现和功能原理。_hashmap jdk1.8

html网页内容自动滚动实现跑马灯效果_html 走马灯效果-程序员宅基地

文章浏览阅读7.8k次,点赞4次,收藏37次。1、效果1超出div高度,文本自动滚动(像跑马灯一样从下往上滚动)一个div里面有文字1、如果文字没超出div高度:文字不用滚动2、如果文字太多超出了div高度,那些文字就自动滚动ps:滚动的效果就像我这个设置一样<!DOCTYPE html><html> <head> <meta charset="utf-8" />..._html 走马灯效果

节能信标组-程序员宅基地

文章浏览阅读3.7k次,点赞4次,收藏7次。卓大大,我有个想法:可不可以16届做“节能信标”,每个信标灯范围内是充电区域,信标灯亮起、车辆到达信标灯充电范围后预设一定的充电时间,再跑向下一个灯。还可以同时亮起多个灯,考察路径规划(节能)能力。(突发奇想)..._节能信标

Mybatis中Oracle批量插入_mybatis insert all select 1-程序员宅基地

文章浏览阅读956次。Oracle批量插入(Mybatis中)_mybatis insert all select 1

HTML5中多页面实现背景音乐的连续播放_html5 多个页面连续播放同一音乐-程序员宅基地

文章浏览阅读3.2w次,点赞14次,收藏79次。前几天老师布置了一个课程作业,用所学HTML5相关知识写几个页面出来,于是就开始了制作:做到最后效果如图:这是其中一个页面的图片,头部六个都是跳转到其他相关页面的标题,此时我在主页中添加了背景播放音乐:<!--添加音频播放,设置为自动播放,并隐藏播放控件的显示--> <audio controls="controls" autoplay="..._html5 多个页面连续播放同一音乐

vue中qrcode的使用方法_vue中使用qrcode-程序员宅基地

文章浏览阅读1.1w次,点赞5次,收藏24次。1.先下载npm install qrcode --save-dev 2.引入import QRCode from "qrcode"; //引入生成二维码插件3.生成二维码<template> <canvas id="QRCode_header"></canvas></template> <script> i..._vue中使用qrcode

随便推点

Mysql 省市区字典(带层级,带经纬度,带拼音)_城市带经纬度mysql-程序员宅基地

文章浏览阅读8k次。效果展示:资源下载:https://download.csdn.net/download/qq_24909089/10725978因为编辑器加载的样式较多,难以复制,所以使用无样式文本,如想看可看标准字典:点击打开链接字典: 文本字典 # ************************************************************ # S..._城市带经纬度mysql

Typecho 导航子分类-程序员宅基地

文章浏览阅读1k次。方法一此方法直接调用Typecho的函数即可。<?php $this->widget('Widget_Metas_Category_List')->listCategories('wrapClass=widget-list'); ?><style type="text/css">.category-parent .category-child {displ..._typecho 获取子分类

idea环境下启动tomcat项目,报错java.lang.OutOfMemoryError: PermGen space_intellij idea 中启动 tomcat 时遇到错误,并报告了 outofmemoryerr-程序员宅基地

文章浏览阅读1.1k次。-Xms分配堆最小内存,默认为物理内存的1/64;-Xmx分配最大内存,默认为物理内存的1/_intellij idea 中启动 tomcat 时遇到错误,并报告了 outofmemoryerror

Spring事务源码阅读(注解式和xml配置式)_beanfactorytransactionattributesourceadvisor 一定要xm-程序员宅基地

文章浏览阅读448次,点赞2次,收藏3次。本文参考:《Spring源码深度解析》及源码走读.培养源码阅读思想文章目录必须懂的几个类提取器驱动(装载)的advisor:BeanFactoryTransactionAttributeSourceAdvisor@Transation注解元数据提取器:TransactionAttributeSource真实注解处理器:TransactionAnnotationParser事务执行器\拦截器:Tr..._beanfactorytransactionattributesourceadvisor 一定要xml配置吗

element-ui progress 改变背景色-程序员宅基地

文章浏览阅读1.6k次。//改变背景色 style不能加scope.el-progress-circle__track { stroke: #262795;}

快速幂取模(c++实现)_c++快速取模-程序员宅基地

文章浏览阅读1.7k次。快速幂取模就是快速的求一个幂式的模(余)。下面给出c++语言实现ab mod c = (a mod c)c mod c;/*以求13^13%10为例*/#include&lt;iostream&gt;using namespace std;long long pow_mod(long long a,long long i,long long n){if(i==0) return 1%n;..._c++快速取模

推荐文章

热门文章

相关标签