代码拉取完成,页面将自动刷新
[toc]
前端常量 枚举工具
本插件是基于 vue-enum 改造而成
安装:npm install const-enum-manag
目录结构:
看了阿里的前端规范,推荐把项目常用的常量抽离出来管理,一想很是不错,可以让代码结构更加清晰
我们可以按如下目录把常量分模块管理(src\constants
)
|constants
|-- index.js
|-- article.js
|-- employee.js
使用案例:
提供了几种写法,选自己喜欢的来
src\constants\index.js
// import { EMPLOYEE_STATUS, EMPLOYEE_ACCOUNT_TYPE } from './employee'
// import { ARTICLE_STATUS, ARTICLE_PUBLISH } from './article'
import * as employee from './employee'
import * as article from './article'
export default {
// ARTICLE_STATUS,
// ARTICLE_PUBLISH,
// EMPLOYEE_STATUS,
// EMPLOYEE_ACCOUNT_TYPE,
...article,
...employee
}
src\constants\article.js
// 与文章 ARTICLE 相关的枚举常量
export const ARTICLE_STATUS = [
{ value: 0, label: '已下架' },
{ value: 1, label: '上架' },
]
export const ARTICLE_PUBLISH = [
{ value: 0, label: '工业大学出版社' },
{ value: 1, label: '农林大学出版社' },
]
src\constants\employee.js
// 与员工 EMPLOYEE 相关的枚举常量
const EMPLOYEE_STATUS = [
{
value: 0,
label: '正常'
},
{
value: 1,
label: '禁用'
},
{
value: 2,
label: '已删除'
}
];
const EMPLOYEE_ACCOUNT_TYPE = [
{
value: 1,
label: 'QQ登录'
},
{
value: 2,
label: '微信登录'
},
{
value: 3,
label: '钉钉登录'
},
{
value: 4,
label: '用户名密码登录'
}
];
export {
EMPLOYEE_STATUS,
EMPLOYEE_ACCOUNT_TYPE
};
src\main.js
import Constant from 'const-enum-manage'
import constatns from './constants/index'
Vue.use(Constant, constatns)
xxx.vue
<template>
<div class="contianer">
<span>- {{$constant.getLabelByValue("EMPLOYEE_STATUS", 1)}} -</span>
<el-select v-model="dataForm.status" placeholder="请选择状态">
<el-option v-for="(item, index) in employeeStatusList" :label="item.label" :value="item.value" :key="item + index"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
dataForm: {
status: "",
},
employeeStatusList: this.$constant.getValueLabelList("EMPLOYEE_STATUS"),
// [{"value":0,"label":"正常"},{"value":1,"label":"禁用"},{"value":2,"label":"已删除"}];
}
},
methods: {},
mounted() {
console.log(this.$constant.getLabelByValue("EMPLOYEE_STATUS", 1))
// 禁用
console.log(this.$constant.getValueLabelList("EMPLOYEE_STATUS"))
// [{"value":0,"label":"正常"},{"value":1,"label":"禁用"},{"value":2,"label":"已删除"}];
console.log(this.$constant.getValueLabel("EMPLOYEE_STATUS"))
// {0: "正常", 1: "禁用", 2: "已删除"}
},
}
</script>
<style lang="scss">
</style>
目前插件提供三个方法
可在全局使用 this.$constant.getLabelByValue() 、this.$constant.getValueLabelList() 、this.$constant.getValueLabel()
调用
根据枚举值获取描述 示例:
在表格渲染时经常遇到需要将状态转换成描述的情况,此时可以使用
let params.row.employeeStatus = 1
this.$constant.getLabelByValue("EMPLOYEE_STATUS", params.row.employeeStatus)
// 禁用
下拉菜单经常需要使用键值对来渲染 select 的 options
[{value:label},{value2:label2}]
<template>
<el-select v-model="dataForm.status" placeholder="请选择状态">
<el-option v-for="(item, index) in employeeStatusList" :label="item.label" :value="item.value" :key="item + index"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
dataForm: {
status: "",
},
employeeStatusList: this.$constant.getValueLabelList("EMPLOYEE_STATUS"),
// [{"value":0,"label":"正常"},{"value":1,"label":"禁用"},{"value":2,"label":"已删除"}];
}
}
}
</script>
根据枚举名获取对应的 value 描述键值对
{value:label}
this.$enum.getValueLabel('SOURCE_IN_TYPE')
// {0: "正常", 1: "禁用", 2: "已删除"}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。