vue中 利用混入定义全局变量函数筛选器
Posted dsgfsd
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中 利用混入定义全局变量函数筛选器相关的知识,希望对你有一定的参考价值。
说一种没人发的,利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。
一、main.js文件
import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import store from \'./store\'
import mixin from \'./utils/mixin\'
Vue.prototype.$bus = new Vue()
//进行全局混入
Vue.mixin(mixin)
new Vue({
store,
router,
render: h => h(App),
}).$mount(\'#app\')
一、mixin.js文件,我是把方法、变量、筛选器这三个分别写到三个js文件里面了,方便后期维护。也可以直接写到mixins文件里面
import filters from \'./filters\'
import globalMethods from \'./global-methods\'
import Config from \'../config\'
import CONSTANT from \'./const_var\'
// 全局混入
export default {
data() {
return {
CONFIG: Config,
CONSTANT,
}
},
methods: {
// //将globalMethods文件里面的方法挂载到vue上,以方便调用,直接this.$xxx方法名就可以了
// Object.keys(globalMethods).forEach(key => {
// Vue.prototype[key] = tools[key]
// })
// 将globalMethods里面的方法用对象展开符混入到mixin上,以方便调用,直接this.$xxx方法名就可以了
...globalMethods,
},
filters: {
// //将filter里面的方法添加了vue的筛选器上
// Object.keys(filters).forEach(key => {
// Vue.filter(key, filters[key])
// })
...filters,
},
}
filters.js文件
export default {
// 时间转换器
date(v) {
...
},
// 处理身份证信息,中间隐藏掉
processIdNumber(v) {
...
},
}
global-methods.js文件
import { Message, MessageBox } from \'element-ui\'
export default {
$success(msg) {
...
},
$warning(msg) {
...
},
$error(msg) {
...
},
$checkPlatform() {
...
},
// 倒计时时间格式化
$countdownFormatTime(timeStamp) {
...
},
}
constant_var.js文件
export default {
REDIRECT: \'redirect\',
// 请求方法
POST: \'post\',
GET: \'get\',
PATCH: \'patch\',
DELETE: \'delete\',
PUT: \'put\',
// 静态常量
PICKEROPTIONS: {
...
},
PAGENUMBER: 1,
PAGESIZE: 10,
DELAYTIME: 250,
SUCCESS: \'000000\',
}
以上是关于vue中 利用混入定义全局变量函数筛选器的主要内容,如果未能解决你的问题,请参考以下文章