在vue项目中 如何定义全局变量 全局函数

这里写自定义目录标题

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，需要时导入即可

一、变量

/**
 * 坐席常量定义
 */
function MessageConstants () {
}

//Int	1——连接中
// 2——连接成功
// 3——对方挂断
// 4——连接超时
// 5——对方拒接
// 6——来电超时未接
// 7——连接失败
// 8——对方正忙
// 9——对方不在线
MessageConstants.ipVoiceStatusIng = 1//
MessageConstants.ipVoiceStatusSuccess = 2//
MessageConstants.ipVoiceStatusHunp = 3//
MessageConstants.ipVoiceStatusTimeOut = 4//
MessageConstants.ipVoiceStatusRefuse = 5//
MessageConstants.ipVoiceStatusCalltimeoutmissed = 6
MessageConstants.ipVoiceStatusConnectionfailed = 7
MessageConstants.ipVoiceStatusTheotherpartyisbusy = 8
MessageConstants.ipVoiceStatusTheotherpartyisnotonline = 9

export { MessageConstants }

导入使用

  import {MessageConstants} from '../js/MessageConstants';

     //data 语音通话状态
          msgIpVoiceStatus: {
            ipVoiceStatusIng: MessageConstants.ipVoiceStatusIng,//1-连接中
            ipVoiceStatusSuccess: MessageConstants.ipVoiceStatusSuccess,// 2——连接成功
            ipVoiceStatusHunp: MessageConstants.ipVoiceStatusHunp,// 3——对方挂断
            ipVoiceStatusTimeOut: MessageConstants.ipVoiceStatusTimeOut,// 4——连接超时
            ipVoiceStatusRefuse: MessageConstants.ipVoiceStatusRefuse,// 5——对方拒接
            ipVoiceStatusCalltimeoutmissed: MessageConstants.ipVoiceStatusCalltimeoutmissed,// 6——来电超时未接
            ipVoiceStatusConnectionfailed: MessageConstants.ipVoiceStatusConnectionfailed,// 7——连接失败
            ipVoiceStatusTheotherpartyisbusy: MessageConstants.ipVoiceStatusTheotherpartyisbusy,// 8——对方正忙
            ipVoiceStatusTheotherpartyisnotonline: MessageConstants.ipVoiceStatusTheotherpartyisnotonline,// 9——对方不在线

          },

二、方法

定义，导出导入使用，也可以挂载到全局使用

function globalFunc(){}
globalFunc.text1=function(param) {
  console.log("嘻嘻");
}
//获得输入框中字符长度
globalFunc.getStringLength=function(val) {
  var str = new String(val);
  var bytesCount = 0;
  for (var i = 0, n = str.length; i < n; i++) {
    var c = str.charCodeAt(i);
    if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
      bytesCount += 1;
    } else {
      bytesCount += 2;
    }
  }
  return bytesCount;
}
export default {
  // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
  install(Vue,options) {
    Vue.prototype.GlobalFunc = globalFunc;
  }
}

也可以这样写，使用的时候稍微方便一些

/*exports.install = function (Vue, options) {
  Vue.prototype.text1 = function (){//全局函数1
    alert('执行成功1');
  };
  Vue.prototype.text2 = function (){//全局函数2
    alert('执行成功2');
  };
};*/
/*export default{
  install(Vue,options) {
    Vue.prototype.text1 = function () {
      console.log('我是插件中的方法');
    }
  }
}*/

导入到main.js中使用

import Global_func from './Global_func'
Vue.use(Global_func);

使用