欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年09月14日 08:51:25   作者:樓招顏  
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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屬性)

    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-11
  • vue3 ts組合式API異常onMounted is called when there is no active component解決

    vue3 ts組合式API異常onMounted is called when&

    這篇文章主要為大家介紹了vue3 ts組合式API異常onMounted is called when there is no active component問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解

    vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解

    這篇文章主要介紹了vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-05-05
  • 詳解Vue適時(shí)清理keepalive緩存方案

    詳解Vue適時(shí)清理keepalive緩存方案

    說(shuō)到Vue緩存,我們肯定首先選擇官方提供的緩存方案keep-alive,本文主要介紹了詳解Vue適時(shí)清理keepalive緩存方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vite打包靜態(tài)文件打開顯示空白的解決

    vite打包靜態(tài)文件打開顯示空白的解決

    本文主要介紹了vite打包靜態(tài)文件打開顯示空白的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • vue中v-if和v-show使用區(qū)別源碼分析

    vue中v-if和v-show使用區(qū)別源碼分析

    這篇文章主要為大家介紹了vue中v-if和v-show使用區(qū)別源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例

    vue與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é)

    使用vue進(jìn)行Lodop打印的一些常用方法小結(jié)

    這篇文章主要給大家介紹了關(guān)于使用vue進(jìn)行Lodop打印的一些常用方法,需要進(jìn)行打印功能,Lodop就是實(shí)現(xiàn)需求的插件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • Vue中的ESLint配置方式

    Vue中的ESLint配置方式

    這篇文章主要介紹了Vue中的ESLint配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue 2.0 偵聽(tīng)器 watch屬性代碼詳解

    Vue 2.0 偵聽(tīng)器 watch屬性代碼詳解

    這篇文章主要介紹了Vue 2.0 偵聽(tīng)器 watch屬性代碼詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-06-06

最新評(píng)論