一次偶然的机会我把鼠标放在属性某个标签的属性上的时候, 会显示枚举出来的属性:

那么要如何实现这样的功能呢 ? 诸君请看 🚨

无效的方法:

我之前在github上的vue/core.js的issue中看到一条, 是通过添加枚举类的方法, 但是没有成功, 失败案例如下:

Typescript版

你是否纠结于如何在props中设置一个属性类型为枚举，比如下面这个枚举:

enum SIZE {
  LARGElarge',
  MEDIUM = 'medium',
  SMALL = 'small',
}

define props:

import { defineProps } from 'vue'

const props = defineProps<{ size: SIZE }>()

  pros.size  //  size: SIZE

如果你需要默认值:

import { defineProps, withDefaults } from 'vue'

const props = withDefaults(defineProps<{ size: SIZE }>(), { size: SIZE.MEDIUM })

props.size   //  size: SIZE

console.log(props.size)
//  medium

JavaScript版

下面的方式一样不会提示

<template>
  <!-- Your template code here -->
</template>

<script>
// 定义一个对象来模拟枚举
const SIZE = {
  LARGE: 'large',
  MEDIUM: 'medium',
  SMALL: 'small',
};

// 导入Vue相关函数
import { defineComponent, defineProps, withDefaults } from 'vue';

const props = defineProps({
  props: {
    size: {
      type: String,
      // 使用对象的键进行验证
      validator: (value) => Object.values(SIZE).includes(value),
      default: SIZE.MEDIUM,
    },
  },
});
</script>

方法一：

<template>
  <div>
    <!-- 使用size属性的地方 -->
  </div>
</template>

<script lang="js" setup>
  import { ref, defineProps } from 'vue';

  // 类型别名模拟枚举
  /**
 * @typedef {'large'|'default'|'small'} SizeType
 */
  
  // 定义Props类型
  const props = defineProps({
    /**
   * @type {SizeType}
   * @default 'default'
   */
    size: {
      type: String,
      default: 'default',
      // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
      validator: (value) => ['large', 'default', 'small'].includes(value),
    },
  });

  // 使用props
  const sizeValue = props.size; // IDE应能基于JSDoc提示size的有效值
</script>

此时当你把鼠标放在属性size上面就会显示提示:

并且当你敲下size=""之后也会提示可选项

---

或者

直接只在size属性上添加两个@注解即可, 这样同样有提示

/**
   * @type {'small'|'default'|'large'}
   * @default 'default'
 */
size: {
  type: String,
    default: 'default',
    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
    validator: (value) => ['large', 'default', 'small'].includes(value),
},

是不是很好用 !!!!!!!!!!!!!! 体验感瞬间爆棚!!!