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 相关文章推荐
javascript中直接写php代码的方法
Jul 31 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
JS实现简易留言板特效
Dec 23 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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
星际争霸秘籍
2020/03/04 星际争霸
php 魔术方法使用说明
2009/10/20 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php银联网页支付实现方法
2015/03/04 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中方法链的使用方法
2016/02/23 Python
python实现获取Ip归属地等信息
2016/08/27 Python
python实现电脑自动关机
2018/06/20 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
解决Django no such table: django_session的问题
2020/04/07 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
应届生法律求职信
2013/10/22 职场文书
数控技术专业推荐信
2013/11/01 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
一年级班主任感言
2014/03/08 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
教师党员自我评价2015
2015/03/04 职场文书
致青春观后感
2015/06/09 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Redis IP地址的绑定的实现
2021/05/08 Redis