README
@miyauci/vue-click-outside
vue directive for outside click
:truck: Install
npm i -s @miyauci/vue-click-outside
or
yarn add @miyauci/vue-click-outside
:bulb: 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>