Vue 插件

        以下皆为本人进行Vue开发、学习的时候所碰到的一些小插件，罗列在下面，再次使用以免百度不到可以使用的。

1、vue-clipboard2

        将内容复制到剪切板，当复制成功、复制失败时的回调函数

        1、安装

npm install --save vue-clipboard2

        2、基本使用代码

                引入-main.js

                        全局使用

import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

                 html

<button v-clipboard:copy="text" v-clipboard:success="cliSuccess" v-clipboard:error="cliEooro">
    复制
</button>

                script

methods:{
    cliSuccess() {
        console.log('复制成功')
    },
    cliEooro() {
        console.log('复制失败')
    }
}

2、bignumber.js

        bignumber是为了解决js数值进行运算精度丢失的插件。

        1、安装

npm install bignumber.js

        2、基本使用代码

                引入-script

                        在所需要使用的.vue局部引入

<script>
    import { BigNumber } from 'bignumber.js'
</script>

                加

0.1 + 0.2
// 0.30000000000000004
x = BigNumber(0.1)
y = x.plus(0.2).toString()
// '0.3'

                减

0.3 - 0.1
// 0.19999999999999998
x = BigNumber(0.3)
x.minus(0.1).toString()
// '0.2'

                乘

0.1 * 3
// 0.30000000000000004
x = BigNumber(0.1)
y = x.multipliedBy(3).toString()
// '0.3'

                除

777 / 333
// 2.3333333333333335
x = BigNumber(777)
y = BigNumber(333)
x.dividedBy(y).toString()
// '2.33333333333333333333'

3、js-md5

        1、安装

npm install --save js-md5

        npm安装比较久，推荐cnpm

        2、基本使用代码

<script>
    import md5 from 'js-md5';
    var name = 'dcxx'
    md5(name)
    // 6ec29f7f8d16c5fee9a5a7ac660f2e77
</script>

4、crypto.JS

        学习自vue 引入cryptoJS进行AES加密_Java小爬虫-CSDN博客_cryptojs npm，感觉大佬分享。

        1、安装

npm install crypto-js

        2、封装cryptoAES.js

        统一加密解密

import CryptoJs from 'crypto-js'
export default {
    // 加密
    keys:'dcxxyyds',
    // 长度必须为8的倍数
    encrypt(word) {
      let key = CryptoJs.enc.Utf8.parse(this.keys);
      let srcs = CryptoJs.enc.Utf8.parse(word);
      let encrypted = CryptoJs.AES.encrypt(srcs, key, {
        mode: CryptoJs.mode.ECB,
        padding: CryptoJs.pad.Pkcs7
      });
      return encrypted.toString();
    },
    // 解密
    decrypt(word) {
      let key = CryptoJs.enc.Utf8.parse(this.keys);
      let decrypt = CryptoJs.AES.decrypt(word, key, {
        mode: CryptoJs.mode.ECB,
        padding: CryptoJs.pad.Pkcs7
      });
      return CryptoJs.enc.Utf8.stringify(decrypt).toString();
    }
  }

        3、使用

        在需要使用的地方import引入，然后传入需要加密解密的数据

<script>
import cryptoAES from '@/utils/cryptoAES.js'

export default {
    mounted(){
        // 测试加密解密
        var EncPass = cryptoAES.encrypt('dcxx')
        console.log('加密',EncPass)
        // S5qw4B7ae9kEOUC8Re796g==
        var getPass = cryptoAES.decrypt(EncPass)
        console.log('解密',getPass)
        // dcxx
    }
}
</script>

4、Vue-Ripple-Directive

        这个插件指令可以绑定在任意的DOM元素上，通过点击产生波纹效果。

        1、安装

npm install --save vue-ripple-directive

        2、注册指令（全局or局部）

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

        3、使用

<div v-ripple>
    东城小巷
</div>

        4、修改默认样式

                1、颜色

import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple);
Ripple.color = 'rgba(103, 130, 250, 0.3)'; //自定义水波纹颜色

                2、大小

波纹的大小需要自己修改源码，才能进行大小的控制，附上代码仅供参考。

var rect        = target.getBoundingClientRect(),
    left        = rect.left,
    top         = rect.top,
    width       = target.offsetWidth,
    height      = target.offsetHeight,
    dx          = event.clientX - left,
    dy          = event.clientY - top,
    maxX        = Math.max(dx, width - dx),
    maxY        = Math.max(dy, height - dy),
    style       = window.getComputedStyle(target),
    // 增加波纹最大宽度控制
    radius      = Ripple.maxWidth || Math.sqrt((maxX * maxX) + (maxY * maxY)),
    border      = (targetBorder > 0 ) ? targetBorder : 0;

import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple);
Ripple.maxWidth = 50

5、封装全部指令，工程化引入

        1、在src目录下创建directive文件夹，然后在directive文件夹下新建多个.js文件，js文件中export default 抛出封装的指令方法，eg:

ripple.js

import Ripple from 'vue-ripple-directive'
Ripple.maxWidth = 50
Ripple.color = 'rgba(103, 130, 250, 0.3)' //自定义水波纹颜色
export default Ripple

drag.js

export default (el) => {
    let _el = el
    _el.onselectstart = function() {
        return false  //禁止选择网页上的文字
    }

    _el.onmousedown = e => {
        let disX = e.clientX - _el.offsetLeft //鼠标按下，计算当前元素距离可视区的距离
        let disY = e.clientY - _el.offsetTop
        document.onmousemove = function(e){     
        let l = e.clientX - disX
        let t = e.clientY - disY;
        _el.style.left = l + "px"
        _el.style.top = t + "px"
        }
        document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        }
        return false
    }
}

然后在src/新建一个index.js文件，里面的代码如下：

import Vue from 'vue'
let vueDirectives = {}
const files = require.context('.', true, /\.js$/)
files.keys().forEach(key => {
    if (key === './index.js') {
        return
    }
    vueDirectives[key.match(/.\/(\S*).js/)[1]] = files(key).default || files
})
Object.keys(vueDirectives).forEach(name => Vue.directive(name, vueDirectives[name]))

最后的最后，在main.js中引入该index.js，大功告成

main.js

import '@/directives/index'

学习ing……