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 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP闭包实例解析
2014/09/08 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
js对象的比较
2011/02/26 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
中国梦读书活动总结
2014/07/10 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
关于保护环境的建议书
2019/06/24 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS