add axios

package.json

@@ -13,6 +13,7 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "ace-builds": "^1.15.2",
+    "axios": "^1.3.3",
     "clipboard": "^2.0.11",
     "element-plus": "^2.2.30",
     "html2canvas": "^1.4.1",

src/App.vue

 <script setup>
-import { reactive, toRefs, onMounted } from "vue"
-import cw from './components/componentWrapper.vue'
+import { ref, reactive, toRefs, onMounted } from "vue";
+import cw from "./components/componentWrapper.vue";
 
 onMounted(() => {
-  const nav = document.querySelector('.nav')
-  const container = document.querySelector('.container')
-  const navHeight = nav.offsetHeight
-  container.style.marginTop = navHeight + 'px'
-
-  nav.addEventListener('click', (e) => {
-    const el = e.target
-    if (el.tagName === 'LI') {
-      const topDistance = document.querySelector(el.getAttribute('data-id')).offsetTop - navHeight
-      window.scrollTo(0, topDistance)
+  const nav = document.querySelector(".nav");
+  const container = document.querySelector(".container");
+  const navHeight = nav.offsetHeight;
+  container.style.marginTop = navHeight + "px";
+
+  nav.addEventListener("click", (e) => {
+    const el = e.target;
+    if (el.tagName === "LI") {
+      const topDistance = document.querySelector(el.getAttribute("data-id")).offsetTop - navHeight;
+      window.scrollTo(0, topDistance);
     }
-  })
-})
-
+  });
+});
 
 // bg-btns
 const btns = reactive({
-  options: [{ name: 'hello', value: 'hello' }, { name: 'world', value: 'world' }],
-  currentValue: 'hello'
-})
+  options: [
+    { name: "hello", value: "hello" },
+    { name: "world", value: "world" },
+  ],
+  currentValue: "hello",
+});
 
 // bg-card
 const card = reactive({
-  title: 'title',
-  icon: "#bg-ic-c-s-half-star"
-})
+  title: "title",
+  icon: "#bg-ic-c-s-half-star",
+});
 
 // bg-detail-table
 const detailTable = reactive({
-  data: [{
-    title: "id",
-    url: 'http://127.0.0.1'
-  }],
+  data: [
+    {
+      title: "id",
+      url: "http://127.0.0.1",
+    },
+  ],
   layout: {
-    line_num: 4
-  }
-})
+    line_num: 4,
+  },
+});
 
 const info = reactive({
   // data in template would couse volar error:
@@ -47,33 +51,34 @@ const info = reactive({
   // Message: Request textDocument/formatting failed with message: Overlapping edit
   // Code: -32603
   //
-  data: [{
-    full: false,
-    nameWidth: 120,
-    name: 'Name',
-    copy: undefined,
-    download: undefined,
-    password: undefined,
-    value: 'value!!!',
-    url: 'a url',
-    show: true
-  }, {
-    full: true,
-    nameWidth: undefined,
-    name: 'Name2 with full width',
-    copy: true,
-    download: undefined,
-    password: undefined,
-    value: 'value2!!!',
-    url: 'a url',
-    show: true
-  }]
-})
-
-const { options: btnsOption, currentValue: btnsCurrentValue } = toRefs(btns)
-const { title: cardTitle, icon: cardIcon } = toRefs(card)
-
-
+  data: [
+    {
+      full: false,
+      nameWidth: 120,
+      name: "Name",
+      copy: undefined,
+      download: undefined,
+      password: undefined,
+      value: "value!!!",
+      url: "a url",
+      show: true,
+    },
+    {
+      full: true,
+      nameWidth: undefined,
+      name: "Name2 with full width",
+      copy: true,
+      download: undefined,
+      password: undefined,
+      value: "value2!!!",
+      url: "a url",
+      show: true,
+    },
+  ],
+});
+
+const { options: btnsOption, currentValue: btnsCurrentValue } = toRefs(btns);
+const { title: cardTitle, icon: cardIcon } = toRefs(card);
 </script>
 
 <template>
@@ -115,7 +120,6 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card)
   </ul>
 
   <div class="container">
-
     <cw title="bg-btns">
       <bg-btns :options="btnsOption" v-model="btnsCurrentValue"></bg-btns>
     </cw>
@@ -194,11 +198,20 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card)
       </bg-tabs>
     </cw> -->
     <cw title="bg-tags">
-      <bg-tags value="1, 2, 3, 4" @change="(v) => { console.log(v) }"></bg-tags>
+      <bg-tags
+        value="1, 2, 3, 4"
+        @change="
+          (v) => {
+            console.log(v);
+          }
+        "
+      ></bg-tags>
       <template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template>
     </cw>
     <cw title="bg-upload-image"></cw>
-    <cw title="bg-upload"></cw>
+    <cw title="bg-upload">
+      <!-- <bg-upload :data="upload.data"></bg-upload> -->
+    </cw>
     <cw title="bg-user-upload-image"></cw>
   </div>
 </template>
@@ -226,7 +239,6 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card)
       color: #f00;
     }
   }
-
 }
 
 .container {

yarn.lock

@@ -529,6 +529,20 @@ async-validator@^4.2.5:
   resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
   integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.3.tgz#e7011384ba839b885007c9c9fae1ff23dceb295b"
+  integrity sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 base64-arraybuffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
@@ -570,6 +584,13 @@ clipboard@^2.0.11:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 compute-scroll-into-view@^1.0.20:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
@@ -600,6 +621,11 @@ dayjs@^1.11.3:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.6.tgz#2e79a226314ec3ec904e3ee1dd5a4f5e5b1c7afb"
   integrity sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 delegate@^3.1.2:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
@@ -719,6 +745,20 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -888,6 +928,11 @@ memoize-one@^6.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
   integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
 mime-match@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/mime-match/-/mime-match-1.0.2.tgz#3f87c31e9af1a5fd485fb9db134428b23bbb7ba8"
@@ -895,6 +940,13 @@ mime-match@^1.0.2:
   dependencies:
     wildcard "^1.1.0"
 
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 namespace-emitter@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/namespace-emitter/-/namespace-emitter-2.0.1.tgz#978d51361c61313b4e6b8cf6f3853d08dfa2b17c"
@@ -963,6 +1015,11 @@ prismjs@^1.23.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"