Merge branch 'antd-vue3' into vue3-vant

Author: shangbin

package-lock.json

@@ -25,6 +25,7 @@
     "@element-plus/icons": "0.0.11",
     "@vitejs/plugin-vue": "^1.10.0",
     "@vue/compiler-sfc": "^3.2.22",
+    "ant-design-vue": "^3.0.0-alpha.14",
     "axios": "^0.21.4",
     "codemirror-editor-vue3": "^0.2.4",
     "copy-to-clipboard": "^3.3.1",

package.json

@@ -52,7 +52,7 @@
 
     <div style="overflow:scroll;padding:0 10px;">
       <keep-alive>
-        <component :is="currentSelectBrand.componentName" @mounted='onMouted'></component>
+        <component :is="currentSelectBrand.componentName" @mounted='onMouted(currentIndex)'></component>
       </keep-alive>
     </div>
 
@@ -99,6 +99,14 @@ export default {
       }, {
         icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/quasar-n.png'),
         enable: false
+      }, {
+        icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/antd-n.svg'), // 组件库导航图标
+        clickCallback: this.onSelectElement, // 图标点击回调
+        className: "demonstration-antd", // 组件索引标题class。用来搜集标题供快速导航
+        selectIndex: 0, // 默认选中基础组件索引
+        componentName: 'antd', // 动态组件名称
+        enable: true, // 是否可用
+        titleArray: [], // 快速索引标题，默认为空，VCC会自动按照className搜集快速索引标题。
       },],
 
       currentIndex: 0
@@ -145,9 +153,8 @@ export default {
       }
     },
 
-    onMouted() {
-      // 这里目前只支持ele，所以只写了1
-      this.initOnly(this.iconArray[1]);
+    onMouted(index) {
+      this.initOnly(this.iconArray[index]);
     },
 
     selectSubnav(obj, index) {
@@ -159,6 +166,9 @@ export default {
       this.initOnly(this.iconArray[0]);
     },
 
+    /**
+     * 初始化组件导航栏，只有2个及以上的组件类才会出现
+     */
     initOnly(mountedObject) {
       const titles = document.getElementsByClassName(mountedObject.className);
 
@@ -210,6 +220,7 @@ export default {
     // iview,
     // quasar,
     ele: defineAsyncComponent(() => import("../rawComponents/element/index.vue")),
+    antd: defineAsyncComponent(() => import("../rawComponents/antd"))
   },
 
 };

src/assets/logo/antd-n.svg

@@ -12,9 +12,13 @@ import {
 import "element-plus/dist/index.css";
 import APP from "./App.vue";
 
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+
 function createBaseApp(renderComponent = {}) {
   const app = createApp(renderComponent);
   app.use(ElementPlus);
+  app.use(Antd);
 
   app.component("question-filled", QuestionFilled);
   app.component("circle-plus", CirclePlus);