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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
php学习 字符串课件
2008/06/15 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python实现进程同步和通信的方法
2018/01/02 Python
python如何使用unittest测试接口
2018/04/04 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
几个SQL的面试题
2014/03/08 面试题
幼儿园教师工作制度
2014/01/22 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
nginx日志格式分析和修改
2022/04/28 Servers