vue2--如何创建/全局变量(枚举变量)

前端小趴菜的成长记录

已于 2023-05-25 14:21:26 修改

阅读量1.9k

点赞数

分类专栏： Vue2 文章标签： javascript vue.js 前端

于 2023-02-17 10:50:13 首次发布

本文链接：https://blog.csdn.net/weixin_47434590/article/details/129080477

版权

Vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了两种在Vue项目中创建并使用全局枚举数据的方法。第一种是创建util/enum-data.js文件，导出包含订单状态、性别、关系和证件类型的枚举，然后在main.js中注入全局变量。第二种方法是在main.js中直接引入枚举数据，并与其它全局对象合并。这两种方法都允许在项目各处便捷地使用这些枚举值。

摘要由CSDN通过智能技术生成

1.创建 util/enum-data.js

import Vue from 'vue'

// 订单状态
export const PolicyStatus = {
  waitActivate: '待激活',
  examinePass: '核保通过',
  examineFail: '核保未通过',
  generating: '生成中',
  generateFail: '出单失败',
  unEffective: '已失效',
  surrender: '已退保',
  effective: '已生效',
  preEffective: '待生效',
  partEffective: '部分生效',
  cancelOrder: '已撤单',
  other: '其他',
  theClose: '已关闭',
}

// 性别
export const GenderStatus = {
  'male': '男',
  'female': '女',
  'unknown': '未知',
  'unstate': '未说明'
}

// 关系
export const RelationStatus = {
  oneself: '本人',
  parent: '父母',
  spouse: '配偶',
  children: '子女',
  legalGuardian: '法定监护人',
  other: '其他'
}

// 证件类型 columns
export const CertifyTypeColumns = [
  { type: 'identityCard', text: '身份证' },
  { type: 'familyRegister', text: '户口本' },
  { type: 'passport', text: '护照' },
  // { type: 'officerCard', text: '军官证' },
  { type: 'HongKongMacaoAndTaiwanPass', text: '港澳台通行证' },
  { type: 'TaiWanPass', text: '台湾居民居住证' },
  { type: 'otherIdentityCard', text: '外国人永久居住身份证' }
]

// 全局状态汇总 
const GlobalStatus = {
  PolicyStatus,
  GenderStatus,
  RelationStatus,
  CertifyTypeColumns
}

// 第一种方法: 集体导出 并注入到全局变量
window.GlobalStatus = Vue.prototype.$GlobalStatus = GlobalStatus
export default GlobalStatus

2.在main.js中引入

// 第一种方法: 
import '@/util/enum-data' // 注入全局变量状态

3.页面中使用

// 第一种方法: 
columns: window.GlobalStatus.CertifyTypeColumns
columns: this.$GlobalStatus.CertifyTypeColumns

二、第二种注入方法,直接在main.js入口文件中引入

import router from './router'
import $consts from "@/config"
import * as $enum from '@/utils/enum-data'

const merge = { $consts, $enum }
Object.assign(window, merge, { $router: router })
Vue.use({ install: (v) => Object.assign(v.prototype, merge) })


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')