小例--vue下拉框

需求：1.点击按钮出现下拉框2.点击页面除下拉框意外的空白地方，下拉框消失需要：1.注意不能重复绑定点击事件2.getEventListeners(node)，只能在谷歌控制台用//查看使用addEventListener绑定的监听器功能1.操作原生dom，用自定义指令2.未雨绸缪，应做好回收处理，以防元素被移除而导致多次绑定监听事件不回收会反复绑定，如下图3.点击select选项时，下拉框不消失

大小都是愁

4861人浏览 · 2018-04-04 19:13:07

大小都是愁 · 2018-04-04 19:13:07 发布

  需求： 

  1.点击按钮出现下拉框 

  2.点击页面除下拉框意外的空白地方，下拉框消失 

  需要： 

  1.注意不能重复绑定点击事件 

  2.getEventListeners(node)，只能在谷歌控制台用//查看使用addEventListener绑定的监听器 

  功能 

  1.操作原生dom，用自定义指令 

  2.未雨绸缪，应做好回收处理，以防元素被移除而导致多次绑定监听事件 

不回收会反复绑定，如下图

  3.点击select选项时，下拉框不消失，通过判断被点击的实践源在不在el的范围内 

  .contains()//es5，返回布尔值，来表示传入的节点是否为该节点的后代节点 
  

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^