vue自定义指令--clickoutside

需求

    某天，产品觉得老是点击x关闭窗口，觉得体验不爽。于是给了一个需求，需要点击A窗口之外时，自动进行关闭A窗口。还要求点击某些B窗口时，不能关闭A。项目总这种东西用的频率也很频繁，就干脆摸着石头过河，改吧改吧改出来个自己的directives。

测试用组件

预期效果：点击A和C之外时，执行close函数

结果GIF如下

使用方法

//参数说明
1.ignoreParentClasses:String//需要进行跳过的css class,多个时按空格分开，默认""
2.onClick:Function          //触发事件，
3.listenerName:String       //监听事件的名称，默认click事件

//1.直接传函数，则默认监听click事件，无额外跳过的css class
v-clickoutside="close"

//2.传入对象
  v-clickoutside="{        ignoreParentClasses: 'ignore-A',        onClick: close
        listenerName:"mousedown"  }"

完整代码如下

思路

    这种基本就是围绕dom进行操作，了解了vue directive时的各种参数后，配合事件绑定就好处理了