这15个Vue自定义指令，让你的项目开发爽到爆

爱被打了一巴掌 2023-10-11 14:20 45阅读 0赞

受 AngularJS 的启发，Vue 内置了一些非常有用的指令（比如`v-html` 和 `v-once`等），每个指令都有自身的用途。完整的指令列表可以在这里查看.

这还没完，更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包，解决了无数的代码问题。

以下就是我最喜欢的 Vue.js 自定义指令列表。不用说，这些指令为我的项目开发节省了大量时间！

### 1. V-Hotkey ###

仓库地址: [https://github.com/Dafrok/v-hotkey][https_github.com_Dafrok_v-hotkey]  
Demo: 戳这里 [https://dafrok.github.io/v-hotkey][https_dafrok.github.io_v-hotkey]  
安装: `npm install --save v-hotkey`  
这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟：

<template>
      <div
        v-show="show"
        v-hotkey="{
          'esc': onClose,
          'ctrl+enter': onShow
        }"
      >
          Press `esc` to close me!
      </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                show: true
            }
        },
    
        methods: {
            onClose() {
                this.show = false
            },
    
            onShow() {
                this.show = true
            },
        }
    }
    </script>

### 2. V-Click-Outside ###

仓库地址: [https://github.com/ndelvalle/v-click-outside][https_github.com_ndelvalle_v-click-outside]  
Demo: [https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue][https_codesandbox.io_s_zx7mx8y1ol_module_2Fsrc_2Fcomponents_2FHelloWorld.vue]  
安装: `npm install --save v-click-outside`

你想要点击外部区域关掉某个组件吗？用这个指令可以轻松实现。这是我每个项目必用的指令之一，尤其在弹框和下拉菜单组件里非常好用。

<template>
      <div
        v-show="show"
        v-click-outside="onClickOutside"
      >
        Hide me when a click outside this element happens
      </div>
    </template>

HTML

说明： 你也可以通过双击外部区域来触发，具体用法请参考文档。

### 3. V-Clipboard ###

仓库地址: [https://github.com/euvl/v-clipboard][https_github.com_euvl_v-clipboard]  
安装: `npm install --save v-clipboard`

这个简单指令的作者是Yev Vlasenko ，可以用在任何静态或动态元素上。当元素被点击时，指令的值会被复制到剪贴板上。用户需要复制代码片段的时候，这个非常有用。

<button v-clipboard="value">
      Copy to clipboard
    </button>

HTML

### 4. Vue-ScrollTo ###

仓库地址: [https://github.com/rigor789/vue-scrollTo][https_github.com_rigor789_vue-scrollTo]  
Demo: [https://vue-scrollto.netlify.com/][https_vue-scrollto.netlify.com]  
安装: `npm install --save vue-scrollto`

这个指令监听元素的点击事件，然后滚动到指定位置。我通常用来处理文章目录跳转和导航跳转。

<span v-scroll-to="{
      el: '#element',          // 滚动的目标位置元素
      container: '#container', // 可滚动的容器元素
      duration: 500,           // 滚动动效持续时长（毫秒）
      easing: 'linear'         // 动画曲线
      }"
    >
      Scroll to #element by clicking here
    </span>

说明： 也可以通过代码动态设置，具体看文档。

### 5. Vue-Lazyload ###

仓库地址: [https://github.com/hilongjw/vue-lazyload][https_github.com_hilongjw_vue-lazyload]  
Demo: [http://hilongjw.github.io/vue-lazyload/][http_hilongjw.github.io_vue-lazyload]  
安装: `npm install --save vue-lazyload`  
图片懒加载，非常方便。

### 6. V-Tooltip ###

仓库地址: v-tooltip  
Demo: available here  
安装: `npm install --save v-tooltip`  
几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip，并可控制显示位置、触发方式和监听事件。

说明： 还有一个比较流行的tooltip插件vue-directive-tooltip.

### 7. V-Scroll-Lock ###

仓库地址: [https://github.com/phegman/v-scroll-lock][https_github.com_phegman_v-scroll-lock]  
Demo: [https://v-scroll-lock.peterhegman.com/][https_v-scroll-lock.peterhegman.com]  
安装: `npm install --save v-scroll-lock`

基于 body-scroll-lock 开发，这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。

<template>
      <div class="modal" v-if="opened">
        <button @click="onCloseModal">X</button>
        <div class="modal-content" v-scroll-lock="opened">
          <p>A bunch of scrollable modal content</p>
        </div>
      </div>
    </template>

### 8. V-Money ###

仓库地址: [https://github.com/vuejs-tips/v-money][https_github.com_vuejs-tips_v-money]  
Demo: [https://vuejs-tips.github.io/v-money/][https_vuejs-tips.github.io_v-money]  
安装: `npm install --save v-money`  
如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了，就是它！一行代码搞定这些需求：

<template>
      <div>
        <input v-model.lazy="price" v-money="money" /> {
       {price}}
      </div>
    </template>

### 9. Vue-Infinite-Scroll ###

仓库地址: [https://github.com/ElemeFE/vue-infinite-scroll][https_github.com_ElemeFE_vue-infinite-scroll]  
安装: `npm install --save vue-infinite-scroll`

无限滚动指令，当滚动到页面底部时会触发绑定的方法。

### 10. Vue-Clampy ###

仓库地址: vue-clampy.  
安装: `npm install --save @clampy-js/vue-clampy`

这个指令会截断元素里的文本，并在末尾加上省略号。它是用clampy.js实现的。

<p v-clampy="3">Long text to clamp here</p>

### 11. Vue-InputMask ###

仓库地址: vue-inputmask  
安装: `npm install --save vue-inputmask`  
当你需要在输入框里格式化日期时，这个指令会自动生成格式化文本。基于Inputmask library 开发。

HTML

### 12. Vue-Ripple-Directive ###

仓库地址: vue-ripple-directive  
安装: `npm install --save vue-ripple-directive`

Aduardo Marcos 写的这个指令可以给点击的元素添加波纹动效。

<div v-ripple class="button is-primary">This is a button</div>

### 13. Vue-Focus ###

仓库地址: vue-focus  
安装: `npm install --save vue-focus`  
有时候，用户在界面里操作，需要让某个输入框获得焦点。这个指令就是干这个的。

<template>
      <button @click="focused = true">Focus the input</button>
    
      <input type="text" v-focus="focused">
    </template>

### 14. V-Blur ###

仓库地址: v-blur  
Demo: 戳这里  
安装: `npm install --save v-blur`  
假设你的页面在访客没有注册的时候，有些部分需要加上半透明遮罩。用这个指令可以轻松实现，还可以自定义透明度和过渡效果。

<template>
      <button
        @click="blurConfig.isBlurred = !blurConfig.isBlurred"
      >Toggle the content visibility</button>
    
      <p v-blur="blurConfig">Blurred content</p>
    </template>

### 15. Vue-Dummy ###

仓库地址: vue-dummy  
Demo: available here  
安装: `npm install --save vue-dummy`  
开发 app 的时候，偶尔会需要使用假文本数据，或者特定尺寸的占位图片。用这个指令可以轻松实现。

### 最后 ###

欢迎补充更多好用的 Vue 自定义指令。

[https_github.com_Dafrok_v-hotkey]: https://link.zhihu.com/?target=https%3A//github.com/Dafrok/v-hotkey
[https_dafrok.github.io_v-hotkey]: https://link.zhihu.com/?target=https%3A//dafrok.github.io/v-hotkey
[https_github.com_ndelvalle_v-click-outside]: https://link.zhihu.com/?target=https%3A//github.com/ndelvalle/v-click-outside
[https_codesandbox.io_s_zx7mx8y1ol_module_2Fsrc_2Fcomponents_2FHelloWorld.vue]: https://link.zhihu.com/?target=https%3A//codesandbox.io/s/zx7mx8y1ol%3Fmodule%3D%252Fsrc%252Fcomponents%252FHelloWorld.vue
[https_github.com_euvl_v-clipboard]: https://link.zhihu.com/?target=https%3A//github.com/euvl/v-clipboard
[https_github.com_rigor789_vue-scrollTo]: https://link.zhihu.com/?target=https%3A//github.com/rigor789/vue-scrollTo
[https_vue-scrollto.netlify.com]: https://link.zhihu.com/?target=https%3A//vue-scrollto.netlify.com/
[https_github.com_hilongjw_vue-lazyload]: https://link.zhihu.com/?target=https%3A//github.com/hilongjw/vue-lazyload
[http_hilongjw.github.io_vue-lazyload]: https://link.zhihu.com/?target=http%3A//hilongjw.github.io/vue-lazyload/
[https_github.com_phegman_v-scroll-lock]: https://link.zhihu.com/?target=https%3A//github.com/phegman/v-scroll-lock
[https_v-scroll-lock.peterhegman.com]: https://link.zhihu.com/?target=https%3A//v-scroll-lock.peterhegman.com/
[https_github.com_vuejs-tips_v-money]: https://link.zhihu.com/?target=https%3A//github.com/vuejs-tips/v-money
[https_vuejs-tips.github.io_v-money]: https://link.zhihu.com/?target=https%3A//vuejs-tips.github.io/v-money/
[https_github.com_ElemeFE_vue-infinite-scroll]: https://link.zhihu.com/?target=https%3A//github.com/ElemeFE/vue-infinite-scroll