On this page
Directives
Some common Vue directives that are useful in building frontend apps.
onOutsideClick
This directive can be used to listen for click events outside of the target element. In the following example, the div with border has the directive, so clicks outside the div will trigger the setInactive function.
vue
<template>
<div class="rounded-lg border p-8" v-on-outside-click="setInactive">
<Button>{{ active ? 'Click outside' : 'Click me' }}}</Button>
</div>
</template>
<script>
import { onOutsideClickDirective } from 'frappe-ui'
export default {
directives: {
onOutsideClick: onOutsideClickDirective,
},
data() {
return { active: false }
},
methods: {
setInactive() {
this.active = false
},
},
}
</script>
visibility
This directive allows you to trigger a function whenever an element becomes visible in the viewport. In the following example, whenever the visibility of the gray box is changed, the values visible and intersectionRatio are updated. This feature internally uses the IntersectionObserver API, and the second parameter to the function is the entry object.
visible: false
intersectionRatio: 0
target element
vue
<template>
<pre>visible: {{ visible }}</pre>
<pre>intersectionRatio: {{ intersectionRatio }}</pre>
<div
class="mt-20 h-20 w-full rounded-lg bg-gray-100 p-8"
v-visibility="onVisibilityChange"
>
<pre>target element</pre>
</div>
</template>
<script>
import { visibilityDirective } from 'frappe-ui'
export default {
directives: {
visibility: visibilityDirective,
},
data() {
return {
visible: false,
intersectionRatio: 0,
}
},
methods: {
onVisibilityChange(visible, entry) {
this.visible = visible
this.intersectionRatio = entry.intersectionRatio
},
},
}
</script>