Neatly Punctuated Musings

    vue-click-outside

    1.1.0 • Public • Published

    ClickOutside

    Vue click outside directive.

    Installation

    $ npm install vue-click-outside
    

    Example

    <template>
      <div>
        <div v-click-outside="hide" @click="toggle">Toggle</div>
        <div v-show="opened">Popup item</div>
      </div>
    </template>
     
    <script>
    import ClickOutside from 'vue-click-outside'
     
    export default {
      data () {
        return {
          opened: false
        }
      },
     
      methods: {
        toggle () {
          this.opened = true
        },
     
        hide () {
          this.opened = false
        }
      },
     
      mounted () {
        // prevent click outside event with popupItem.
        this.popupItem = this.$el
      },
     
      // do not forget this section
      directives: {
        ClickOutside
      }
    }
    </script>

    Badges


    fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

    Keywords

    none

    Install

    npm i vue-click-outside

    DownloadsWeekly Downloads

    68,841

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    4.43 kB

    Total Files

    4

    Last publish

    Collaborators

    • fundon
    • luventa