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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
js工具方法弹出蒙版
May 08 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
JavaScript实现拖拽效果
Mar 16 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 管理系统程序中的后门
2009/08/05 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
js 操作select相关方法函数
2009/12/06 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
解读ES6中class关键字
2017/11/20 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
django 自定义用户user模型的三种方法
2014/11/18 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python多图片合并PDF的方法
2019/01/03 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python中如何使用insert函数
2020/01/09 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
最新党员思想汇报
2014/01/01 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
Python实现8种常用抽样方法
2021/06/27 Python