vue公共方法并挂载到全局

最新推荐文章于 2024-05-31 09:17:46 发布

诺小D

最新推荐文章于 2024-05-31 09:17:46 发布

阅读量567

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46352558/article/details/128249343

版权

示例代码

随便创建一个单独的js文件用于专门写公共方法

exports.install = function (Vue, options) {
    //获取URL参数
    Vue.prototype.$queryURLParameter = function(url, isEncode) {
        url = url || window.location.href;
        var obj = {},
            reg = /([^?&=]+)=([^?&=]+)/g;
        url.replace(reg, function () {
            var arg = arguments;
            obj[arg[1]] = isEncode ? decodeURIComponent(arg[2]) : arg[2];
        });
        return obj
    },
    // 字典表类型数据回显
    Vue.prototype.$funEcho=function(val,arr){
        let returnData='暂未查询到';
        for(let i of  arr){
           if(i.value==val){
            returnData=i.label;
           }
        }
        return returnData
    },
    };

在main.js 引入使用

import all from './common/customFn';
Vue.use(all); //引入自定义函数

最后在要用的地方直接使用

//html使用
  <el-descriptions-item>
                            <template slot="label">
                                最高学历
                            </template>
                            {{$funEcho(formLabelAlign.highestEducation,educationList)}}
                        </el-descriptions-item>

//方法里面使用
 async getTree() {
                await apiControlognztgetOgnztTree().then((res) => {
                    if (res.success) {
                        let data = [res.data];
                        this.treeData = this.$delChilds(data);
                        localStorage.setItem('OgnztTree', JSON.stringify(this.treeData));
                    }
                })
            },