一. 定义全局方法

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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐