feat:更新
This commit is contained in:
dengtongyu committed
1 parent
5bc01ab257
commit
caf4fd2b86
55 files changed
+2666
-210
No files matched your search
@@ -1,3 +1,3 @@
|
|||||||
VITE_APP_NAME=vue3学习项目
|
VITE_APP_NAME=vue3培训学习项目
|
||||||
|
|
||||||
APP_PROXY_TARGET=https://xtbg.gdzwfw.gov.cn
|
APP_PROXY_TARGET=https://xtbg.gdzwfw.gov.cn
|
||||||
Generated
+1591
-7
File diff suppressed because it is too large.
Load diff
@@ -24,6 +24,7 @@
|
|||||||
"@rushstack/eslint-patch": "^1.3.3",
|
"@rushstack/eslint-patch": "^1.3.3",
|
||||||
"@tsconfig/node18": "^18.2.2",
|
"@tsconfig/node18": "^18.2.2",
|
||||||
"@types/node": "^18.18.5",
|
"@types/node": "^18.18.5",
|
||||||
|
"@vitejs/plugin-legacy": "^5.2.0",
|
||||||
"@vitejs/plugin-vue": "^4.4.0",
|
"@vitejs/plugin-vue": "^4.4.0",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||||
"@vue/eslint-config-prettier": "^8.0.0",
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
@@ -36,6 +37,7 @@
|
|||||||
"prettier": "^3.0.3",
|
"prettier": "^3.0.3",
|
||||||
"typescript": "~5.2.0",
|
"typescript": "~5.2.0",
|
||||||
"vite": "^4.4.11",
|
"vite": "^4.4.11",
|
||||||
|
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||||
"vue-tsc": "^1.8.19"
|
"vue-tsc": "^1.8.19"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -22,6 +22,8 @@ import routes from "@/router/routes";
|
|||||||
import Layout from "./components/Layout.vue";
|
import Layout from "./components/Layout.vue";
|
||||||
import VHeader from "./components/VHeader.vue";
|
import VHeader from "./components/VHeader.vue";
|
||||||
import SideMenu from "./components/SideMenu.vue";
|
import SideMenu from "./components/SideMenu.vue";
|
||||||
|
|
||||||
|
// console.log("SideMenu", SideMenu);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import type { LocationQueryValue } from "vue-router";
|
||||||
|
import pinia from "@/stores/pinia";
|
||||||
|
import { userInfoStore } from "@/stores";
|
||||||
|
import VLoading from "@/components/VLoading.vue";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const user = userInfoStore(pinia);
|
||||||
|
const rediret: LocationQueryValue | LocationQueryValue[] = route.query.rediret;
|
||||||
|
|
||||||
|
user
|
||||||
|
.getUserRequest()
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
if (res && res.userId) {
|
||||||
|
if (rediret)
|
||||||
|
router.replace({
|
||||||
|
path: rediret as string
|
||||||
|
});
|
||||||
|
else router.replace({
|
||||||
|
path: "/"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
router.replace({
|
||||||
|
path: "/noaccess/未能获取您的用户信息"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
router.replace({
|
||||||
|
path: "/noaccess/网络异常"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<VLoading />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg id="a03e5267-f1f6-4982-846a-a1fab3243dfd" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 674.99"><defs><clipPath id="fc2941d7-a3c0-44d9-a2d2-bb94c5fd5cb5" transform="translate(0 0)"><path d="M243.09,336.3,306.81,320s8.16-5.59,19.45,5.59S336.47,339,336.47,339s-6.41,1.12-10.21,0-28.4,9.38-61.93.5Z" fill="none"/></clipPath><clipPath id="ff55ad62-ff5e-48e1-b333-0c980a50b6bc" transform="translate(0 0)"><path d="M426.68,318.61s-11.27,3.92-11.27,6.6c0,2.34,1.22,4.68,7.91,3.83,1-.13,2.11-.33,3.36-.6,9.67-2.15,15.44,4.78,38.05.78s18.32-19.64,18.32-19.64a33,33,0,0,0-28.6-3.69A129.17,129.17,0,0,0,426.68,318.61Z" fill="none"/></clipPath><clipPath id="a6a7a45b-de21-4e5e-b74f-a21ec4090e0e" transform="translate(0 0)"><path d="M24.94,269.1S16.09,111.74,74.12,71.42,138,12.41,209.83,1.59,367.19,38,389.81,54.7,473.4,154,490.12,258.28c0,0,4.92,26.55-4.92,54.09,0,0,15.74,70.81,14.76,110.15S482.25,513,482.25,513s-2,23.61-12.78,36.39-17.7,48.19-17.7,48.19,3.93,40.32-28.52,52.13-53.11,25.57-89.5,21.63S61.33,592.66,71.17,448.09c0,0-41.88,2.88-42.86-21.71,0,0-4.58-7-9.43-11.05S.29,400.78.56,378.42s0-32.6,0-32.6-2.7-19.94,3.77-26.94l4-12.67s1.89-24,10.78-30.18l6.2-2.69Z" fill="none"/></clipPath></defs><path d="M24.94,269.1S16.09,111.74,74.12,71.42,138,12.41,209.83,1.59,367.19,38,389.81,54.7,473.4,154,490.12,258.28c0,0,4.92,26.55-4.92,54.09,0,0,15.74,70.81,14.76,110.15S482.25,513,482.25,513s-2,23.61-12.78,36.39-17.7,48.19-17.7,48.19,3.93,40.32-28.52,52.13-53.11,25.57-89.5,21.63S61.33,592.66,71.17,448.09c0,0-41.88,2.88-42.86-21.71,0,0-4.58-7-9.43-11.05S.29,400.78.56,378.42s0-32.6,0-32.6-2.7-19.94,3.77-26.94l4-12.67s1.89-24,10.78-30.18l6.2-2.69Z" transform="translate(0 0)" fill="#7f4b3c"/><path d="M349.54,407.33c-11.73,8.32-23.7,22.89-22,38.1.74,6.76,4.19,12.64,8.71,17.59.72.79,1.88-.38,1.17-1.17-5.13-5.62-8.68-12.51-8.36-20.27.25-6.07,2.73-11.81,6-16.83a61,61,0,0,1,15.32-16c.86-.61,0-2-.83-1.42Z" transform="translate(0 0)" fill="#3f1b0d"/><path d="M395.48,457.85c3.3,3.9,8.6,6.5,13.53,7.45a28.32,28.32,0,0,0,15.5-1.62c2.32-.9,5.41-2,7.23-3.69a25.81,25.81,0,0,0,2.29-2.92l6.53-8.29c.65-.82-.51-2-1.17-1.17l-5,6.32-3,3.84a10.47,10.47,0,0,1-3.85,2.75c-8.54,4.37-18.53,5.05-26.76-.34a19.23,19.23,0,0,1-4.15-3.49c-.68-.82-1.85.36-1.16,1.16Z" transform="translate(0 0)" fill="#3f1b0d"/><path d="M437.71,449.89s3.71-8.82,10.8-10.48,4.05,6,4.05,6Z" transform="translate(0 0)" fill="#210e07"/><path d="M440.52,392.3c2,.71,4.67,4.1,6.23,5.71a86.28,86.28,0,0,1,10.39,12.88c3.23,5,6.13,10.63,6.68,16.62a28,28,0,0,1-5.13,17.84c-1.28,1.71-3.56,4-5.95,3.71-1.06-.12-1.05,1.54,0,1.65,1.91.22,3.94-1,5.29-2.21,4.48-3.92,6.64-11,7.37-16.69,1.6-12.46-8-24.75-15.93-33.32-1.8-1.95-3.68-3.85-5.67-5.62A10,10,0,0,0,441,390.7c-1-.36-1.43,1.23-.44,1.6Z" transform="translate(0 0)" fill="#3f1b0d"/><path d="M346.64,356.28c-5.31,8.85-13.95,16.31-22.53,21.78-22.25,14.17-49,15.12-73.92,8.41a.83.83,0,0,0-.44,1.6c20.67,5.55,42.71,6.22,62.74-2.11a81.34,81.34,0,0,0,31-22.63,49.37,49.37,0,0,0,4.62-6.22.83.83,0,0,0-1.43-.83Z" transform="translate(0 0)" fill="#3f1b0d"/><path d="M422.61,337a82.26,82.26,0,0,0,12.5,17.36c7.16,7.65,17.47,15,28.47,11.69,8.07-2.4,13.86-9.34,18.27-16.14.58-.89-.85-1.72-1.42-.83-4,6.22-9.28,12.66-16.55,15.15a19.83,19.83,0,0,1-15.27-1.38c-8.83-4.35-15.6-12.61-20.93-20.67-1.29-1.95-2.55-3.95-3.64-6-.5-.94-1.93-.11-1.43.83Z" transform="translate(0 0)" fill="#3f1b0d"/><path d="M466.73,514.37c-31.3-6.72-34.5-7.76-40.86.09s-10.9,6.23-21.35.78-86.17,18.21-86.17,18.21,32,4.38,45,.75S404.71,536,404.71,536A71.33,71.33,0,0,0,425,531.06s3.06-8.54,20.5-11.26S466.73,514.37,466.73,514.37Z" transform="translate(0 0)" fill="#703a37"/><path d="M459.89,517s-2.11,7.86-21.6,24-75,12-77.7,7.49-42.24-15-42.24-15,24.74,5.63,57.6-1.16c0,0,7.9-1.82,32.39,3.18,0,0,9.08.18,21.08-10.77C429.42,524.7,431.05,522.15,459.89,517Z" transform="translate(0 0)" fill="#94625a"/><path d="M363.82,550.61s18.83,9.38,19,9.39h-.2s-2.47,7,2.94,6.6c0,0,2.22,3.37,7.7,3.52,0,0,2.26,4.09,10.89,3.66s17.07-9.09,17.07-9.09,8.36-2.67,9.25-6.68,6-11.54,6-14.83-10.79,7.92-33.35,9c-27.26,1.35-38.41-1.36-38.41-1.36" transform="translate(0 0)" fill="#210e07"/><path d="M332.79,673.21s-63.52-18.1-57.42-94c0,0,11.11,21.61,21.65,21.61s14.44,25.41,14.44,25.41,11.26,5,19.1,0c0,0,3.92-8.7,9.58-6.87s6.75,9.4,12,8.48,7.06-6.88,11.7-.46,9.21-1.15,9.21-1.15,7.63-12.37,13.07-6.64,3,11.92,7.19,9.17,1.53-9.17,4.14-9.63,10-4.13,12.64,3.9c0,0,3.26-8.25,6.09-6.65s6.1-.69,7.85,5.27c0,0,5-2.06,5.88-6s1.52-9.17,3.48-8,3.71-.92,5,5.73-1.84-.69-1.84-.69a17.24,17.24,0,0,0,9.9-8.94l5.88-10.08s3.49,9.63,1.53,14.67-4.79,7.1-4.79,7.1,1.3,6.19.43,8.94-5.66,5.5-5.66,5.5,2,6.88-1.74,7.57-1.35-.46-1.35-.46,2.22,3.9-1.27,3.9c0,0-2.61,6.64-6.53,8a8.28,8.28,0,0,1-7-.69s3.26,4.81-2,6.19l-5.45-1.15s4.57,5-4.36,5.73l-3.92-2.29s4.58,6.88-7.19,6c0,0-.65,1.83-7,4.35s-7.58-3-7.58-3,.4,5-4.61,5.5-5-3.21-5-3.21,0,3-4.14,4.35-7.85-3.21-7.85-3.21a13.49,13.49,0,0,1-5.44,3.9l-3.27,1.15S355.06,6Line truncated
|
||||||
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg id="e50aaa0b-d7a2-4fd6-9753-a6e7c25aabe8" data-name="b41114a4-e9f1-4f9b-a963-a606e95cbffe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 487.48"><defs><clipPath id="a4d5a885-3c9c-47b3-a461-18ec50a93e09" transform="translate(0)"><path d="M155.29,144.83s13.13-16.62,33.65-10.78c0,0,9.16,4.07,5.78,5.57s-3.76.6-3.76.6S170.47,152.33,155.29,144.83Z" fill="none"/></clipPath><clipPath id="b2b0682d-1733-45f1-a20d-abda510480be" transform="translate(0)"><path d="M202.45,226.47s-7.93-20.87,10.92-27.54c0,0,11.65-8.12,21-3.19,0,0,7.44-8.12,13.06-7.54s10.54,0,11.12,9.28-2.32,23.77-2.32,23.77l9,29s3,19.13-21.54,24.06-46.3,4.35-45.43-29.28Z" fill="none"/></clipPath><clipPath id="aee6f89a-cfe8-43c7-83e5-d71303f9f83d" transform="translate(0)"><path d="M236,128.45s-1.47-16.57,17.27-11.7c0,0,7.59,5.3,4.52,6.75-11.27,5.32-18.69,5.19-18.69,5.19S235,129.09,236,128.45Z" fill="none"/></clipPath><clipPath id="be1da0ac-cae6-4b58-a429-5a38b47ab367" transform="translate(0)"><path d="M420.48,193.13s12.46,22.8,9,42.25c-1,5.76-7.22,20.94-15.76,14.53,0,0-10.45,21.83-30.38,16.14,0,0,2,15.82-15.82,11.55a63.74,63.74,0,0,1-28.34-15s-42.85,37-48.54,51.25-46.92,82.58-46.92,82.58S185.3,507.17,119.53,484.39c0,0-56.92.35-79.22-59.44,0,0-11.63-34.88-13.77-49.83,0,0,0-49.11,86.89-37.73,0,0,13.48,19.94,13.48,24.92l11.39,14.95,84-82L276,234.89l38-40c2.13-6.42,40.74-22.61,40.74-22.61s14.27-17.08,24.22-16.37,14.93-.76,18.49,0,18.51-8.52,24.92-3.54,12.81,13.53,30.61,17.08,40.57,0,40.57,0,14.63,7.21,0,21.38S420.48,193.13,420.48,193.13Z" fill="none"/></clipPath></defs><polygon points="170.47 272.97 185.97 335.31 229.44 287.24 170.47 272.97" fill="#b5776d"/><path d="M148,33.45s4.75,10.37,34.13,2.16,50.13,10.1,50.13,10.1S253.7,70.37,262.58,94.1c7.8,20.84,5.94,30.17,5.94,30.17s5.17,14.58,6.46,26.24,2.16,54-3,90.29c0,0,4.44,67.38-60,52.26s-98.55-112.74-98.55-112.74Z" transform="translate(0)" fill="#eda98e"/><path d="M13,318.89S-5.87,355.41,34.93,408l116.89-29.29V318.89L80.24,262.65Z" transform="translate(0)" fill="#222430"/><path d="M420.48,203.11s16.34,6.6,20.34,6.16c12.79-1.43,22.12,11.66,7.15,20.64a24.94,24.94,0,0,1-27.49-.71Z" transform="translate(0)" fill="#b5776d"/><path d="M154.94,10.49s-24.87-6.21-39.86,7.83C100.7,31.78,89.93,31.84,65.25,93.06c0,0-23.49,54.1-17.79,76.88s-.71,75.45-.71,75.45-9.8,8.86-34.59,49.7c-25.95,42.77-2.29,58.63-2.29,58.63s21.22-53.52,41.86-64.91,31.05-12.1,31.05-12.1,1.65,26.24,18.76,34.83,41.54,7.36,46.05,56.73l39.63-38.67s1.18-42.21-16.62-62.86c0,0-49-35.59-40.54-105.35L154.23,43.23s30.87-7.12,33.46-.71c0,0,7.32-12.78,25.83-5.66s35.61,37,44.75,52.64l5.49,32s7.92,17.8,7.92,22.78,5.7,27.76,0,54.81.43,40.24.43,40.24l25.15-26.8a19.48,19.48,0,0,1-9.92-9.63c-3.56-7.37,20.42-10.22-3-81.4S241.07,24,222.57,14.76,188.4-10.87,154.94,10.49Z" transform="translate(0)" fill="#f7c6a4"/><path d="M214.17,181.57s1.44-2.16,5-1.68,5,1.68,5,1.68.48,1.45-3.37,1.21S213.68,185.18,214.17,181.57Z" transform="translate(0)" fill="#b5776d"/><path d="M208.21,166c-2.78,4.78-5.23,12.22-1.87,17.26a10.87,10.87,0,0,0,6.14,4.13.35.35,0,0,0,.19-.67,10.26,10.26,0,0,1-5.62-3.66,9.34,9.34,0,0,1-1.57-5.23,22.26,22.26,0,0,1,2.35-9.52,21,21,0,0,1,1-2,.35.35,0,0,0-.61-.36Z" transform="translate(0)" fill="#b5776d"/><path d="M198,121.41a47.44,47.44,0,0,1,5.26,8.76c2.47,5.25,4.47,11.78,1.61,17.23-.2.37.41.7.6.32,2.82-5.37,1.16-11.7-1.19-16.95a47.7,47.7,0,0,0-5.67-9.69c-.26-.33-.87,0-.61.33Z" transform="translate(0)" fill="#b5776d"/><path d="M223.94,116.2c-1.82,5-3.59,11.12-2.79,16.5.85,5.73,4.86,11.5,7.6,16.46q2.25,4.08,4.59,8.1c.51.88,1,2.43,1.85,3.1,1.08.92,3.15,1.32,4.43,2,2.74,1.46,6.15,3.54,7.21,6.65,1.66,4.91-4.51,9.61-8.12,11.78-1.28.77-4.45,1.73-4.65,3.52-.05.45.65.44.7,0,.1-.91,2.2-1.71,2.85-2.08a33.56,33.56,0,0,0,4.35-2.8c2.39-1.89,5.33-4.8,5.79-8,.72-5-5-8.36-8.77-10.21-.76-.38-3.21-1.32-3.33-1.43-1.14-1.1-1.9-3.24-2.68-4.61a194.75,194.75,0,0,1-9.57-18c-3-6.73-1.2-14.14,1.21-20.84.16-.42-.52-.61-.67-.18Z" transform="translate(0)" fill="#b5776d"/><path d="M207.35,167.66a151.14,151.14,0,0,0-10.51,16.44c-6,10.65-11.15,22.11-13.21,34.22-.08.45.6.64.67.19,2.09-12.28,7.36-23.87,13.48-34.64A147.73,147.73,0,0,1,208,168c.27-.36-.34-.71-.61-.36Z" transform="translate(0)" fill="#b5776d"/><path d="M243.41,177.57l9.53,17.56,1.38,2.53c.21.4.82.05.61-.35l-9.53-17.55L244,177.22c-.22-.4-.82,0-.61.35Z" transform="translate(0)" fill="#b5776d"/><path d="M155.29,144.83s13.13-16.62,33.65-10.78c0,0,9.16,4.07,5.78,5.57s-3.76.6-3.76.6S170.83,152.15,155.29,144.83Z" transform="translate(0)" fill="#f4e1dc"/><path d="M155.79,144.87a39.37,39.37,0,0,1,11.64-8.9,26.37,26.37,0,0,1,12.44-3.08c5.7.13,10.82,2.67,15.1,6.33.68.58,1.68-.41,1-1A24.32,24.32,0,0,0,168.3,134a40,40,0,0,0-13.51,9.87c-.59.68.4,1.67,1,1Z" transform="translate(0)" fill="#1d1618"/><path d="M170.47,111.17s17.26-5,25.91,2.64c0,0,2.65,12.74-7.68,6.73,0,0-4.26-2.4-18.23-1.92s-28.15,11.77-28.15,11.77-1.86-5.51,6-10.2S165,111.41,170.47,111.17Z" transform="translate(0)" fill="#84523a"Line truncated
|
||||||
|
After Width: | Height: | Size: 12 KiB |
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
div {
|
div {
|
||||||
border: 1px solid #e90606;
|
border: 3px solid #e90606;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
div {
|
div {
|
||||||
border: 1px solid #e9b806d6;
|
border: 3px solid #e9b806d6;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
div {
|
div {
|
||||||
border: 1px solid #1506e9;
|
border: 3px solid #1506e9;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
div {
|
div {
|
||||||
border: 1px solid #28e906;
|
border: 3px solid #28e906;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -21,15 +21,15 @@ interface layoutProps {
|
|||||||
}
|
}
|
||||||
const props = withDefaults(defineProps<layoutProps>(),{
|
const props = withDefaults(defineProps<layoutProps>(),{
|
||||||
siderWidth: 200
|
siderWidth: 200
|
||||||
})
|
});
|
||||||
|
|
||||||
const siderWidth = computed(() => {
|
const siderWidth = computed(() => {
|
||||||
let widthStr = props.siderWidth;
|
let widthStr = props.siderWidth;
|
||||||
if(typeof props.siderWidth === "number") {
|
if(typeof props.siderWidth === "number") {
|
||||||
widthStr = widthStr + "px"
|
widthStr = widthStr + "px";
|
||||||
}
|
}
|
||||||
return `width:${widthStr}`;
|
return `width:${widthStr}`;
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
// import { defineOptions } from "vue";
|
||||||
import { RouterLink } from "vue-router";
|
import { RouterLink } from "vue-router";
|
||||||
import type { RouteRecordRaw } from "vue-router";
|
import type { RouteRecordRaw } from "vue-router";
|
||||||
|
|
||||||
@@ -22,12 +23,26 @@ withDefaults(defineProps<sideMenuProps>(), {
|
|||||||
data: () => []
|
data: () => []
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// const clickItem = (item: RouteRecordRaw) => {
|
// const clickItem = (item: RouteRecordRaw) => {
|
||||||
// console.log(item)
|
// console.log(item)
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
// defineOptions({
|
||||||
|
// name: "VMenu"
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- <script>
|
||||||
|
export default {
|
||||||
|
name: 'VMenu'
|
||||||
|
}
|
||||||
|
</script> -->
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.side-menu {
|
.side-menu {
|
||||||
&-item {
|
&-item {
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.asynccomp {
|
.asynccomp {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid rgb(36, 184, 80);
|
border: 3px solid rgb(36, 184, 80);
|
||||||
&>img {
|
&>img {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.asynccomp {
|
.asynccomp {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid rgb(36, 184, 80);
|
border: 3px solid rgb(36, 184, 80);
|
||||||
&>img {
|
&>img {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.asynccomp {
|
.asynccomp {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid rgb(36, 184, 80);
|
border: 3px solid rgb(36, 184, 80);
|
||||||
&>img {
|
&>img {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-3
@@ -1,13 +1,13 @@
|
|||||||
import "./styles/index.less";
|
import "./styles/index.less";
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import { createPinia } from "pinia";
|
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router/guards";
|
||||||
|
import pinia from "./stores/pinia";
|
||||||
import { install } from "./installComponents";
|
import { install } from "./installComponents";
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
app.use(createPinia());
|
app.use(pinia);
|
||||||
app.use(router);
|
app.use(router);
|
||||||
install(app);
|
install(app);
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { createRouter, createWebHashHistory } from "vue-router";
|
||||||
|
import routes from "./routes";
|
||||||
|
import pinia from "@/stores/pinia";
|
||||||
|
import { userInfoStore } from "@/stores";
|
||||||
|
|
||||||
|
const hashHistory = createWebHashHistory();
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: hashHistory,
|
||||||
|
routes: routes
|
||||||
|
});
|
||||||
|
|
||||||
|
const user = userInfoStore(pinia);
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
if (to.meta && to.meta.permission) {
|
||||||
|
const userId = user.info.value?.userId;
|
||||||
|
if (userId) {
|
||||||
|
next();
|
||||||
|
} else {
|
||||||
|
next({
|
||||||
|
path: "/loading",
|
||||||
|
query: {
|
||||||
|
rediret: to.fullPath
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
export default router;
|
||||||
+4
-4
@@ -1,11 +1,11 @@
|
|||||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
import { createRouter, createWebHashHistory } from "vue-router";
|
||||||
import routes from "./routes"
|
import routes from "./routes";
|
||||||
|
|
||||||
const hashHistory = createWebHashHistory();
|
const hashHistory = createWebHashHistory();
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: hashHistory,
|
history: hashHistory,
|
||||||
routes: routes
|
routes: routes
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router
|
export default router;
|
||||||
+206
-95
@@ -4,157 +4,268 @@ const routes = [
|
|||||||
name: "app",
|
name: "app",
|
||||||
redirect: "/reactivity"
|
redirect: "/reactivity"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/reactivity",
|
path: "/reactivity",
|
||||||
name: "reactivity",
|
name: "reactivity",
|
||||||
meta: { title: "响应式基础" },
|
meta: { title: "响应式基础" },
|
||||||
redirect: "/reactivity/reactive",
|
redirect: "/reactivity/reactive",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/reactivity/reactive",
|
path: "/reactivity/reactive",
|
||||||
name: "reactive",
|
name: "reactive",
|
||||||
meta: { title: "reactive" },
|
meta: { title: "reactive" },
|
||||||
component: () => import("@/views/reactivity/ReactiveBase.vue")
|
component: () => import("@/views/reactivity/ReactiveBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/reactivity/ref",
|
path: "/reactivity/ref",
|
||||||
name: "ref",
|
name: "ref",
|
||||||
meta: { title: "ref" },
|
meta: { title: "ref" },
|
||||||
component: () => import("@/views/reactivity/RefBase.vue")
|
component: () => import("@/views/reactivity/RefBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/reactivity/toref",
|
path: "/reactivity/toref",
|
||||||
name: "toref",
|
name: "toref",
|
||||||
meta: { title: "toRef" },
|
meta: { title: "toRef" },
|
||||||
component: () => import("@/views/reactivity/ToRefBase.vue")
|
component: () => import("@/views/reactivity/ToRefBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/reactivity/torefs",
|
path: "/reactivity/torefs",
|
||||||
name: "torefs",
|
name: "torefs",
|
||||||
meta: { title: "toRefs" },
|
meta: { title: "toRefs" },
|
||||||
component: () => import("@/views/reactivity/ToRefsBase.vue")
|
component: () => import("@/views/reactivity/ToRefsBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/reactivity/toraw",
|
path: "/reactivity/toraw",
|
||||||
name: "toraw",
|
name: "toraw",
|
||||||
meta: { title: "toRaw" },
|
meta: { title: "toRaw" },
|
||||||
component: () => import("@/views/reactivity/ToRawBase.vue")
|
component: () => import("@/views/reactivity/ToRawBase.vue")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/computed",
|
path: "/computed",
|
||||||
name: "computed",
|
name: "computed",
|
||||||
meta: { title: "计算属性" },
|
meta: { title: "计算属性" },
|
||||||
redirect: "/computed/base",
|
redirect: "/computed/base",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/computed/base",
|
path: "/computed/base",
|
||||||
name: "computedBase",
|
name: "computedBase",
|
||||||
meta: { title: "computed示例" },
|
meta: { title: "computed示例" },
|
||||||
component: () => import("@/views/computed/ComputedBase.vue")
|
component: () => import("@/views/computed/ComputedBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/computed/advan",
|
path: "/computed/advan",
|
||||||
name: "computedAdvan",
|
name: "computedAdvan",
|
||||||
meta: { title: "computed双向绑定" },
|
meta: { title: "computed双向绑定" },
|
||||||
component: () => import("@/views/computed/ComputedAdvan.vue")
|
component: () => import("@/views/computed/ComputedAdvan.vue")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/watch",
|
path: "/watch",
|
||||||
name: "watch",
|
name: "watch",
|
||||||
meta: { title: "侦听器" },
|
meta: { title: "侦听器" },
|
||||||
redirect: "/watch/base",
|
redirect: "/watch/base",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/watch/base",
|
path: "/watch/base",
|
||||||
name: "watchBase",
|
name: "watchBase",
|
||||||
meta: { title: "watch示例" },
|
meta: { title: "watch示例" },
|
||||||
component: () => import("@/views/watch/WatchBase.vue")
|
component: () => import("@/views/watch/WatchBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/watch/reactive",
|
path: "/watch/reactive",
|
||||||
name: "watchReactive",
|
name: "watchReactive",
|
||||||
meta: { title: "watch侦听响应式对象" },
|
meta: { title: "watch侦听响应式对象" },
|
||||||
component: () => import("@/views/watch/WatchReactive.vue")
|
component: () => import("@/views/watch/WatchReactive.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/watch/effectbase",
|
path: "/watch/effectbase",
|
||||||
name: "effectBase",
|
name: "effectBase",
|
||||||
meta: { title: "watchEffect示例" },
|
meta: { title: "watchEffect示例" },
|
||||||
component: () => import("@/views/watch/WatchEffectBase.vue")
|
component: () => import("@/views/watch/WatchEffectBase.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/watch/effectinvalidate",
|
path: "/watch/effectinvalidate",
|
||||||
name: "effectInvalidate",
|
name: "effectInvalidate",
|
||||||
meta: { title: "watchEffect清除副作用函数" },
|
meta: { title: "watchEffect清除副作用函数" },
|
||||||
component: () => import("@/views/watch/WatchEffectInvalidate.vue")
|
component: () => import("@/views/watch/WatchEffectInvalidate.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/watch/callback",
|
path: "/watch/callback",
|
||||||
name: "watchCallback",
|
name: "watchCallback",
|
||||||
meta: { title: "watch回调的触发时机" },
|
meta: { title: "watch回调的触发时机" },
|
||||||
component: () => import("@/views/watch/WatchCallback.vue")
|
component: () => import("@/views/watch/WatchCallback.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/watch/stop",
|
path: "/watch/stop",
|
||||||
name: "watchStop",
|
name: "watchStop",
|
||||||
meta: { title: "watch停止侦听器" },
|
meta: { title: "watch停止侦听器" },
|
||||||
component: () => import("@/views/watch/WatchStop.vue")
|
component: () => import("@/views/watch/WatchStop.vue")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component",
|
path: "/component",
|
||||||
name: "component",
|
name: "component",
|
||||||
meta: { title: "组件" },
|
meta: { title: "组件" },
|
||||||
redirect: "/component/global",
|
redirect: "/component/global",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/component/global",
|
path: "/component/global",
|
||||||
name: "globalComponent",
|
name: "globalComponent",
|
||||||
meta: { title: "全局组件" },
|
meta: { title: "全局组件" },
|
||||||
component: () => import("@/views/component/GlobalComponent.vue")
|
component: () => import("@/views/component/GlobalComponent.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component/part",
|
path: "/component/part",
|
||||||
name: "partComponent",
|
name: "partComponent",
|
||||||
meta: { title: "局部组件" },
|
meta: { title: "局部组件" },
|
||||||
component: () => import("@/views/component/PartComponent.vue")
|
component: () => import("@/views/component/PartComponent.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component/recursion",
|
path: "/component/recursion",
|
||||||
name: "recursionComponent",
|
name: "recursionComponent",
|
||||||
meta: { title: "递归组件" },
|
meta: { title: "递归组件" },
|
||||||
component: () => import("@/views/component/RecursionComponent.vue")
|
component: () => import("@/views/component/RecursionComponent.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component/var",
|
path: "/component/var",
|
||||||
name: "varComponent",
|
name: "varComponent",
|
||||||
meta: { title: "动态组件" },
|
meta: { title: "动态组件" },
|
||||||
component: () => import("@/views/component/VarComponent.vue")
|
component: () => import("@/views/component/VarComponent.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component/varadvan",
|
path: "/component/varadvan",
|
||||||
name: "varComponentAdvan",
|
name: "varComponentAdvan",
|
||||||
meta: { title: "动态组件实战" },
|
meta: { title: "动态组件实战" },
|
||||||
component: () => import("@/views/component/VarComponentAdvan.vue")
|
component: () => import("@/views/component/VarComponentAdvan.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component/async",
|
path: "/component/async",
|
||||||
name: "asyncComponent",
|
name: "asyncComponent",
|
||||||
meta: { title: "异步组件" },
|
meta: { title: "异步组件" },
|
||||||
component: () => import("@/views/component/AsyncComponent.vue")
|
component: () => import("@/views/component/AsyncComponent.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/component/asyncvar",
|
path: "/component/asyncvar",
|
||||||
name: "asyncVarComponent",
|
name: "asyncVarComponent",
|
||||||
meta: { title: "异步动态组件" },
|
meta: { title: "异步动态组件" },
|
||||||
component: () => import("@/views/component/AsyncVarComponent.vue")
|
component: () => import("@/views/component/AsyncVarComponent.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/component/keepalive",
|
||||||
|
name: "keepAliveComponent",
|
||||||
|
meta: { title: "keep-alive缓存组件" },
|
||||||
|
component: () => import("@/views/component/KeepAliveComponent.vue")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/emit",
|
||||||
|
name: "emit",
|
||||||
|
meta: { title: "触发事件基础" },
|
||||||
|
redirect: "/emit/base",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/emit/parent",
|
||||||
|
name: "emitParent",
|
||||||
|
meta: { title: "声明触发事件" },
|
||||||
|
component: () => import("@/views/emit/EmitParent.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/slot",
|
||||||
|
name: "slot",
|
||||||
|
meta: { title: "插槽" },
|
||||||
|
redirect: "/slot/default",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/slot/default",
|
||||||
|
name: "defaultParentSlot",
|
||||||
|
meta: { title: "匿名插槽" },
|
||||||
|
component: () => import("@/views/slot/DefaultParentSlot.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/slot/name",
|
||||||
|
name: "nameParentSlot",
|
||||||
|
meta: { title: "具名插槽" },
|
||||||
|
component: () => import("@/views/slot/NameParentSlot.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/slot/scope",
|
||||||
|
name: "scopeParentSlot",
|
||||||
|
meta: { title: "作用域插槽" },
|
||||||
|
component: () => import("@/views/slot/ScopeParentSlot.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/slot/var",
|
||||||
|
name: "varParentSlot",
|
||||||
|
meta: { title: "动态插槽" },
|
||||||
|
component: () => import("@/views/slot/VarParentSlot.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/provide-inject",
|
||||||
|
name: "provideInject",
|
||||||
|
meta: { title: "依赖注入" },
|
||||||
|
redirect: "/provide-inject/provide",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/provide-inject/provide",
|
||||||
|
name: "provideBase",
|
||||||
|
meta: { title: "依赖注入provide/inject" },
|
||||||
|
component: () => import("@/views/provideInject/ProvideBase.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/provide-inject/readonly",
|
||||||
|
name: "provideReadonly ",
|
||||||
|
meta: { title: "只读注入" },
|
||||||
|
component: () => import("@/views/provideInject/ProvideReadonly.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/pinia",
|
||||||
|
name: "pinia",
|
||||||
|
meta: { title: "pinia" },
|
||||||
|
redirect: "/pinia/userinfo",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/pinia/userinfo",
|
||||||
|
name: "piniaUserInfo",
|
||||||
|
meta: { title: "pinia状态管理" },
|
||||||
|
component: () => import("@/views/pinia/PiniaUserInfo.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/router",
|
||||||
|
name: "router",
|
||||||
|
meta: { title: "路由router" },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/router/guard",
|
||||||
|
name: "routerGuard",
|
||||||
|
meta: { title: "导航守卫", permission: true },
|
||||||
|
component: () => import("@/views/router/RouterGuard.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/loading",
|
||||||
|
name: "EnterLoading",
|
||||||
|
meta: {},
|
||||||
|
component: () => import("@/EnterLoading.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/noaccess/:text?",
|
||||||
|
name: "noaccess",
|
||||||
|
props: true,
|
||||||
|
component: () => import("@/views/error/NoAccess.vue")
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from "vue";
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from "pinia";
|
||||||
|
|
||||||
export const useCounterStore = defineStore('counter', () => {
|
export const useCounterStore = defineStore("counter", () => {
|
||||||
const count = ref(0)
|
const count = ref(0);
|
||||||
const doubleCount = computed(() => count.value * 2)
|
const doubleCount = computed(() => count.value * 2);
|
||||||
function increment() {
|
function increment() {
|
||||||
count.value++
|
count.value++;
|
||||||
}
|
}
|
||||||
|
|
||||||
return { count, doubleCount, increment }
|
return { count, doubleCount, increment };
|
||||||
})
|
});
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import userInfoStore from "./userInfo";
|
||||||
|
|
||||||
|
export {
|
||||||
|
userInfoStore
|
||||||
|
};
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { createPinia } from "pinia";
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
|
||||||
|
export default pinia;
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
|
||||||
|
interface user {
|
||||||
|
userId: number | string,
|
||||||
|
userName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const getUserInfo = () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const userinfo : user = {
|
||||||
|
userId: 123456789,
|
||||||
|
userName: "李白"
|
||||||
|
};
|
||||||
|
resolve({
|
||||||
|
errcode: 0,
|
||||||
|
errmsg: "",
|
||||||
|
data: userinfo
|
||||||
|
});
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const userInfoStore = defineStore("userInfoStore", () => {
|
||||||
|
const user = ref<user>();
|
||||||
|
const getUserRequest = () => {
|
||||||
|
return new Promise<user | undefined>((resolve, reject) => {
|
||||||
|
getUserInfo()
|
||||||
|
.then((res: any) => {
|
||||||
|
const { errcode, errmsg, data } = res;
|
||||||
|
if (errcode === 0) {
|
||||||
|
user.value = data;
|
||||||
|
resolve(user.value);
|
||||||
|
} else {
|
||||||
|
reject(errmsg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err: any) => {
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const info = computed(() => {
|
||||||
|
return user;
|
||||||
|
});
|
||||||
|
|
||||||
|
return { getUserRequest, info };
|
||||||
|
});
|
||||||
|
|
||||||
|
export default userInfoStore;
|
||||||
@@ -31,15 +31,15 @@ const showAsyncComponent = () => {
|
|||||||
//比较完整的 例子
|
//比较完整的 例子
|
||||||
const AsyncComp = defineAsyncComponent({
|
const AsyncComp = defineAsyncComponent({
|
||||||
// 加载函数
|
// 加载函数
|
||||||
// loader: () => import("@/components/async/VAsyncComp1.vue"),
|
loader: () => import("@/components/async/VAsyncComp1.vue"),
|
||||||
loader: () => {
|
// loader: () => {
|
||||||
// const comp = () => import("../../components/async/VAsyncComp1.vue");
|
// // const comp = () => import("../../components/async/VAsyncComp1.vue");
|
||||||
return new Promise(resolve => {
|
// return new Promise(resolve => {
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
resolve(() => import("../../components/async/VAsyncComp1.vue"));
|
// resolve(() => import("../../components/async/VAsyncComp1.vue"));
|
||||||
}, 2000);
|
// }, 2000);
|
||||||
});
|
// });
|
||||||
},
|
// },
|
||||||
// 加载异步组件时使用的组件
|
// 加载异步组件时使用的组件
|
||||||
loadingComponent: VLoading,
|
loadingComponent: VLoading,
|
||||||
// 展示加载组件前的延迟时间，默认为 200ms
|
// 展示加载组件前的延迟时间，默认为 200ms
|
||||||
|
|||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<button v-for="(item, index) in components" :key="`${item.name}_${index}`" @click="clickButton(index)">按钮{{ index
|
||||||
|
+ 1 }}</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<KeepAlive :include="cacheList">
|
||||||
|
<component :is="renderComponent" />
|
||||||
|
</KeepAlive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from "vue";
|
||||||
|
import ComputedBase from "@/views/computed/ComputedBase.vue";
|
||||||
|
import ComputedAdvan from "@/views/computed/ComputedAdvan.vue";
|
||||||
|
import WatchReactive from "@/views/watch/WatchReactive.vue";
|
||||||
|
|
||||||
|
const components = [
|
||||||
|
{
|
||||||
|
name: ComputedBase.name || ComputedBase.__name,
|
||||||
|
component: ComputedBase,
|
||||||
|
cache: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ComputedAdvan.name || ComputedAdvan.__name,
|
||||||
|
component: ComputedAdvan,
|
||||||
|
cache: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: WatchReactive.name || WatchReactive.__name,
|
||||||
|
component: WatchReactive,
|
||||||
|
cache: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const cacheList = computed(() => {
|
||||||
|
const arr: Array<string> = [];
|
||||||
|
for (let index = 0; index < components.length; index++) {
|
||||||
|
const element = components[index];
|
||||||
|
if (element.cache && element.name) arr.push(element.name);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeButton = ref(0);
|
||||||
|
const clickButton = (index: number) => {
|
||||||
|
activeButton.value = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderComponent = computed(() => {
|
||||||
|
return components[activeButton.value].component;
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -6,18 +6,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from "vue";
|
||||||
|
|
||||||
const firstName = ref("张")
|
const firstName = ref("张");
|
||||||
const secondName = ref("三")
|
const secondName = ref("三");
|
||||||
const fullName = computed({
|
const fullName = computed({
|
||||||
get: () => {
|
get: () => {
|
||||||
return `${firstName.value}${secondName.value}`
|
return `${firstName.value}${secondName.value}`;
|
||||||
},
|
},
|
||||||
set: (value) => {
|
set: (value) => {
|
||||||
secondName.value = value
|
secondName.value = value;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from "vue";
|
import { computed, ref } from "vue";
|
||||||
|
|
||||||
const number = ref(123456);
|
const number = ref(123456);
|
||||||
const amount = computed(() => {
|
const amount = computed(() => {
|
||||||
return number.value.toLocaleString("zh", {
|
return number.value.toLocaleString("zh", {
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button @click="onClick">事件1</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const emit = defineEmits(["changeValue"]);
|
||||||
|
const onClick = () => {
|
||||||
|
emit("changeValue", "张三");
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button @click="onClick">事件2</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "updateId", id: number): void
|
||||||
|
}>();
|
||||||
|
const onClick = () => {
|
||||||
|
emit("updateId", 123456789);
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button @click="onClick">事件3</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// 3.3+: 更简洁的语法
|
||||||
|
const emit = defineEmits<{
|
||||||
|
selectValue: [list: Array<string>]
|
||||||
|
}>();
|
||||||
|
const onClick = () => {
|
||||||
|
emit("selectValue", ["abc","111", "李四"]);
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<EmitChildren1 @change-value="onChange1"/>
|
||||||
|
</p>
|
||||||
|
<h1>{{ value1 }}</h1>
|
||||||
|
<br />
|
||||||
|
<p>
|
||||||
|
<EmitChildren2 @update-id="onChange2" />
|
||||||
|
</p>
|
||||||
|
<h1>{{ value2 }}</h1>
|
||||||
|
<br />
|
||||||
|
<p>
|
||||||
|
<EmitChildren3 @select-value="onChange3" />
|
||||||
|
</p>
|
||||||
|
<h1>{{ value3 }}</h1>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import EmitChildren1 from "./EmitChildren1.vue";
|
||||||
|
import EmitChildren2 from "./EmitChildren2.vue";
|
||||||
|
import EmitChildren3 from "./EmitChildren3.vue";
|
||||||
|
|
||||||
|
const value1 = ref("");
|
||||||
|
const onChange1 = (val:string) => {
|
||||||
|
value1.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const value2 = ref(0);
|
||||||
|
const onChange2 = (val:number) => {
|
||||||
|
value2.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const value3 = ref<Array<string>>([""]);
|
||||||
|
const onChange3 = (val: string[]) => {
|
||||||
|
value3.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
text?: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const noPower = new URL("../../assets/meme_woman_yelling.svg", import.meta.url).href;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="no-access">
|
||||||
|
<div class="no-access-image">
|
||||||
|
<img :src="noPower" />
|
||||||
|
</div>
|
||||||
|
<div class="no-access-text">
|
||||||
|
<p>{{ props.text || "你没有访问权限" }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.no-access {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&-image {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
&>img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
margin-top: 16px;
|
||||||
|
line-height: 26px;
|
||||||
|
color: #888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-btn {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 180px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&-class {
|
||||||
|
width: 80px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
{{ user.info }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import pinia from "@/stores/pinia";
|
||||||
|
import { userInfoStore } from "@/stores";
|
||||||
|
|
||||||
|
const user = userInfoStore(pinia);
|
||||||
|
|
||||||
|
user.getUserRequest();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button @click="clickHander">点击</button>
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p>inject组件：{{ num }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { inject } from "vue";
|
||||||
|
|
||||||
|
const num = inject("num");
|
||||||
|
|
||||||
|
const clickHander = () => {
|
||||||
|
num.value++;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
div {
|
||||||
|
border: 3px solid #aaa;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button @click="clickHander">点击</button>
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p>provide组件： {{ count }}</p>
|
||||||
|
<br />
|
||||||
|
<InjectBase />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, provide } from "vue";
|
||||||
|
import InjectBase from "./InjectBase.vue";
|
||||||
|
|
||||||
|
|
||||||
|
const count = ref(0);
|
||||||
|
provide("num", count);
|
||||||
|
|
||||||
|
const clickHander = () => {
|
||||||
|
count.value++;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<button @click="clickHander">点击</button>
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p>provide组件： {{ count }}</p>
|
||||||
|
<br />
|
||||||
|
<InjectBase />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, provide, readonly } from "vue";
|
||||||
|
import InjectBase from "./InjectBase.vue";
|
||||||
|
|
||||||
|
|
||||||
|
const count = ref(0);
|
||||||
|
provide("num", readonly(count));
|
||||||
|
|
||||||
|
const clickHander = () => {
|
||||||
|
count.value++;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -11,10 +11,10 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive } from "vue";
|
import { reactive } from "vue";
|
||||||
const person = reactive({ name: "张三", age: 18 })
|
const person = reactive({ name: "张三", age: 18 });
|
||||||
const clickHander = () => {
|
const clickHander = () => {
|
||||||
person.age++
|
person.age++;
|
||||||
}
|
};
|
||||||
// let { age } = person;
|
// let { age } = person;
|
||||||
// const clickHander2 = () => {
|
// const clickHander2 = () => {
|
||||||
// age++;
|
// age++;
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
你已经通过了导航守卫
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<DefaultSlot>
|
||||||
|
<h1>这是一个匿名插槽</h1>
|
||||||
|
</DefaultSlot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DefaultSlot from "./DefaultSlot.vue";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NameSlot>
|
||||||
|
<template #header>
|
||||||
|
<h1>我是header</h1>
|
||||||
|
</template>
|
||||||
|
<template #main>
|
||||||
|
<main>我是main</main>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<footer>我是footer</footer>
|
||||||
|
</template>
|
||||||
|
</NameSlot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import NameSlot from "./NameSlot.vue";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<slot name="header"></slot>
|
||||||
|
<slot name="main"></slot>
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ScopeSlot :data="students"></ScopeSlot>
|
||||||
|
<br />
|
||||||
|
<!-- <ScopeSlot :data="students">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<img :src="sexPic(row)" >
|
||||||
|
</template>
|
||||||
|
</ScopeSlot> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import ScopeSlot from "./ScopeSlot.vue";
|
||||||
|
interface student {
|
||||||
|
name: string,
|
||||||
|
age: number,
|
||||||
|
sex: 0 | 1
|
||||||
|
}
|
||||||
|
const students: student[] = [
|
||||||
|
{
|
||||||
|
name: "小明",
|
||||||
|
age: 10,
|
||||||
|
sex: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "小红",
|
||||||
|
age: 11,
|
||||||
|
sex: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "小刚",
|
||||||
|
age: 9,
|
||||||
|
sex: 1
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const girl = new URL("../../assets/meme_crying_kim_kardashian.svg", import.meta.url);
|
||||||
|
const boy = new URL("../../assets/meme_crying_michael_jordan.svg", import.meta.url);
|
||||||
|
const sexPic = (item: student) => {
|
||||||
|
const { sex } = item;
|
||||||
|
return sex ? boy : girl;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<table border="1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>姓名</th>
|
||||||
|
<th>年龄</th>
|
||||||
|
<th>性别</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in props.data" :key="index">
|
||||||
|
<td>{{ item.name }}</td>
|
||||||
|
<td>{{ item.age }}</td>
|
||||||
|
<td>
|
||||||
|
<template v-if="slots.default">
|
||||||
|
<slot :row="item"></slot>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ item.sex }}
|
||||||
|
</template>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useSlots } from "vue";
|
||||||
|
|
||||||
|
interface student {
|
||||||
|
name: string,
|
||||||
|
age: number,
|
||||||
|
sex: 0 | 1
|
||||||
|
}
|
||||||
|
|
||||||
|
interface propsType {
|
||||||
|
data: Array<student> | []
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<propsType>(), {
|
||||||
|
data: () => []
|
||||||
|
});
|
||||||
|
|
||||||
|
const slots = useSlots();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less"></style>
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<select name="select" v-model="name">
|
||||||
|
<option v-for="(item, index) in options" :key="index" :value="item">{{ item }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<VarSlot>
|
||||||
|
<template #[name]>
|
||||||
|
<div>{{name}}</div>
|
||||||
|
</template>
|
||||||
|
</VarSlot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import VarSlot from "./VarSlot.vue";
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
"header",
|
||||||
|
"main",
|
||||||
|
"footer"
|
||||||
|
];
|
||||||
|
|
||||||
|
const name = ref("header");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
select {
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<slot name="header"></slot>
|
||||||
|
<slot name="main"></slot>
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -5,12 +5,13 @@
|
|||||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
|
<br />
|
||||||
<p>{{ res }}</p>
|
<p>{{ res }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { watch, ref } from 'vue'
|
import { watch, ref } from "vue";
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: "第一页",
|
label: "第一页",
|
||||||
@@ -32,17 +33,17 @@ const options = [
|
|||||||
label: "第五页",
|
label: "第五页",
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
const curPage = ref(1)
|
const curPage = ref(1);
|
||||||
const res = ref("")
|
const res = ref("");
|
||||||
watch(
|
watch(
|
||||||
curPage,
|
curPage,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
const curItem = options.filter((item) => item.value === newValue)[0];
|
||||||
res.value = `${curItem.label} 的数据`
|
res.value = `${curItem.label} 的数据`;
|
||||||
},
|
}
|
||||||
// {immediate: true}
|
// {immediate: true}
|
||||||
)
|
);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -16,19 +16,19 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
watchEffect,
|
watchEffect
|
||||||
// watchPostEffect
|
// watchPostEffect
|
||||||
} from 'vue'
|
} from "vue";
|
||||||
const listDom = ref<HTMLDivElement>()
|
const listDom = ref<HTMLDivElement>();
|
||||||
const resDom = ref<HTMLDivElement>()
|
const resDom = ref<HTMLDivElement>();
|
||||||
const selectElement = ref(3)
|
const selectElement = ref(3);
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
const selectElem = listDom?.value?.querySelectorAll("p")[selectElement.value];
|
||||||
resDom.value.append(selectElem)
|
if(selectElem) resDom?.value?.append(selectElem);
|
||||||
}, {
|
}, {
|
||||||
flush: 'post'
|
flush: "post"
|
||||||
})
|
});
|
||||||
|
|
||||||
// watchPostEffect(() => {
|
// watchPostEffect(() => {
|
||||||
// const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
// const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
||||||
|
|||||||
@@ -5,13 +5,15 @@
|
|||||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
|
<br />
|
||||||
<p>watch: {{ watchRes }}</p>
|
<p>watch: {{ watchRes }}</p>
|
||||||
|
<br />
|
||||||
<p>watchEffect: {{ watchEffectRes }}</p>
|
<p>watchEffect: {{ watchEffectRes }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { watch, watchEffect, ref } from 'vue'
|
import { watch, watchEffect, ref } from "vue";
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: "第一页",
|
label: "第一页",
|
||||||
@@ -33,21 +35,21 @@ const options = [
|
|||||||
label: "第五页",
|
label: "第五页",
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
const curPage = ref(1)
|
const curPage = ref(1);
|
||||||
const watchRes = ref("")
|
const watchRes = ref("");
|
||||||
watch(
|
watch(
|
||||||
curPage,
|
curPage,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
const curItem = options.filter((item) => item.value === newValue)[0];
|
||||||
watchRes.value = `${curItem.label} 的数据`
|
watchRes.value = `${curItem.label} 的数据`;
|
||||||
},
|
}
|
||||||
)
|
);
|
||||||
const watchEffectRes = ref("")
|
const watchEffectRes = ref("");
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
const curItem = options.filter((item) => item.value === curPage.value)[0]
|
const curItem = options.filter((item) => item.value === curPage.value)[0];
|
||||||
watchEffectRes.value = `${curItem.label} 的数据`
|
watchEffectRes.value = `${curItem.label} 的数据`;
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -5,12 +5,13 @@
|
|||||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
|
<br />
|
||||||
<p>{{ watchEffectRes }}</p>
|
<p>{{ watchEffectRes }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { watchEffect, ref } from 'vue'
|
import { watchEffect, ref } from "vue";
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: "第一页",
|
label: "第一页",
|
||||||
@@ -32,17 +33,17 @@ const options = [
|
|||||||
label: "第五页",
|
label: "第五页",
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
const curPage = ref(1)
|
const curPage = ref(1);
|
||||||
const watchEffectRes = ref("")
|
const watchEffectRes = ref("");
|
||||||
watchEffect((onInvalidate) => {
|
watchEffect((onInvalidate) => {
|
||||||
const curItem = options.filter((item) => item.value === curPage.value)[0]
|
const curItem = options.filter((item) => item.value === curPage.value)[0];
|
||||||
watchEffectRes.value = `${curItem.label} 的数据`
|
watchEffectRes.value = `${curItem.label} 的数据`;
|
||||||
console.log('watchEffect副作用函数执行了！')
|
console.log("watchEffect副作用函数执行了！");
|
||||||
onInvalidate(() => {
|
onInvalidate(() => {
|
||||||
console.log("onInvalidate清除副作用函数执行了！")
|
console.log("onInvalidate清除副作用函数执行了！");
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -6,12 +6,13 @@
|
|||||||
</select>
|
</select>
|
||||||
<!-- <input type="number" v-model="curPage.limit" /> -->
|
<!-- <input type="number" v-model="curPage.limit" /> -->
|
||||||
</p>
|
</p>
|
||||||
|
<br />
|
||||||
<p>{{ res }}</p>
|
<p>{{ res }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { watch, reactive, ref } from 'vue'
|
import { watch, reactive, ref } from "vue";
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: "第一页",
|
label: "第一页",
|
||||||
@@ -33,23 +34,23 @@ const options = [
|
|||||||
label: "第五页",
|
label: "第五页",
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
const curPage = reactive({
|
const curPage = reactive({
|
||||||
page: 1,
|
page: 1,
|
||||||
limit: 10
|
limit: 10
|
||||||
})
|
});
|
||||||
const res = ref("")
|
const res = ref("");
|
||||||
watch(
|
watch(
|
||||||
// curPage.page,
|
// curPage.page,
|
||||||
() => curPage.page,
|
() => curPage.page,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
const curItem = options.filter((item) => item.value === newValue)[0];
|
||||||
res.value = `${curItem.label} 的数据`
|
res.value = `${curItem.label} 的数据`;
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
|
|
||||||
// watch(
|
// watch(
|
||||||
// () => curPage,
|
// () => curPage,
|
||||||
|
|||||||
@@ -6,12 +6,13 @@
|
|||||||
</select>
|
</select>
|
||||||
<button @click="watchStop">停止侦听</button>
|
<button @click="watchStop">停止侦听</button>
|
||||||
</p>
|
</p>
|
||||||
|
<br />
|
||||||
<p>{{ res }}</p>
|
<p>{{ res }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { watch, ref } from 'vue'
|
import { watch, ref } from "vue";
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: "第一页",
|
label: "第一页",
|
||||||
@@ -33,20 +34,20 @@ const options = [
|
|||||||
label: "第五页",
|
label: "第五页",
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
const curPage = ref(1)
|
const curPage = ref(1);
|
||||||
const res = ref("")
|
const res = ref("");
|
||||||
const stop = watch(
|
const stop = watch(
|
||||||
curPage,
|
curPage,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
const curItem = options.filter((item) => item.value === newValue)[0];
|
||||||
res.value = `${curItem.label} 的数据`
|
res.value = `${curItem.label} 的数据`;
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
|
|
||||||
const watchStop = () => {
|
const watchStop = () => {
|
||||||
stop()
|
stop();
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+4
-1
@@ -7,5 +7,8 @@
|
|||||||
{
|
{
|
||||||
"path": "./tsconfig.app.json"
|
"path": "./tsconfig.app.json"
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"noImplicitAny": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
+23
-8
@@ -1,8 +1,10 @@
|
|||||||
import { fileURLToPath, URL } from 'node:url'
|
import { fileURLToPath, URL } from "node:url";
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from "vite";
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from "@vitejs/plugin-vue";
|
||||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||||
import proxyConfig from './proxy.config'
|
import legacy from "@vitejs/plugin-legacy";
|
||||||
|
import VueSetupExtend from "vite-plugin-vue-setup-extend";
|
||||||
|
import proxyConfig from "./proxy.config";
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@@ -11,13 +13,26 @@ export default defineConfig({
|
|||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(),
|
||||||
vueJsx(),
|
vueJsx(),
|
||||||
|
VueSetupExtend(),
|
||||||
|
|
||||||
|
legacy({
|
||||||
|
// targets: ["defaults", "not IE 11"],
|
||||||
|
targets: {
|
||||||
|
"chrome": "120"
|
||||||
|
},
|
||||||
|
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||||
|
renderLegacyChunks: true,
|
||||||
|
polyfills: [
|
||||||
|
"es.array.to-reversed"
|
||||||
|
]
|
||||||
|
})
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
"@": fileURLToPath(new URL("./src", import.meta.url))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
proxy: proxyConfig
|
proxy: proxyConfig
|
||||||
},
|
}
|
||||||
})
|
});
|
||||||
Reference in new issue
Block a user