vue中配置全局方法

一. 定义全局方法

1. 在src/api/system目录下创建config.js文件

import request from '@/utils/request'
// 根据参数键名查询参数值
export function getConfigKey(configKey) {
  return request({
    url: '/system/config/configKey/' + configKey,
    method: 'get'
  })
}

2. 在main.js中引入，并挂在为全局方法

import { getConfigKey } from "@/api/system/config";
全局方法挂载
Vue.prototype.getConfigKey = getConfigKey

3. 在vue中使用该全局方法

created() {
    this.getConfigKey("sys.user.initPassword").then(response => {
      this.initPassword = response.msg;
    });
}

二. 定义全局过滤器

1. 在src/utils/filter目录下创建filter.js文件

export function imgFilter(picUrl){
  return vueInstance.$minio + picUrl;
}

2. 在main.js中引入，并挂载为全局过滤器

import * as filters from '@/utils/filter/filter'
Object.keys(filters).forEach(key=>{
  Vue.filter(key,filters[key])
})

3. 在vue中使用该全局方法

<el-table-column label="图片"  >
  <template slot-scope="scope">
    <el-popover placement="top-start" title="" trigger="hover">
      <img :src="scope.row.imgUrl | imgFilter" alt="" style="width: 150px;height: 150px">
      <img slot="reference" :src="scope.row.imgUrl | imgFilter" style="width: 30px;height: 30px">
    </el-popover>
  </template>
</el-table-column>