vue3-09

菜单图标

安装图标依赖

npm install @ant-design/icons-vue

菜单中使用图标

• 图标组件没有全局绑定，需要 import 之后才能使用

• 用 插槽，才能确定图标展示的位置（菜单文字之前）

二次封装图标组件

最终希望用统一的图标组件去使用图标，图标名只是作为一个属性值传递进去，例如：

使用者

方法1，使用 vue 组件

• 缺点：实现太笨

方法2，使用函数式组件

import { h } from "vue";
import * as Icons from "@ant-design/icons-vue";

interface Module {
  [p: string]: any;
}

// 参数1: 组件属性
const AIcon = (props: { icon: string }) => {
  // console.log(props.icon)
  // console.log(Icons)
  // 参数1: 组件对象
  const im: Module = Icons;
  return h(im[toCamelCase(props.icon)]);
};

export default AIcon;

// 将-分隔的单词转换为大驼峰命名的单词
function toCamelCase(str: string) {
  // highlight-outlined
  return str
    .split("-") // ['highlight', 'outlined']
    .map((e) => e.charAt(0).toUpperCase() + e.slice(1)) // ['Highlight', 'Outlined']
    .join("");
}
/*
Icons 的结构如下
{
  HighlightOutlined: HighlightOutlined组件对象,
  MonitorOutlined: MonitorOutlined组件对象,
  ...
}
*/

• 需要动态生成标签的时候，可以考虑使用函数式组件

方法3，使用 jsx 组件

首先，安装

npm install @vitejs/plugin-vue-jsx -D

配置 vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
});

编写一个 Hi.tsx 组件

export default {
  props: {
    msg: String
  },
  setup(props: { msg: string }) {
    return () => 
{props.msg}
  }
}

然后被其它组件使用

用 jsx 实现图标组件

import * as Icons from '@ant-design/icons-vue'

interface Module {
  [p:string]: any
}

function toCamelCase(str: string) { // highlight-outlined
  return str
    .split("-") // ['highlight', 'outlined']
    .map((e) => e.charAt(0).toUpperCase() + e.slice(1)) // ['Highlight', 'Outlined']
    .join(""); // HighlightOutlined
}

export default {
  props: {
    icon: String
  },
  setup(props: {icon: string}) {
    const im: Module = Icons
    const tag = im[toCamelCase(props.icon)] // 图标组件
    // HighlightOutlined
    return ()=>  // 返回组件标签
  }
}