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

赞 (0)

相关推荐

  • VUE 全局变量的几种实现方式

    1.全局变量专用模块 意思是说,用一个模块(js or vue)管理这套全局变量,模块里的变量用export (最好导出的格式为对象,方便在其他地方调用)暴露出去,当其它地方需要使用时,用import 导入该模块 全局变量专用模块Global.vue const colorList = [ '#F9F900', '#6FB7B7', ] const colorListLength = 20 function getRandColor () { var tem = Math.round(Math.

  • 详解VUE 定义全局变量的几种实现方式

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59'

  • Vue中定义全局变量与常量的各种方式详解

    前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于

  • vue定义全局变量和全局方法的方法示例

    一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function commonFun() { console.log("公共方法") } // 暴露出这些属性和方法 export default { httpUrl, commonFun } </scrip

  • 解决vue2 在mounted函数无法获取prop中的变量问题

    如下所示: props: { example: { type: Object, default() { }, }, }, watch: { example: function(newVal,oldVal){ // newVal 为改变后的值 // 继续要处理的事件 }, }, 使用watch 替代 mounted. 通过watch属性来响应数据的变化,当数据改变时执行异步操作. 总结 以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题,希望对大家有所帮助,如

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • Vue引入sass并配置全局变量的方法

    引入sass 首先使用官方提供的脚手架vue-cli进行搭建框架,这里就不做说明了,查阅官网即可. 等安装完所有依赖后,安装sass的依赖包: npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 然后在build文件夹下的webpack.base.conf.js的rules里面添加配置: { test: /\.sass$/, loaders: ['style',

  • vue中render函数的使用详解

    render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. render方法的实质就是生成template模板: 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的: 通过这三个参数,可以生成一个完整的模板 官网实例 //未使用render函数 Vue.component('anchored-heading', { template: '#anchor

  • 浅谈在vue项目中如何定义全局变量和全局函数

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu

  • 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.proto

  • vue发送websocket请求和http post请求的实例代码

    先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • vue递归组件实战之简单树形控件实例代码

    1.递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"><!--节点内容--> <div class="expand-

  • vue中使用element-ui进行表单验证的实例代码

    vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • vue elementUI table 自定义表头和行合并的实例代码

    最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header

  • Vue商品控件与购物车联动效果的实例代码

    本篇我们将构建商品控件与购物车联动. 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写. <template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul> <!--专场--> <li class="

  • vue中子组件向父组件传递数据的实例代码(实现加减功能)

    这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

  • vue中用H5实现文件上传的方法实例代码

    整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def

随机推荐