vue3聲明字段名為枚舉的類型詳解

更新時間：2022年09月14日 08:51:25 作者：樓招顏

這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3聲明字段名為枚舉類型

下面是Type的枚舉聲明，共有6個字段

enum Type {
? primary = "primary",
? success = "success",
? warning = "warning",
? warn = "warn", // warning alias
? danger = "danger",
? info = "info",
}

TypeScript 中聲明類型的關(guān)鍵字有兩個，interface 和 type，在聲明 key 不確定類型的字段時稍有不同。

使用 type 進(jìn)行聲明：

type ColorConfig = {
? [key in Type]: Colors;
};

使用 interface 卻只能像下面這樣：

interface ColorConfig {
? [key: string]: Colors;
}

因為 interface 的索引只能是基礎(chǔ)類型，類型別名也不可以。而 type 的索引可以是復(fù)合類型。

vue使用提升之"枚舉"應(yīng)用

方式一（適用于簡易過濾器中）

// 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>當(dāng)前狀態(tài)：{{STATUS.getDescFromValue('SH')}}</p>
? ?<p>也可用通過枚舉名稱獲取描述：{{STATUS.getDesc('HHH')}}</p>
?</el-row>
?<!-- 過濾器中使用 則在filters過濾器中直接使用函數(shù)返回值 -->

方拾二（過濾器，循環(huán)列表）

// order.js文件
/**
?* 定義枚舉值?
?*/
export default {
? order: [
? ? { value: 'TJ', label: '已提交' },
? ? { value: 'CZ', label: '處理中' },
? ? { value: 'CL', label: '已處理' },
? ],
? orderDetail: [
? ? { value: 'DF', label: '待發(fā)貨' },
? ? { value: 'FH', label: '已發(fā)貨' },
? ? { 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', // 發(fā)貨
?? ? ? ?}
?? ? ?},
?? ? ?filters:{
?? ? ? ?filterStatus: function(val, key){
?? ? ? ? ?if(!val && val !== 0){
?? ? ? ? ? ?return '無';
?? ? ? ? ?}
?? ? ? ? ?return nameMap[key][val];?
?? ? ? ?}
?? ? ?}
?? ?}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: