Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slevin57/vue-directive-kit
A collection of vue directives.
https://github.com/slevin57/vue-directive-kit
directive vue vue-directive vue-directive-kit vue-directives vue-infinite-scroll vue-lazyload vue2 vuejs
Last synced: 3 days ago
JSON representation
A collection of vue directives.
- Host: GitHub
- URL: https://github.com/slevin57/vue-directive-kit
- Owner: slevin57
- Created: 2019-09-10T05:12:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T05:10:15.000Z (almost 2 years ago)
- Last Synced: 2024-09-21T10:06:17.012Z (7 days ago)
- Topics: directive, vue, vue-directive, vue-directive-kit, vue-directives, vue-infinite-scroll, vue-lazyload, vue2, vuejs
- Language: JavaScript
- Size: 1.76 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# vue-directive-kit
![banner](examples/assets/logo.png)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)> A collection of vue directive.
各种Vue自定义指令合集。
## 目录
- [vue-directive-kit](#vue-directive-kit)
- [目录](#%e7%9b%ae%e5%bd%95)
- [安装](#%e5%ae%89%e8%a3%85)
- [使用](#%e4%bd%bf%e7%94%a8)
- [imgLazyload](#imglazyload)
- [imgPlaceholder](#imgplaceholder)
- [infiniteScroll](#infinitescroll)
- [鼠标跟随](#%e9%bc%a0%e6%a0%87%e8%b7%9f%e9%9a%8f)
- [API](#api)
- [Maintainers](#maintainers)
- [Contributing](#contributing)
- [License](#license)## 安装
**安装**
```bash
npm i vue-directive-kit -D
# yarn add vue-directive-kit -D
```**全局注册**
ES Module
```javascript
import vueDirectiveKit from 'vue-directive-kit';
Vue.use(vueDirectiveKit);
```CommonJs
```javascript
const {default: vueDirectiveKit} = require('vue-directive-kit')
Vue.use(vueDirectiveKit)
```Script Link
```javascript```
## 使用
### imgLazyload
图片懒加载。当图片出现在浏览器视口才会加载。```html
```### imgPlaceholder
在图片加载完成前以占位内容过渡。支持以**随机色**或者**指定图片**占位。指令默认作用于``标签。也可作用于其他普通元素标签,也就是图片显示为元素背景图,只需为指令添加修饰符`bg`即可。
作用于``标签:
```html
```作用于元素:
```html
```若要以指定图片占位,需要传入一个字符串数组,数组第一项是图片地址,第二项是展位图地址。
作用于``标签:
```html
```作用于元素:
```html
```### infiniteScroll
监听滚动事件并处罚指定事件。可监听window的滚动事件或者指定元素的滚动事件。监听window的滚动事件
Show Me Code
```html
export default {
data (){
return {
loadDataOpt:{
loadfn: this.fetchData
}
}
},
methods:{
fetchData(){
console.log(`window滚动触发`);
}
}
}```
监听指定元素的滚动事件。
Show Me Code
```html
export default {
data (){
return {
loadDataOpt:{
loadfn: this.fetchData,
ref: 'wrapper'
}
}
},
methods:{
fetchData(){
console.log(`指定元素滚动触发`);
}
}
}```
### 鼠标跟随
在指令作用的元素范围内,生成一个鼠标跟随的元素。
可自定义元素样式及元素内容。基本用法
![基本用法](examples/assets/img/docs/默认.gif)
Show Me Code
```html
case: v-follower
```自定义提示内容
![自定义内容](examples/assets/img/docs/自定义内容.gif)
Show Me Code
```js
case: v-followerexport default {
data() {
return {
options:{
txt: "自定义内容"
}
};
}
};```
自定义样式
![自定义样式](examples/assets/img/docs/自定义样式.gif)
Show Me Code
```js
case: v-followerexport default {
data() {
return {
options:{
txt: "自定义样式",
style:{
"backgroundColor": "#38f",
"color": "#fff",
}
}
};
}
};```
## API
## Maintainers
[@guthub handler](https://github.com/guthub handler)
## Contributing
See [the contributing file](contributing.md)!
PRs accepted.
Small note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
## License
MIT © 2019 slevin
Show Me Code
code..