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 中声明类型的关键字有两个,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]; 
        }
      }
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    最近遇到了个需求是使用element-ui插件编写页面,点击按钮,弹出对话框,这篇文章主要给大家介绍了关于Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue3异步数据加载组件suspense的使用方法

    Vue3异步数据加载组件suspense的使用方法

    前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,这篇文章主要给大家介绍了关于Vue3异步数据加载组件suspense的使用方法,suspense中文含义是悬念的意思,需要的朋友可以参考下
    2021-08-08
  • Vuex实现数据共享的方法

    Vuex实现数据共享的方法

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了Vuex实现数据共享的方法,需要的朋友可以参考下
    2019-12-12
  • Vue3将虚拟节点渲染到网页初次渲染详解

    Vue3将虚拟节点渲染到网页初次渲染详解

    这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue3实现粒子动态背景的示例详解

    Vue3实现粒子动态背景的示例详解

    这篇文章主要为大家详细介绍了如何利用Vue3实现粒子动态背景,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-11-11
  • vue 组件数据加载解析顺序的详细代码

    vue 组件数据加载解析顺序的详细代码

    Vue.js的解析顺序可以概括为:模板编译、组件创建、数据渲染、事件处理和生命周期钩子函数执行,接下来通过本文给大家介绍vue 组件数据加载解析顺序的完整代码,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 关于electron-vue打包后运行白屏的解决方案

    关于electron-vue打包后运行白屏的解决方案

    这篇文章主要介绍了关于electron-vue打包后运行白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3+vueuse实现放大镜示例详解

    Vue3+vueuse实现放大镜示例详解

    这篇文章主要为大家介绍了Vue3+vueuse实现放大镜示例过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue保持用户登录状态(各种token存储方式)

    Vue保持用户登录状态(各种token存储方式)

    本文主要介绍了Vue保持用户登录状态(各种token存储方式),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue在图片上传的时候压缩图片

    vue在图片上传的时候压缩图片

    这篇文章主要介绍了vue在图片上传的时候压缩图片,帮助大家缓解服务器压力,提高程序性能,感兴趣的朋友可以了解下
    2020-11-11

最新评论