vue 实用指令式插件+使用方法

v-click-outside

点击外部区域触发(常用在弹框、下拉框点击外部关闭)

npm install --save v-click-outside

使用：

//局部引入
import vClickOutside from 'v-click-outside'
directives: {
  clickOutside: vClickOutside.directive
},

//全局引入
import Vue from 'vue'
import vClickOutside from 'v-click-outside'
Vue.use(vClickOutside)

//使用
<template>
  <div v-click-outside="onClickOutside"></div>
</template>
methods: {
    onClickOutside (event) {
      console.log('Clicked outside. Event: ', event)
    }
},

vue-scrollto

滚动到指定区域（常用在文章目录跳转或者导航跳转）

npm install --save vue-scrollto

用法一：

//在main引入
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
//不添加默认选项写法
Vue.use(VueScrollTo)
//添加默认选项写法
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })
 
//使用
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
<div id="element">Hi. I'm #element.</div>

用法二：

//在main引入
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)

<a href="#" v-scroll-to="{
     el: '#element',
     container: 'body',
     duration: 500,
     lazy: false
     easing: 'linear',
     offset: 0,
     force: true,
     cancelable: true,
     onStart: onStart,
     onDone: onDone,
     onCancel: onCancel,
     x: false,
     y: true
 }">
    Scroll to #element
</a>

用法三：

var VueScrollTo = require('vue-scrollto');
var options = {
    container: '#container',
    easing: 'ease-in',
    lazy: false,
    offset: -60,
    force: true,
    cancelable: true,
    onStart: function(element) {
      // scrolling started
    },
    onDone: function(element) {
      // scrolling is done
    },
    onCancel: function() {
      // scrolling has been interrupted
    },
    x: false,
    y: true
}
 
var cancelScroll = VueScrollTo.scrollTo(element, duration, options)
 
// or alternatively inside your components you can use
cancelScroll = this.$scrollTo(element, duration, options)
 
// to cancel scrolling you can call the returned function
cancelScroll()

vue-directive-tooltip

给元素添加响应式的tooltip

npm install vue-directive-tooltip --save

用法：

//引入
import Vue from 'vue';
import Tooltip from 'vue-directive-tooltip';
import 'vue-directive-tooltip/dist/vueDirectiveTooltip.css';
Vue.use(Tooltip);

//使用
<button v-tooltip.bottom="{content:'我是tooltip框'}">我能弹出tip</button>

vue-ripple-directive

点击波纹

npm install vue-ripple-directive --save 用法一：

//引入
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple);

//使用
<div v-ripple="'rgba(25, 255, 255, 0.35)'"  class="button">I have different color</div>

用法二：

//全局设置
import Ripple from 'vue-ripple-directive'
Ripple.color = 'rgba(255, 255, 255, 0.35)';
Ripple.zIndex = 55;
Vue.directive('ripple', Ripple);

//使用
<div v-ripple="'rgba(25, 255, 255, 0.35)'"  class="button">I have different color</div>