Wondering what’s next for npm?Check out our public roadmap! »

    vue-clickout-handler

    1.0.6 • Public • Published

    Description

    This is a simple directive to react when a click happens outside of a certain element.

    Installation

    npm install vue-clickout-hanlder --save
    
    yarn add vue-clickout-hanlder
    

    Basic Usage

    // main.js
     
    import { VueClickOut } from 'vue-clickout-handler';
     
    Vue.directive('click-out', VueClickOut)

    You can pass just a callback and it will be used as handler

    <template>
      <div v-click-out="onClickOut">
        ...
      </div>
    </template>
     
    <script>
      export default {
        methods: {
          onClickOut () {
            // do something
          }
        }
      }
    </script>

    Or you can pass an object to include more options:

    <template>
      <div id="my-div">
      </div>
      <div v-click-out="{ handler: onClickOut, excluded: ['#my-div'], disabled: disabled}">
        ...
      </div>
    </template>
     
    <script>
      export default {
        data () {
          return {
            disabled: false
          }
        },
        methods: {
          onClickOut () {
            // do something
          }
        }
      }
    </script>

    Options

    Option Type Required Description
    handler Function true The function invoked on click-outside event.
    excluded Array false A list of excluded elements, the handler will not be executed if any of these elements are clicked.
    disabled boolean false If true the handler will never be executed.

    Install

    npm i vue-clickout-handler

    DownloadsWeekly Downloads

    0

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    7.39 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar