Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/klich3/vue3-directives
Compilation of directives that are quite helpful when programming projects, instead of searching by projects, they are gathered here.
https://github.com/klich3/vue3-directives
direcitve vue3 vue3-directives
Last synced: about 1 month ago
JSON representation
Compilation of directives that are quite helpful when programming projects, instead of searching by projects, they are gathered here.
- Host: GitHub
- URL: https://github.com/klich3/vue3-directives
- Owner: klich3
- License: mit
- Created: 2024-08-08T09:42:57.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-14T13:39:05.000Z (5 months ago)
- Last Synced: 2024-08-14T15:07:27.314Z (5 months ago)
- Topics: direcitve, vue3, vue3-directives
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# VUE3 - Directives Library
Compilation of directives that are quite helpful when programming projects, instead of searching by projects, they are gathered here.
## clickOutsideClass
Desc: Directive to detect click outside an element determined by class
Sample:
```javascript
main.js
import { setupClickOutsideClass } from "@/directives/clickOutside";
setupClickOutsideClass(app);
or
import clickOutside from "@/directives/clickOutside";
app.directive("click-outside-class", clickOutside);
```
```html
template
```
## clickoutsideDirective
Desc: Detect click outside of element
Sample:
```javascript
main.js:
- auto
import { setupClickOutside } from "@/directives/clickOutside";
setupClickOutside(app);
- manual
import clickoutsideDirective from "@/directives/clickoutsideDirective";
directives: {
clickOutside: clickoutsideDirective,
},
- or
app.directive("click-outside", clickoutsideDirective);
```
```html
html dom:
```
## contentFromSource
Desc: This directive clones some DOM content to another element. It is useful for cloning a desktop menu to a mobile version or repeating content on a page.
Docs: documentation
Sample:
```javascript
main.js:
import { setupFromSource } from "contentFromSource.js"
setupFromSource(app);
- or manual
import contentFromSource from "@/plugins/directives/contentFromSource.js";
Vue.directive("from-source", contentFromSource);
```
```html
template:
dom: a DOM element like div, span, p, or a query selector like class -> .class or #id
If "to" is specified, the clone will be placed inside that DOM element.
```
## onChangeDirective
Desc: This directive triggers a callback function when a class is added to the element
Sample:
```javascript
main.js:
import { setupOnChange } from "onChangeDirective.js"
setupOnChange(app);
- or manual
import onChangeDirective from "@/plugins/directives/onChangeDirective.js";
Vue.directive("onchange", onChangeDirective);
```
```html
template:
class: when this class appears, it triggers the callback function
data: if needed, data can be passed to the callback function
function_callback -> attributes
el -> DOM element
data -> parsed data
```
## observeVisibility
Desc: directive observe-visibility for Vue 3
Docs:
* https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Sample:
```javascript
import { setupObserveVisibility } from "@/directives/observe-visibility";
setupObserveVisibility(app);
```
```html
tmeplate:
```
```javascript
const changeClassOnVisible = (e, dom) => {
console.log(e, e.domVisible, dom);
if (e.domVisible) {
e.target.classList.add("visible");
e.target.style.border = "2px solid green";
e.target.style.visibility = "visible";
} else {
dom.classList.remove("visible");
dom.style.border = "none";
dom.style.visibility = "hidden";
}
};
```
## observeResize
Desc: Observe resize directive
Sample:
```javascript
import { setupObserveResize } from "@/directives/observe
setupObserveResize(app);
```
```html
tmeplate:
```
---
## Star History
[](https://star-history.com/#klich3/vue3-directives&Date)