vue3声明字段名为枚举的类型详解
作者：楼招颜
这篇文章主要介绍了vue3声明字段名为枚举的类型方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3声明字段名为枚举类型
下面是Type的枚举声明，共有6个字段
enum Type {
primary = "primary",
success = "success",
warning = "warning",
warn = "warn", // warning alias
danger = "danger",
info = "info",
}TypeScript 中声明类型的关键字有两个，interface 和 type，在声明 key 不确定类型的字段时稍有不同。
使用 type 进行声明：
type ColorConfig = {
[key in Type]: Colors;
};使用 interface 却只能像下面这样：
interface ColorConfig {
[key: string]: Colors;
}因为 interface 的索引只能是基础类型，类型别名也不可以。而 type 的索引可以是复合类型。
vue使用提升之"枚举"应用
方式一（适用于简易过滤器中）
// enum.js**文件
/**
* 获取枚举值：STATUSMAP.TTT
* 获取枚举描述：STATUSMAP.getDesc('SH')
* 通过枚举值获取描述：STATUSMAP.getDescFromValue('TG')
*/
let STATUSMAP = createEnum({
SH: ['SH', '审核中'],
TG: ['TG', '审核通过']
});
function createEnum(definition) {
const valueMap = {};
const descMap = {};
for (const key of Object.keys(definition)) {
const [value, desc] = definition[key];
valueMap[key] = value;
descMap[value] = desc;
}
return {
...valueMap,
getDesc(key) {
return (definition[key] && definition[key][1]) || '无';
},
getDescFromValue(value) {
return descMap[value] || '无';
}
}
}
export default STATUSMAP;view文件
<el-row>
<el-button>枚举测试</el-button>
<p>当前状态：{{STATUS.getDescFromValue('SH')}}</p>
<p>也可用通过枚举名称获取描述：{{STATUS.getDesc('HHH')}}</p>
</el-row>
<!-- 过滤器中使用 则在filters过滤器中直接使用函数返回值 -->方拾二（过滤器，循环列表）
// order.js文件
/**
* 定义枚举值
*/
export default {
order: [
{ value: 'TJ', label: '已提交' },
{ value: 'CZ', label: '处理中' },
{ value: 'CL', label: '已处理' },
],
orderDetail: [
{ value: 'DF', label: '待发货' },
{ value: 'FH', label: '已发货' },
{ value: 'QS', label: '已签收' },
]
}// constants.js文件
/**
* 定义枚举工具
*
*/
import order from './order/index.js';
let constants = {
...order
};
let valueMap = {};
let nameMap = {};
Object.keys(constants).forEach(key => {
valueMap[key] = [];
nameMap[key] = {};
constants[key].forEach(event => {
valueMap[key].push(event);
nameMap[key][event.value] = event.label;
});
});
export {
valueMap,
nameMap
}/**
* view文件
*/
<template>
<h3>枚举值用于展示</h3>
<el-row>
<el-button v-for="(item, index) in valueMap.order" :key="index">{{item.label}}</el-button>
</el-row>
<h3>枚举值过滤器</h3>
<el-row>
<el-button>{{enumValue | filterStatus('orderDetail')}}</el-button>
</el-row>
</template>
<script>
import { valueMap, nameMap } from '@/constants';
export default {
data() {
return {
STATUS: STATUS,
valueMap,
enumValue: 'FH', // 发货
}
},
filters:{
filterStatus: function(val, key){
if(!val && val !== 0){
return '无';
}
return nameMap[key][val];
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。