vue使用混入定义全局变量、函数、筛选器的实例代码


Posted in Javascript onJuly 29, 2019

说一种没人发的,利用混入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使用混入定义全局变量、函数、筛选器的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
vue前后分离调起微信支付
Jul 29 #Javascript
详解vue-property-decorator使用手册
Jul 29 #Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 #Javascript
微信小程序 WXML节点信息查询详解
Jul 29 #Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 #Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 #Javascript
vue.js 2.0实现简单分页效果
Jul 29 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php实现的验证码文件类实例
2015/06/18 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
浅析PHP开发规范
2018/02/05 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
高中地理教学反思
2014/01/29 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
运动员加油词
2015/07/18 职场文书
学生会任命书范本
2015/09/21 职场文书