集成Antd Button

package-lock.json

@@ -2297,7 +2297,7 @@
     },
     "ant-design-vue": {
       "version": "1.7.8",
-      "resolved": "https://r.cnpmjs.org/ant-design-vue/download/ant-design-vue-1.7.8.tgz",
+      "resolved": "https://rg.cnpmjs.org/ant-design-vue/download/ant-design-vue-1.7.8.tgz",
       "integrity": "sha1-Grv4a2ik9bEAC+oEh7gDHcAAFmE=",
       "requires": {
         "@ant-design/icons": "^2.1.1",

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@babel/parser": "^7.11.5",
-    "ant-design-vue": "^1.7.2",
+    "ant-design-vue": "^1.7.8",
     "axios": "^0.21.4",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",

src/assets/logo/antd-n.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>Vue</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#0F78FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
+            <stop stop-color="#FA8E7D" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(19.000000, 9.000000)">
+            <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
+            <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+            <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
+        </g>
+    </g>
+</svg>

src/components/RawComponents.vue

@@ -50,7 +50,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>
 
@@ -62,6 +62,7 @@
 // import quasar from "../rawComponents/quasar";
 import raw from "../rawComponents/raw";
 import ele from "../rawComponents/element";
+import antd from "../rawComponents/antd";
 
 export default {
   data() {
@@ -92,6 +93,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: 1
@@ -138,9 +147,8 @@ export default {
       }
     },
 
-    onMouted() {
+    onMouted(index) {
-      // 这里目前只支持ele，所以只写了1
+      this.initOnly(this.iconArray[index]);
-      this.initOnly(this.iconArray[1]);
     },
 
     selectSubnav(obj, index) {
@@ -212,6 +220,7 @@ export default {
     // iview,
     // quasar,
     ele,
+    antd
   },
 
 };

src/map/style.index.js

@@ -1 +1 @@
-export default {".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader ::v-deep .el-upload":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;","::v-deep .van-tabbar--fixed":"position: initial;","::v-deep .van-address-list__bottom":"position: initial;","::v-deep .van-goods-action":"position: initial;","::v-deep .van-submit-bar":"position: initial;"}
+export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader ::v-deep .el-upload":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;","::v-deep .van-tabbar--fixed":"position: initial;","::v-deep .van-address-list__bottom":"position: initial;","::v-deep .van-goods-action":"position: initial;","::v-deep .van-submit-bar":"position: initial;"}

src/rawComponents/antd/button.vue

@@ -0,0 +1,47 @@
+<template lc_id="YNC0Scb/Nu">
+  <div lc_id="pN7LcslOJR">
+    <div lc_id="jr3zjZhDqz">
+      <div class="demonstration-antd" lc_id="fRuphkeIKC">Button 按钮</div>
+      <div lc_id="k+t156NFRt">
+        <a-button type="primary" lc-mark lc_id="NT+hTWS70C">Primary</a-button>
+        <a-button lc-mark lc_id="H0OdlntRuU">Default</a-button>
+        <a-button type="dashed" lc-mark lc_id="HfCkDXAjeL">Dashed</a-button>
+        <a-button type="danger" lc-mark lc_id="E40JXI4Cy0">Danger</a-button>
+        <a-config-provider :auto-insert-space-in-button="false" lc-mark lc_id="oyVejV1NjF">
+          <a-button type="primary" lc_id="2FflgjN2k0">按钮</a-button>
+        </a-config-provider>
+        <a-button type="primary" lc-mark lc_id="tyIuitGX1x">按钮</a-button>
+        <a-button type="link" lc-mark lc_id="4heYqBMoxv">Link</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [],
+  components: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  computed: {},
+  beforeCreate() { },
+  created() { },
+  beforeMount() { },
+  mounted() { },
+  beforeUpdate() { },
+  updated() { },
+  destoryed() { },
+  methods: {
+    request() { },
+    onButtonClick() { },
+  },
+  fillter: {},
+}  
+</script>
+
+<style scoped>
+.container {
+}
+</style>

src/rawComponents/antd/index.vue

@@ -0,0 +1,71 @@
+<!-- 组件引导文件 -->
+<template>
+  <div class="antd-class">
+    <a-button></a-button>
+  </div>
+</template>
+
+<script>
+import button from './button.vue';
+import { deepLCEle } from "@/utils/initRawComponent";
+
+export default {
+  props: [],
+  components: {
+    AButton: button
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  computed: {},
+  beforeCreate() { },
+  created() { },
+  beforeMount() { },
+  mounted() {
+    this.$emit('mounted');
+    // 对所有拥有lc-mark的元素进行初始化
+    deepLCEle(document.querySelector('.antd-class'), () => {
+    });
+  },
+  beforeUpdate() { },
+  updated() { },
+  destoryed() { },
+  methods: {
+    request() { },
+    onButtonClick() { },
+  },
+  fillter: {},
+}
+</script>
+
+<style>
+.demonstration-antd {
+  font-size: 12px;
+  color: #1f2f3d;
+  padding: 10px 0 10px 0;
+  vertical-align: middle;
+}
+
+.demonstration-antd::before {
+  content: "";
+  background-color: #4dba87;
+  display: inline-block;
+  height: 1em;
+  margin-right: 4px;
+  width: 3px;
+  border-radius: 2px;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+
+.demonstration-antd::after {
+  content: " :";
+  font-weight: 600;
+}
+
+.antd-class [lc-mark] {
+  margin-bottom: 10px;
+}
+</style>

src/script/compile.js

@@ -14,7 +14,7 @@ glob(
   {
     cwd: componentsPath,
     absolute: true,
-    ignore: ["**/element/index.vue", "**/vant/index.vue", "**/iview/index.vue"],
+    ignore: ["**/element/index.vue", "**/vant/index.vue", "**/iview/index.vue", "**/antd/index.vue"],
   },
   function (er, files) {
     console.info(`正在对${files.length}个文件进行编译...`);