vue 点击其他区域关闭自定义div操作


Posted in Javascript onJuly 17, 2020

vue 点击其他区域关闭自定义div操作

方法一: 在外层div添加事件 @click="closeSel"

html

vue 点击其他区域关闭自定义div操作

method

closeSel(event){
   var currentCli = document.getElementById("sellineName");
   if(currentCli ){
    if(!currentCli.contains(event.target)){   //点击到了id为sellineName以外的区域,隐藏下拉框
    this.listLineUl = false;
    }
   }
  }

方法二、element.addEventListener(event, function, useCapture)

mounted中

document.addEventListener('click',e => { 
   if(!this.$el.contains(e.target)){
    this.listLineUl = false//点击其他区域关闭
   }else{
    this.listLineUl = true
   }
   })

注意此方法使用时 e和 $el 的范围;

补充知识:vue 点击div,实现对input的全选,取消全选

不全选,开发中

下面讲下全选和不全选,主要是通过操控checked属性,根据布尔值true和false、取反等操作来实现全选和全不选。

全不选效果:

vue 点击其他区域关闭自定义div操作

全选效果:

vue 点击其他区域关闭自定义div操作

全不选,复选框checkbox全部未选中,全选的div边框和字色为黑色。

全选,复选框checkbox全部被选中,全选的div边框和字色为红色。

上代码

HTML代码

//通过input的checked的属性,真为选中,假不选中,来控制input的选中与不选中
 
<input type="checkbox" :checked="isSelectAll"/>

 //点击时取反,来控制选中与不选中;注册一个变量,默认为false,即不选中。
 //取反即是:点击,在选中的时候不选中本身和input,在不选中的时候选中本身和input.
 //isSelectAll控制input,alltool控制本身
 
<div class="books-8" :class="alltool ? 'books-8-2' :''" @click="alltool=!alltool,isSelectAll=!isSelectAll" >选中全部工具</div>

js代码

data () {
  return {
   isSelectAll:false,
   alltoo:alltoo,
   'books-8-2':'books-8-2',
  }
 }

css代码

.books-8{
 width: 4rem;
 border: 0.05rem solid #2e2e2e;
 border-radius: 0.2rem;
}
.books-8-2{
 border-color:#f14338;
 color: #f14338;
}

完毕!

以上这篇vue 点击其他区域关闭自定义div操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
微信小程序背景音乐开发详解
Dec 12 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 #Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 #Javascript
基于js实现判断浏览器类型代码实例
Jul 17 #Javascript
Vue实现背景更换颜色操作
Jul 17 #Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 #Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 #Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 #Javascript
You might like
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
JS实现滑动导航效果
2020/01/14 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python优先队列实现方法示例
2017/09/21 Python
python中logging包的使用总结
2018/02/28 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
岗位职责的含义
2013/11/17 职场文书
医药销售自荐书
2014/05/29 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
房屋质量投诉书
2015/07/02 职场文书
通讯稿范文
2015/07/22 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python