vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)

<template>
  <component
    v-model="value"
    :is="fontFamilyList.component"
    v-bind="fontFamilyList"
  >
    <template v-if="fontFamilyList.options">
      <component
        :is="fontFamilyList.subComponent"
        v-for="(option, k) in fontFamilyList.options"
        :key="k"
        :label="option.label"
        :value="option.value"
      >
        <RenderVnode :vNode="option.text" />
      </component>
    </template>
  </component>
</template>

<script setup lang="ts">
import { ref } from "vue";
import RenderVnode from "./RenderVnode";
import { fontFamilyOptions } from "./fontFamily";

const fontFamilyList = {
  clearable: true,
  placeholder: "请选择字体",
  component: "el-select",
  subComponent: "el-option",
  options: [...fontFamilyOptions],
};

const value = ref("");
</script>

import type { VNode } from "vue";
const fontFamilyArr = [
  { text: "宋体", value: '"SimSun","STSong"' },
  { text: "黑体", value: '"SimHei","STHeiti"' },
  { text: "楷体", value: '"KaiTi","STKaiti"' },
  { text: "仿宋", value: '"FangSong","STFangsong"' },
];
export const fontFamilyOptions = fontFamilyArr.map((font) => {
  return {
    value: font.value,
    label: font.text,
    // 此处语法为 JSX
    text: (
      <span style={{ fontFamily: font.value }}>{font.text}</span>
    ) as VNode,
  };
});

import { defineComponent } from "vue";

const RenderVnode = defineComponent({
  props: {
    vNode: {
      type: [Object, String],
      required: true,
    },
  },
  render() {
    return this.vNode;
  },
});

export default RenderVnode;