@miyauci/vue-click-outside
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.4 • Public • Published
    logo image

    npm version bundle size npm download npm type definitions Commitizen friendly Gitmoji semantic-release code style: prettier License: MIT

    @miyauci/vue-click-outside

    vue directive for outside click

    🚚 Install

    npm i -s @miyauci/vue-click-outside
    or
    yarn add @miyauci/vue-click-outside

    💡 Usage

    This provides 3 way Usage.

    Global directive

    It can be used with all components.

    import { createApp } from 'vue'
    import App from './App.vue'
    import { plugin } from '@miyauci/vue-click-outside'
    
    const app = createApp(App)
    
    app.use(plugin()) // 'v-click-outside' directive usable by default.
    // Or you can customize directive name => 'v-click-out'
    app.use(
      plugin({
        name: 'ClickOut' // PascalCase
      })
    )
    app.mount('#app')

    template

    <template>
      <div v-click-outside="onClickOut">...</div>
    </template>

    Options API

    <script lang="ts">
    export default {
      methods: {
        onClickOut(event) {
          console.log(event)
        }
      }
    }
    </script>

    Composition API

    <script setup lang="ts">
    const onClickOut = (event) => console.log(evnet)
    </script>

    Directive

    <script lang="ts">
    import { defineComponent } from 'vue'
    import { directive } from '@miyauci/vue-click-outside'
    
    export default defineComponent({
      directives: {
        ClickOutside: directive
      },
      setup() {
        return {
          onClickOut: (e) => console.log(e)
        }
      }
    })
    </script>

    Mixin

    <script lang="ts">
    import { defineComponent } from 'vue'
    import { mixin } from '@miyauci/vue-click-outside'
    export default defineComponent({
      mixins: [mixin]
    
      setup() {
        return {
          onClickOut: (e) => console.log(e)
        }
      }
    }
    </script>

    💞 Related

    Install

    npm i @miyauci/vue-click-outside

    DownloadsWeekly Downloads

    15

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    15.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • miyauci