vue自定义指令

1. v-hotkey

这个指令可以给组件绑定一个或多个快捷键。通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它。

安装

npm install --save v-hotkey

main.js 注册

import Vue from 'vue'
import vHotkey from 'v-hotkey'
Vue.use(vHotkey)

页面使用

<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. Vue-Lazyload
   图片懒加载，非常方便。

安装

npm install --save vue-lazyload

main.js

import VueLazyLoad from 'vue-lazyload';
Vue.use(VueLazyLoad, {
  // 这里表示在加载时要显示的图片的路径
  preLoad: 1,
  error: require('./assets/img/avatar.png'),
 loading:require('./assets/img/avatar.png'),
  attempt: 2
})

页面使用

<template>
  <div>
    <ul class="img">
      <li v-for="(item, index) in imgList" :key="index">
        <img v-lazy="item" style="width: 768px" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "lazyImg",
  data() {
    return {
      imgList: [
        require("../../../assets/img/login-background.jpg"),
        require("../../../assets/img/login-background.jpg"),
        require("../../../assets/img/login-background.jpg"),
        require("../../../assets/img/login-background.jpg"),
      ],
    };
  },
};
</script>

<style></style>

3. V-Tooltip
   几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip，并可控制显示位置、触发方式和监听事件。
   安装

npm install --save v-tooltip

main.js

import vToolTio from 'v-tooltip'
Vue.use(vToolTio)

页面使用

<button v-tooltip="'You have ' + count + ' new messages.'">button</button>

4. V-Blur
   为绑定的内容蒙上阴影

安装

npm install --save v-blur

main,js

import vBlur from 'v-blur'
Vue.use(vBlur)

页面使用

    <button @click="blurConfig.isBlurred = !blurConfig.isBlurred">
      Toggle the content visibility
    </button>

    <p v-blur="blurConfig">Blurred content</p>

5. Vue-Dummy
   文字图片占位符

安装

npm install --save vue-dummy

main.js

import vDummy from 'vue-dummy'
Vue.use(vDummy)

页面使用

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

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