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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
原生js实现选项卡功能
Mar 08 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
python3实现表白神器
2019/04/09 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python中time.ctime()实例用法
2021/02/03 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
财务会计大学生自我评价
2014/04/09 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
九九重阳节标语
2014/10/07 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015教师年度考核评语
2015/03/25 职场文书
老兵退伍感言
2015/08/03 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书