vue3+ant design vue 动态加载Icon图标

### Vue3 中 Ant-Design-Vue Tree 组件的自定义用法 在 Vue3 项目中使用 `ant-design-vue` 的 Tree 组件可以实现丰富的树形结构展示功能。为了更好地定制化这些组件，可以通过插槽 (slot) 和属性配置来自定义节点图标和其他样式。 #### 安装并引入 Ant-Design-Vue 首先，在项目根目录下执行命令安装所需的库： ```bash npm install ant-design-vue@next ``` 接着，在入口文件或按需加载的地方导入 Tree 组件及相关依赖项[^1]。 #### 基础设置与数据准备 创建一个基础的数据源用于渲染树状视图，并通过 `v-bind:tree-data` 或缩写形式绑定到组件上。同时指定替换字段名以便于更灵活地映射 JSON 数据中的键值对关系[^2]。 ```javascript const treeNodeData = [ { id: &#39;0-0&#39;, label: &#39;Parent Node 1&#39;, children: [ { id: &#39;0-0-0&#39;, label: &#39;Leaf Node 1&#39; }, { id: &#39;0-0-1&#39;, label: &#39;Leaf Node 2&#39; } ] }, // 更多节点... ]; ``` #### 使用具名插槽添加自定义图标 对于想要修改默认样式的部分，比如展开/折叠按钮或是特定类型的叶子结点前缀标记等，则可通过提供相应名称的 `<template>` 来覆盖原有模板内容。下面的例子展示了如何为不同种类的子元素分配不同的 FontAwesome 图标作为前置装饰。 ```html <template> <a-tree :tree-data="treeNodeData" :replace-fields="{ children: &#39;children&#39;, title: &#39;label&#39;, key: &#39;id&#39; }"> <!-- 展开箭头 --> <template #switcherIcon><icon-font type="caret-right"/></template> <!-- 文件夹类型节点 --> <template v-slot:customTitle="{ node }"> <span v-if="node.isFolder"> <icon-font type="folder"/> {{ node.label }} </span> <span v-else> <icon-font type="file"/> {{ node.label }} </span> </template> <!-- 特定ID的节点 --> <template #[`${specialNodeId}`]="{ node }"> <icon-font type="star"/> Special Item: {{ node.label }} </template> </a-tree> </template> ``` 注意上述代码片段里使用的 `#` 符号是 Vue3 对应旧版 scoped slots (`v-slot`) 的简化语法；而 `${...}` 表达式允许动态决定要应用哪个插槽位置。 #### 功能增强：拖拽支持与事件处理 为了让用户体验更加友好，还可以开启拖放交互特性并通过监听器捕获用户的操作行为作出响应。这通常涉及到注册回调函数至如 `@drop`, `@right-click` 这样的钩子上来完成逻辑控制。 ```html <a-tree draggable @drop="onDropHandler"></a-tree> <script setup lang="ts"> import { defineComponent, ref } from &#39;vue&#39;; export default defineComponent({ methods: { onDropHandler(info) { console.log(&#39;Dropped:&#39;, info); // 实现具体的移动逻辑 } } }); </script> ```