vue中配置全局方法
一. 定义全局方法1. 在src/api/system目录下创建config.js文件import request from '@/utils/request'// 根据参数键名查询参数值export function getConfigKey(configKey) {return request({url: '/system/config/configKey/' + configKey,meth
·
一. 定义全局方法
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>
更多推荐
已为社区贡献4条内容
所有评论(0)