Nested Parenthetical Madness

    vue2-click-outside

    1.0.2 • Public • Published

    vue2-click-outside

    Vue directive to react on clicks outside an element without stopping the event propagation.

    Install

    $ npm install --save vue2-click-outside
    $ yarn add vue2-click-outside

    Use

    import Vue from 'vue'
    import Vue2ClickOutside from 'vue2-click-outside'
     
    Vue.use(Vue2ClickOutside)
    <script>
      export default {
        data () {
          clickOutsideConfig: {
            handler: this.handler,
            middleware: this.middleware,
            events: ['dblclick', 'click'],
            active: true
          }
        },
        methods: {
          onClickOutside (event, el) {
            console.log('Clicked outside. Event: ', event)
          },
     
          handler (event, el) {
            console.log('Clicked outside (Using config), middleware returned true :)')
          },
          middleware (event, el) {
            return event.target.className !== 'modal'
          }
        }
      };
    </script>
     
    <template>
      <div v-click-outside="onClickOutside"></div>
      <div v-click-outside="clickOutsideConfig"></div>
    </template>

    Or use it as a directive

    import Vue2ClickOutside from 'vue2-click-outside'
     
    <script>
      export default {
        directives: {
          clickOutside: Vue2ClickOutside.directive
        },
        methods: {
          onClickOutside (event) {
            console.log('Clicked outside. Event: ', event)
          }
        }
      };
    </script>
     
    <template>
      <div v-click-outside="onClickOutside"></div>
    </template>

    License

    MIT

    Keywords

    none

    Install

    npm i vue2-click-outside

    DownloadsWeekly Downloads

    137

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    220 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar