{"id":15024838,"url":"https://github.com/slevin57/vue-directive-kit","last_synced_at":"2026-02-11T09:03:32.300Z","repository":{"id":35107258,"uuid":"207470492","full_name":"slevin57/vue-directive-kit","owner":"slevin57","description":"A collection of vue directives.","archived":false,"fork":false,"pushed_at":"2022-12-11T05:10:15.000Z","size":1849,"stargazers_count":1,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T11:05:36.433Z","etag":null,"topics":["directive","vue","vue-directive","vue-directive-kit","vue-directives","vue-infinite-scroll","vue-lazyload","vue2","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slevin57.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-10T05:12:10.000Z","updated_at":"2023-08-13T10:51:32.000Z","dependencies_parsed_at":"2023-01-15T13:57:52.740Z","dependency_job_id":null,"html_url":"https://github.com/slevin57/vue-directive-kit","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevin57%2Fvue-directive-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevin57%2Fvue-directive-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevin57%2Fvue-directive-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevin57%2Fvue-directive-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slevin57","download_url":"https://codeload.github.com/slevin57/vue-directive-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399887,"owners_count":20932880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directive","vue","vue-directive","vue-directive-kit","vue-directives","vue-infinite-scroll","vue-lazyload","vue2","vuejs"],"created_at":"2024-09-24T20:01:02.788Z","updated_at":"2026-02-11T09:03:32.211Z","avatar_url":"https://github.com/slevin57.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-directive-kit\n\n![banner](examples/assets/logo.png)\n\n[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n\n\u003e A collection of vue directive.\n\n各种Vue自定义指令合集。\n\n## 目录\n\n- [vue-directive-kit](#vue-directive-kit)\n  - [目录](#%e7%9b%ae%e5%bd%95)\n  - [安装](#%e5%ae%89%e8%a3%85)\n  - [使用](#%e4%bd%bf%e7%94%a8)\n    - [imgLazyload](#imglazyload)\n    - [imgPlaceholder](#imgplaceholder)\n    - [infiniteScroll](#infinitescroll)\n    - [鼠标跟随](#%e9%bc%a0%e6%a0%87%e8%b7%9f%e9%9a%8f)\n  - [API](#api)\n  - [Maintainers](#maintainers)\n  - [Contributing](#contributing)\n  - [License](#license)\n\n\n## 安装\n\n**安装**\n```bash\nnpm i vue-directive-kit -D\n# yarn add vue-directive-kit -D\n```\n\n**全局注册**\n\u003c/br\u003e\nES Module\n```javascript\nimport vueDirectiveKit from 'vue-directive-kit';\nVue.use(vueDirectiveKit);\n```\n\nCommonJs\n```javascript\nconst {default: vueDirectiveKit} = require('vue-directive-kit')\nVue.use(vueDirectiveKit)\n```\n\nScript Link\n```javascript\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-directive-kit@latest/lib/vue-directive-kit.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## 使用\n\n### imgLazyload\n图片懒加载。当图片出现在浏览器视口才会加载。\n\n```html\n\u003cimg v-img-lazyload=\"imgSrc\"\u003e\n```\n\n### imgPlaceholder\n在图片加载完成前以占位内容过渡。支持以**随机色**或者**指定图片**占位。\n\n指令默认作用于`\u003cimg\u003e`标签。也可作用于其他普通元素标签，也就是图片显示为元素背景图，只需为指令添加修饰符`bg`即可。\n\n作用于`\u003cimg\u003e`标签：\n```html\n\u003cimg v-img-placeholder=\"'http://api.dujin.org/bing/1920.php'\" alt=\"\"\u003e\n```\n\n作用于元素：\n```html\n\u003cdiv v-img-placeholder.bg=\"'http://api.dujin.org/bing/1920.php'\"\u003e \u003c/div\u003e\n```\n\n若要以指定图片占位，需要传入一个字符串数组，数组第一项是图片地址，第二项是展位图地址。\n\n作用于`\u003cimg\u003e`标签：\n```html\n\u003cimg v-img-placeholder=\"['http://api.dujin.org/bing/1920.php','https://www.baidu.com/favicon.ico']\" alt=\"\"\u003e\n```\n\n作用于元素：\n```html\n\u003cdiv v-img-placeholder.bg=\"['http://api.dujin.org/bing/1920.php','https://www.baidu.com/favicon.ico']\" \u003e\u003c/div\u003e\n```\n\n### infiniteScroll\n监听滚动事件并处罚指定事件。可监听window的滚动事件或者指定元素的滚动事件。\n\n监听window的滚动事件\n\u003cdetails\u003e\n\u003csummary\u003eShow Me Code\u003c/summary\u003e\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cdiv class=\"wrapper\" v-infinite-scroll=\"loadDataOpt\"\u003e\n            \u003cul class=\"list\"\u003e\n                \u003cli class=\"item\"\u003e \u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data (){\n        return {\n            loadDataOpt:{\n                loadfn: this.fetchData\n            }\n        }\n    },\n    methods:{\n        fetchData(){\n            console.log(`window滚动触发`);\n        }\n    }\n}\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n\n监听指定元素的滚动事件。\n\n\u003cdetails\u003e\n\u003csummary\u003eShow Me Code\u003c/summary\u003e\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cdiv class=\"wrapper\" ref='wrapper'\u003e\n            \u003cul class=\"list\"  v-infinite-scroll=\"loadDataOpt\"\u003e\n                \u003cli class=\"item\"\u003e \u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data (){\n        return {\n            loadDataOpt:{\n                loadfn: this.fetchData,\n                ref: 'wrapper'\n            }\n        }\n    },\n    methods:{\n        fetchData(){\n            console.log(`指定元素滚动触发`);\n        }\n    }\n}\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n### 鼠标跟随\n\n在指令作用的元素范围内，生成一个鼠标跟随的元素。\n可自定义元素样式及元素内容。\n\n基本用法\n\n![基本用法](examples/assets/img/docs/默认.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eShow Me Code\u003c/summary\u003e\n\n```html\n\u003cdiv v-follower\u003ecase： v-follower\u003c/div\u003e\n```\n\u003c/details\u003e\n\n\n自定义提示内容\n\n![自定义内容](examples/assets/img/docs/自定义内容.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eShow Me Code\u003c/summary\u003e\n\n```js\n\u003ctemplate\u003e\n    \u003cdiv v-follower=\"options\"\u003ecase： v-follower\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data() {\n        return {\n            options:{\n                txt: \"自定义内容\"\n            }\n        };\n    }\n};\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n\n自定义样式\n\n![自定义样式](examples/assets/img/docs/自定义样式.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eShow Me Code\u003c/summary\u003e\n\n```js\n\u003ctemplate\u003e\n    \u003cdiv v-follower=\"options\"\u003ecase： v-follower\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data() {\n        return {\n            options:{\n                txt: \"自定义样式\",\n                style:{\n                    \"backgroundColor\": \"#38f\",\n                    \"color\": \"#fff\",\n                }\n            }\n        };\n    }\n};\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n\n## API\n\n## Maintainers\n\n[@guthub handler](https://github.com/guthub handler)\n\n## Contributing\n\nSee [the contributing file](contributing.md)!\n\nPRs accepted.\n\nSmall note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.\n\n## License\n\nMIT © 2019 slevin\n\n\n\n\u003cdetails\u003e\n\u003csummary\u003eShow Me Code\u003c/summary\u003e\n\ncode..\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslevin57%2Fvue-directive-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslevin57%2Fvue-directive-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslevin57%2Fvue-directive-kit/lists"}