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

news/2024/7/3 0:19:46

这里写自定义目录标题

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

设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用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);

使用
在这里插入图片描述


http://www.niftyadmin.cn/n/4204512.html

相关文章

Unity定时器

需求是在项目中&#xff0c;会遇到很多倒计时功能&#xff0c;比如在线时间奖励&#xff0c;pve活动间隔5分钟 总结常见解决方法有三种 1.Update()每帧检查&#xff0c;适合用于界面上显示具体的数值&#xff0c;这是了准确性。在用户体验倒计时是最好的选择。 2.this.Invoke( …

编写高性能 Web 应用程序的10个技巧

常见的 ASP.NET 性能神话 有用的 ASP.NET 性能技巧和诀窍 在 ASP.NET 中处理数据库的一些建议 缓冲以及用 ASP.NET 进行后台处理 本文使用下列技术&#xff1a;ASP.NET&#xff0c;.NET 框架&#xff0c;IIS   用 ASP.NET 编写 Web 应用程序其轻松程度令人难以置信。它是…

java语言编程的风格_什么是良好的编程风格(Java编程)

展开全部Java编程风格与命名规范整理基本命名规范1.包命名包名按照域名的范围从e69da5e887aa62616964757a686964616f31333431353963大到小逐步列出&#xff0c;恰好和Internet上的域名命名规则相反。由一组以“。”连接的标识符构成&#xff0c;通常第一个标识符为符合网络域名…

vue.js中实现在弹框外有鼠标点击事件时隐藏弹框

mounted() {// 监听页面的点击事件&#xff0c;如果鼠标在pop弹出框和按钮外点击&#xff0c;那么让弹出框不显示document.onclick () > {let e e || window.event;let elem e.srcElement || e.target;while (elem) {if (elem.id "headerSearch" || elem.id …

C#中的IDisposable模式用法详解

篇文章主要介绍了C#中的IDisposable模式用法,讲述了垃圾资源回收机制的实现,并对比分析了Dispose()方法、~DisposableClass()析构函数、虚方法Dispose(bool disposing)的原理,需要的朋友可以参考下本文实例讲述了C#中IDisposable模式的用法&#xff0c;针对垃圾资源的回收进行了…

java属于面相_Java面试笔试之面相对象技术(一)

一、基本概念1.1 面相对象的三大特性继承、封装、多态。(1)继承&#xff1a;继承是一种联结类的层次模型&#xff0c;并且允许和鼓励类的重用&#xff0c;它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生&#xff0c;这个过程称为类继承。新类继承了原始类…

vue中elementui command绑定变量对象方法

需求&#xff1a;点击下拉框&#xff0c;切换组&#xff0c;选中当前项 <el-dropdown trigger"click" class"child-controllerChild"command"(command) >handleDispatchTabClickBoxCommand(command)"><img class"child-iconAnd…

浮动图片(JS)

代码作用&#xff1a;鼠标上移到图片上时&#xff0c;图片浮动显现&#xff0c;就像是Apple的浮动菜单一样的效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&l…