v-click-out

    0.1.2 • Public • Published

    catch-click-outside

    简介

    本项目为基于 vue 的自定义指令,主要作用是点击除绑定该指令以外的 DOM 元素时,触发绑定在该指令上的事件。

    为什么要重复造轮子

    能够解决这个问题的指令很多,有基于各种前端流行框架的实现。自己造是因为我在使用 v-click-outside 指令时遇到的一个 BUG,绑定该指令的元素的子元素触发了点击事件,且同时这个子元素被从 DOM 树中删除,指令注册的事件被触发了,显然这是不符合我们的预期的。该项目将 document 上对点击事件的监听注册在了事件的捕获阶段,而不是默认的冒泡阶段,有效的解决了被排除元素内子元素触发点击事件后被删除,错误触发指令注册函数的问题。

    使用

    安装

    npm i v-click-out
    

    引入

    import Vue from 'vue'
    import clickOutside from 'v-click-out'
     
    Vue.use(clickOutside)
     
    ...
    <template>
        <p v-click-outside="showSpan">
          被绑定的元素<br>
          点击从 dom 中删除的元素
          <button v-if="isShowSpan" @click="hideSpan">vue-cli documentation</button>.
        </p>
    </template>
    export default {
      name: 'HelloWorld',
      data() {
        return {
          isShowSpan: true
        }
      },
      methods: {
        showSpan() {
          this.isShowSpan = true;
          console.log('test')
        },
        hideSpan() {
          this.isShowSpan = false;
        }
      }
    }

    Install

    npm i v-click-out

    DownloadsWeekly Downloads

    2

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    8.94 kB

    Total Files

    13

    Last publish

    Collaborators

    • sujinqu