vue3聲明字段名為枚舉的類型詳解
vue3聲明字段名為枚舉類型
下面是Type的枚舉聲明,共有6個(gè)字段
enum Type { ? primary = "primary", ? success = "success", ? warning = "warning", ? warn = "warn", // warning alias ? danger = "danger", ? info = "info", }
TypeScript 中聲明類型的關(guān)鍵字有兩個(gè),interface 和 type,在聲明 key 不確定類型的字段時(shí)稍有不同。
使用 type 進(jìn)行聲明:
type ColorConfig = { ? [key in Type]: Colors; };
使用 interface 卻只能像下面這樣:
interface ColorConfig { ? [key: string]: Colors; }
因?yàn)?interface 的索引只能是基礎(chǔ)類型,類型別名也不可以。而 type 的索引可以是復(fù)合類型。
vue使用提升之"枚舉"應(yīng)用
方式一(適用于簡(jiǎn)易過(guò)濾器中)
// enum.js**文件 /** ?* 獲取枚舉值:STATUSMAP.TTT ?* 獲取枚舉描述:STATUSMAP.getDesc('SH') ?* 通過(guò)枚舉值獲取描述:STATUSMAP.getDescFromValue('TG') ?*/ let STATUSMAP = createEnum({ ? SH: ['SH', '審核中'], ? TG: ['TG', '審核通過(guò)'] }); 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]) || '無(wú)'; ? ? }, ? ? getDescFromValue(value) { ? ? ? return descMap[value] || '無(wú)'; ? ? } ? } } export default STATUSMAP;
view文件
<el-row> ? ?<el-button>枚舉測(cè)試</el-button> ? ?<p>當(dāng)前狀態(tài):{{STATUS.getDescFromValue('SH')}}</p> ? ?<p>也可用通過(guò)枚舉名稱獲取描述:{{STATUS.getDesc('HHH')}}</p> ?</el-row> ?<!-- 過(guò)濾器中使用 則在filters過(guò)濾器中直接使用函數(shù)返回值 -->
方拾二(過(guò)濾器,循環(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>枚舉值過(guò)濾器</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 '無(wú)'; ?? ? ? ? ?} ?? ? ? ? ?return nameMap[key][val];? ?? ? ? ?} ?? ? ?} ?? ?}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中對(duì)watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽(tīng)器,是Vue實(shí)例的一個(gè)屬性,是用來(lái)響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),這個(gè)方式是最有用的,這篇文章主要介紹了Vue中對(duì)watch的理解,需要的朋友可以參考下2022-11-11vue3 ts組合式API異常onMounted is called when&
這篇文章主要為大家介紹了vue3 ts組合式API異常onMounted is called when there is no active component問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解
這篇文章主要介紹了vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12使用vue進(jìn)行Lodop打印的一些常用方法小結(jié)
這篇文章主要給大家介紹了關(guān)于使用vue進(jìn)行Lodop打印的一些常用方法,需要進(jìn)行打印功能,Lodop就是實(shí)現(xiàn)需求的插件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07