https://github.com/redsuperbat/vue-custom-directives
https://github.com/redsuperbat/vue-custom-directives
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/redsuperbat/vue-custom-directives
- Owner: redsuperbat
- License: mit
- Created: 2020-12-14T17:22:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-14T20:11:49.000Z (over 5 years ago)
- Last Synced: 2025-01-18T10:32:03.349Z (over 1 year ago)
- Language: TypeScript
- Size: 29.3 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue 3 Directives
## Description
These are useful directives that you can include into your vue application.
| Directive | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| v-click-outside | Specify a callback that will be triggered when user clicks outside element bound by directive |
| v-expand | Animate bound element when it enters the DOM. Only applicable if the element is also bound by v-if, v-show or v-else |
| v-hover | Specify a callback that triggers when the user hovers over the element. True is passed to the callback when the user enters the element and false is passed when the user exits the element |
| v-scoll | Specify a callback that triggers when the element is visible on the page. The callback recives the element as it's argument when invoked |
## Installation
`npm i --save vue3-directives`
To only use certain directives and reduce bundle size, register your directives show below.
```javascript
import { createApp } from "vue";
import App from "./App.vue";
import { vHover } from "vue3-directives";
createApp(App).directive(vHover).mount("#app");
```
After registering `v-hover` is available throughout your entire vue application
There is a quicker way to register all directives if you are going to use them:
```javascript
import { createApp } from "vue";
import App from "./App.vue";
import VueCustomDirectives from "vue3-directives";
createApp(App).use(VueCustomDirectives).mount("#app");
```
This will make all directives accessible throughout your application
## Usage
### v-click-outside
```html
Vue 3 Directives is awesome!
export default {
setup() {
// Will only fire when the user clicks outside the p element
const clickedOutside = () => {
console.log("Im clicking outside the p element");
};
return {
clickedOutside,
};
},
};
```
### v-hover
```html
Vue 3 Directives is awesome!
export default {
setup() {
// Function will fire when user enters and leaves the element p
const onHover = (bool) => {
console.log(bool); // Logs "true" when entering and "false" when leaving
};
return {
onHover,
};
},
};
```
### v-expand
The p element will animate when the button is clicked to show the text.
v-expand can take two different arguments `v-expand:x` and `v-expand:y` depending on if you want the element to animate in from the x-axis or the y-axis
```html
Vue 3 Directives is awesome!
click me!
import { ref } from "vue";
export default {
setup() {
const show = ref(false);
const toggleText = () => {
show.value = !show.value;
};
return {
show,
toggleText,
};
},
};
```
### v-scroll
```html
Vue 3 Directives is awesome!
export default {
setup() {
// Function will fire when the p element is visible to the user
// By adding a class that contains an animation you can animate the
// Element when it is visible to the user
const onEnter = (el) => {
el.classList.add("fade-animation");
};
return {
onEnter,
};
},
};
.fade-animation {
animation: fade 1s ease;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```