Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...

 1 <script>
 2 export default {
 3   props: ["lists"],
 4   data() {
 5     return {
 6       isactive: false,
 7       actveName: "",
 8       selContent: "请选择"
 9     };
10   },
11   mounted() {
12     console.log("我被创建了");
13     this.$nextTick(function() {
14       document.addEventListener("click",this.outClick);
15     });
16   },
17   beforeDestroy(){
18       console.log("我被销毁了");
19       document.removeEventListener("click",this.outClick);
20   },
21   methods: {
22     isShowSel() {
23       this.isactive = !this.isactive;
24     },
25     light(name) {
26       this.actveName = name;
27       this.selContent = this.actveName;
28       this.$emit("selectVal", this.actveName);
29     },
30     outClick(e) {
31         if (this.$refs.mySelBox&&!this.$refs.mySelBox.contains(e.target)) {
32           this.isactive = false;
33         }
34     }
35   }
36 };
37 </script>

View Code

Vue封装下拉框组件时，为实现点击下拉框之外的部分收起下拉框，因此为document绑定原生事件addEventlistener("click“，fun);

问题发现：

　　在切换页面之后（当前下拉组件会被自动销毁）,但绑定的事件还未被摧毁。

vue文档说明：

document的监听事件确切来说是独立于vue项目之外的，如果你不销毁会一直存在。

参考：

https://segmentfault.com/q/1010000016613680

ttps://segmentfault.com/q/1010000016141322/a-1020000016609969

转载于:https://www.cnblogs.com/yandeli/p/10840106.html

Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...相关推荐

element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
wl-vue-select,wl-tree-select 简介用于vue框架的树形下拉框及带全选的普通下拉框. Tree drop-down box for vue framework and or ...
可自定义的vue下拉框组件
创建Select.vue组件 //创建Select.vue组件<template><div class="selects"><!-- 选择框 --&g ...
uniapp下拉框组件
之前写过一个小程序的,引入单个下拉框是没有问题的,但是一个页面引入多个下拉框组件的话就会有bug,比如可以同时展开多个下拉框的问题,在此修复了.如果大家有什么好的办法可以告诉我一下嘛~ 小程序选择框_ ...
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
文章目录后台数据,通过el-select组件el-option如何使用v-for动态渲染问题一.效果截图: 二.代码示例 · 参考: 三.相关阅读: 后台数据,通过el-select组件el-op ...
用 :focus-within 实现纯 CSS 下拉框组件
:focus-within 伪类:当本节点或其子节点获得焦点时被激活. 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 当点击表单中的文本框时需高亮整个表单元素.但 ...
【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...
vue封装上拉菜单组件_Vue的灵活的lil上下文菜单组件
vue封装上拉菜单组件 vue-lil上下文菜单 (vue-lil-context-menu) A flexible context menu component for Vue. Pass it a ...

Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...

Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...相关推荐

最新文章

热门文章