vue 使用没有第三方库js方式

1、vue引入没有 npm资源的 js 方式
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <title>****</title>
            <--标题图标-->
            <link rel="icon" href="static/favicon.ico" type="image/x-icon" />
            <--引入第三方库js-->
            <script src="./static/jcinvccbar.min.js"></script>
        </head>
        <body>
            <div id="app"></div>
        </body>
</html>

这样就可以在全局中使用它了,亲测可用

2、vue 引入有npm资源的 js (以 moment 为例)
1、首先导入资源包

    npm install moment

2、在main.js中导入moment并绑定到vue上

    import moment from 'moment'
    Vue.prototype.$moment = moment;

3、这样经过简单的两步就可以在系统中,不每个vue页面都去引用,就可以愉快的使用它了,方式如下

    let formatDate = this.$moment.(new Date()).format('YYYY-MM-DD HH:mm:')
3、同理自己也可以写类似的工具方法
注意:只要 export default 声明的方法就可,下面是一个简单的例子
export default {

    //initState :1:成功  2:失败    talkState:1:无状态    2:正在呼叫    3:正在通话
    GeoState:{
        initState:{
            SUCCESS:1,
            FAILED:2,
        },
        talkState:{
            NO_STATE:1,
            CALLING:2,
            TALKING:3
        },
        crmPort:'9078',
    },

    /**
     * aes 加密处理
     * @param word
     * @param keyStr
     * @returns {string}
     */
    encrypt(word,_this){
        let keyStr = _this.$store.state.Geo.safetyCode
        keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
        var key  = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
        var srcs = CryptoJS.enc.Utf8.parse(word);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
        return encrypted.toString();
    },

     /**
     * aes 解密
     * @param word
     * @param keyStr
     * @returns {string}
     */
    decrypt(word,_this){
        //此处的safetyCode是管理在 vuex 中的
        let keyStr = _this.$store.state.Geo.safetyCode
        keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
        var key  = CryptoJS.enc.Utf8.parse(keyStr);
        var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
        return CryptoJS.enc.Utf8.stringify(decrypt).toString();
    },


    /**
     * 处理有层级关系的菜单(递归拼接菜单父子管理的工具方法(用与el-menu的菜单 data))
     * @param rows
     * @returns {Array}
     */
    convert(rows){
        function clone(obj) {
            if (null == obj || "object" != typeof obj) return obj;
            if (obj instanceof Date) {
                var copy = new Date();
                copy.setTime(obj.getTime());
                return copy;
            }
            if (obj instanceof Array | obj instanceof Object) {
                var copy = (obj instanceof Array)?[]:{};
                for (var attr in obj) {
                    if (obj.hasOwnProperty(attr))
                        copy[attr] = clone(obj[attr]);
                }
                return copy;
            }
            throw new Error("Unable to clone obj! Type isn't supported.");
        }
        function exists(rows, parentId){
            for(var i=0; i<rows.length; i++){
                if (rows[i].id == parentId) return true;
            }
            return false;
        }
        var nodes = [];
        for(var i=0; i<rows.length; i++){
            var row = rows[i];
            if (!exists(rows, row.parentId)){
                nodes.push(clone(row));
            }
        }
        var toDo = [];
        for(var i=0; i<nodes.length; i++){
            toDo.push(nodes[i]);
        }
        while(toDo.length){
            var node = toDo.shift();
            for(var i=0; i<rows.length; i++){
                var row = rows[i];
                if (row.parentId == node.id){
                    var child = clone(row);
                    if (node.children){
                        node.children.push(child);
                    } else {
                        node.children = [child];
                    }
                    toDo.push(child);
                }
            }
        }
        return nodes;
    }
}
上面的代码中 可以看出,其中可以定义一些常量,也可以定义一些方法,使用方法如下
<template>
    <div></div>
</template>

<script>
    data(){
        return {
        }
    },
    methods:{
        //加密方法
        let aesWord = this.$global.encrypt('13800138000',this)
        //调用解密的方法
        this.$global.decrypt(aesWord,this)
        //常量的使用
        let successCode = this.$global.GeoState.initState.SUCCESS

    }
</script>

以上方法亲测可行,再此记录学习,以提高自己

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值