vue自定义指令

V-Hotkey

仓库地址： https://github.com/Dafrok/v-hotkey
安装： npm install --save v-hotkey
这个指令可以给组件绑定一个或多个快捷键。
例如，通过按下ESC键后隐藏某个组件，按住Control和回车键再显示。

<template>
    <div>
        <div v-show="show" v-hotkey="{
            'esc':onClose,
	    'ctrl+enter':onshow
	}">
	    Press `esc` to close me!
	</div>
    </div>
</template>

<script>
export default{
    data(){
        return{
            show:true
        }
    },
    methods:{
    	onClose(){
           this.show = false
        },
        onShow(){
            this.show = true
        }
    }
}
</script>

V-Click-OutSide

仓库地址： https://github.com/ndelvalle/v-click-outside
安装： 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>
<script>
export default {
  data() {
    return {
      show: true
    };
  },

  methods: {
    onClickOutside() {
      this.show = false;
    }
  }
};
</script>

V-Clipboard

仓库地址： https://github.com/euvl/v-clipboard
安装： npm install --save v-clipboard
可用于任何动态或静态元素上。当元素被点击时，指令的值会被自动复制到剪切板上。用户需要复制代码时，这就非常有用。

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

Vue-ScrollTo

仓库地址： https://github.com/rigor789/vue-scrollTo
安装： npm install --save vue-scrollto
这个指令监听元素的点击事件，然后滚动到指定的位置，可以处理文章目录跳转和导航跳转。

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

Vue-Lazyload

仓库地址： https://github.com/hilongjw/vue-lazyload
安装： npm install --save vue-lazyload
图片懒加载

<img v-lazy="https://www.domain.com/image.jpg">

V-Tooltip

仓库地址： v-tooltip
安装： npm install --save v-tooltip
可以给元素添加响应式的tooltip，并且可以控制显示位置、触发方式和监听事件。

<button v-tooltip="'You have ' + count + ' new messages.'">
`
还有一个tooltip插件vue-directive-tooltip。


#### V-Scroll-Lock
**仓库地址：** https://github.com/phegman/v-scroll-lock
**安装：** `npm install --save v-scroll-lock`
基于body-scroll-lock开发，这个指令的作用就是打开模态浮层的时候防止下层元素的滚动。
```vue
<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>
<script>
export default {
  data () {
    return {
      opened: false
    }
  },
  methods: {
    onOpenModal () {
      this.opened = true
    },

    onCloseModal () {
      this.opened = false
    }
  }
}
</script>

V-Money

仓库地址： https://github.com/vuejs-tips/v-money
安装： npm install --save v-money
在输入框里加上货币前缀或者后缀，保留小数点位数或者设置小数点符号。

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: '$ ',
        precision: 2,
      }
    }
  }
}
</script>

Vue-Infinite-Scroll

仓库地址： https://github.com/ElemeFE/vue-infinite-scroll
安装： npm install --save vue-infinite-scroll
无限滚动指令，当滚动到页面底部时会触发绑定的方法。

<template>
  <!-- ... -->
  <div
    v-infinite-scroll="onLoadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  ></div>
<template>
<script>
export default {
  data() {
    return {
      data [],
      busy: false,
      count: 0
    }
  },
  methods: {
    onLoadMore() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: this.count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>

vue-clampy

仓库地址： vue-clampyscroll
安装： npm install --save @clampy-js/vue-clampy
这个指令会截断元素里的文本，并在末尾加上省略号。它是用clampy.js实现的。

 <p v-clampy="3">Long text to clamp here</p>
  <!-- displays: Long text to...-->

Vue-InputMask

仓库地址： vue-inputmask
安装： npm install --save vue-inputmask
当需要在输入框里格式化日期时，这个指令会自动生成格式化文本。

<input type="text" v-mask="'99/99/9999'" />

Vue-Ripple-Directive

仓库地址： vue-ripple-directive
安装： npm install --save vue-ripple-directive
可以给点击的元素添加波纹动效。

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

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>
<script>
export default {
  data: function() {
    return {
      focused: false,
    };
  },
};
</script>

V-Blur

仓库地址： v-blur
安装： 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>
<script>
  export default {
      data () {
        return
          blurConfig: {
            isBlurred: false,
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

Vue-Dummy

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

<template>
  <!-- the content inside will have 150 words -->
  <p v-dummy="150"></p>

  <!-- Display a placeholder image of 400x300-->
  <img v-dummy="'400x300'" />
</template>