From 19e72d71ae95e1a5a61129a0f923da2a2433c6a5 Mon Sep 17 00:00:00 2001
From: zhangyinghuih <3201971381@qq.com>
Date: Sun, 14 May 2023 21:48:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...67\346\226\260\351\241\265\351\235\242.md" | 134 ++++++++++++++++++
...25\346\240\217\345\260\201\350\243\205.md" | 80 +++++++++++
...76\347\211\207\345\260\201\350\243\205.md" | 79 +++++++++++
...71\346\240\217\347\274\251\350\277\233.md" | 38 +++++
4 files changed, 331 insertions(+)
create mode 100644 "32\345\215\261\346\231\250/2023-05-11\350\267\257\347\224\261\350\267\263\350\275\254\344\270\215\345\210\267\346\226\260\351\241\265\351\235\242.md"
create mode 100644 "32\345\215\261\346\231\250/2023-05-12\350\267\257\347\224\261\350\217\234\345\215\225\346\240\217\345\260\201\350\243\205.md"
create mode 100644 "32\345\215\261\346\231\250/2023-05-8\345\233\276\347\211\207\345\260\201\350\243\205.md"
create mode 100644 "32\345\215\261\346\231\250/2023-05-9.\344\276\247\350\276\271\346\240\217\347\274\251\350\277\233.md"
diff --git "a/32\345\215\261\346\231\250/2023-05-11\350\267\257\347\224\261\350\267\263\350\275\254\344\270\215\345\210\267\346\226\260\351\241\265\351\235\242.md" "b/32\345\215\261\346\231\250/2023-05-11\350\267\257\347\224\261\350\267\263\350\275\254\344\270\215\345\210\267\346\226\260\351\241\265\351\235\242.md"
new file mode 100644
index 0000000..96242ac
--- /dev/null
+++ "b/32\345\215\261\346\231\250/2023-05-11\350\267\257\347\224\261\350\267\263\350\275\254\344\270\215\345\210\267\346\226\260\351\241\265\351\235\242.md"
@@ -0,0 +1,134 @@
+# main.js
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import './assets/new.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
+// 引入组件
+import index from './Menu/index.vue'
+import menuleft from './components/MenuLeft.vue'
+import menunew from './components/MenuNew.vue'
+// import './assets/main.css'
+// element-plus 全局引入
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+// 引入路由
+import { createRouter, createWebHistory } from 'vue-router'
+// 创建路由
+const routes = [
+ {
+ path: '/', component: index, children: [
+ { path: 'menuleft', components: { a: menuleft } },
+ { path: 'menunew', components: { b: menunew } }
+ ]
+ }
+]
+// 创建路由器，管理路由
+const router = createRouter({
+ history:createWebHistory(),
+ routes
+})
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ app.component(key, component)
+}
+app.use(ElementPlus).use(router).mount('#app')
+
+```
+
+# index.js
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/32\345\215\261\346\231\250/2023-05-12\350\267\257\347\224\261\350\217\234\345\215\225\346\240\217\345\260\201\350\243\205.md" "b/32\345\215\261\346\231\250/2023-05-12\350\267\257\347\224\261\350\217\234\345\215\225\346\240\217\345\260\201\350\243\205.md"
new file mode 100644
index 0000000..03f521a
--- /dev/null
+++ "b/32\345\215\261\346\231\250/2023-05-12\350\267\257\347\224\261\350\217\234\345\215\225\346\240\217\345\260\201\350\243\205.md"
@@ -0,0 +1,80 @@
+# 封装
+
+```js
+const menus = computed(()=>{
+ let nn = fn(newmenus,'')
+ return nn
+}
+)
+
+function fn (arr,childrenPaht){
+ let list =[]
+ arr.forEach(item => {
+ let temp = {
+ path:item.path,
+ meta:item.meta
+ }
+ if(childrenPaht && temp.path){
+ temp.path=childrenPaht +'/'+temp.path
+ }
+ if(item.children && item.children.length>0){
+ let children = fn(item.children, item.path)
+ if (children.length > 0) {
+ temp.children = children
+ }
+ }
+ console.log(temp);
+ list.push(temp)
+ });
+ return list
+}
+```
+
+
+```js
+'use strict '
+import Layout from '../Menu/Layout.vue'
+const routes = [
+ {
+ path:'/',
+ component:Layout,
+ meta:{icon:'menu',title: '年级管理'}
+ },
+ {
+ path:'/teacher',
+ component:Layout,
+ meta:{icon:'link',title: '教师管理'},
+ children: [
+ {
+ path:'menuleft',
+ component:()=>import('../views/MenuLeft.vue') ,
+ meta:{icon:'setting',title: "初级教师"}
+
+ },
+ {
+ path:'menunew',
+ component:()=>import('../views/MenuNew.vue') ,
+ meta:{icon:'ChatRound',title: "中级教师"}
+ },
+ ]
+ },
+ {
+ path:'/student',
+ component:Layout,
+ meta:{icon:'setting',title: '学生管理'},
+ children: [
+ {
+ path:'oneStudent',
+ component:()=>import('../views/OneStudent.vue'),
+ meta:{icon:'ChatRound', title: "初一学生"}
+ },
+ {
+ path:'twoStudent',
+ component:()=>import('../views/TwoStudent.vue'),
+ meta:{icon:'link',title: "初二学生"}
+ },
+ ]
+ }
+]
+export default routes
+```
diff --git "a/32\345\215\261\346\231\250/2023-05-8\345\233\276\347\211\207\345\260\201\350\243\205.md" "b/32\345\215\261\346\231\250/2023-05-8\345\233\276\347\211\207\345\260\201\350\243\205.md"
new file mode 100644
index 0000000..35059cd
--- /dev/null
+++ "b/32\345\215\261\346\231\250/2023-05-8\345\233\276\347\211\207\345\260\201\350\243\205.md"
@@ -0,0 +1,79 @@
+# 图片封装
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+
+
+```
+
+# 数据
+
+```js
+const menus = reactive([
+ {
+ title: '年级管理',
+ meta:{icon:'menu'}
+ },
+ {
+ title: '教师管理',
+ meta:{icon:'link'},
+ children: [
+ {
+ title: "初级教师",
+ crouter: './menuleft',
+ meta:{icon:'setting'}
+ },
+ {
+ title: "中级教师",
+ crouter: './menunew',
+ meta:{icon:'ChatRound'}
+ },
+ ]
+ },
+ {
+ title: '学生管理',
+ meta:{icon:'setting'},
+ children: [
+ {
+ title: "初一学生",
+ crouter: null,
+ meta:{icon:'ChatRound'}
+ },
+ {
+ title: "初二学生",
+ crouter: null,
+ meta:{icon:'link'}
+ },
+ ]
+ },
+])
+
+```
\ No newline at end of file
diff --git "a/32\345\215\261\346\231\250/2023-05-9.\344\276\247\350\276\271\346\240\217\347\274\251\350\277\233.md" "b/32\345\215\261\346\231\250/2023-05-9.\344\276\247\350\276\271\346\240\217\347\274\251\350\277\233.md"
new file mode 100644
index 0000000..6a5aefe
--- /dev/null
+++ "b/32\345\215\261\346\231\250/2023-05-9.\344\276\247\350\276\271\346\240\217\347\274\251\350\277\233.md"
@@ -0,0 +1,38 @@
+# 边侧栏缩进
+
+进入页面侧边栏为折叠状态，点击图标,**图标旋转侧边栏在折叠和伸张二者之间变换**
+1. 图片旋转通过**transform: rotate(-90deg)**样式来实现，样式不存在时图片指向左，样式存在时图片逆时针旋转90度指向下，
+通过v-bind绑定响应式对象来改变样式的存在状态
+2. 侧边栏缩进通过elementUL提供的**collapse**来实现，collapse是布尔类型通过动态绑定一个响应式对象来切换侧边栏状态
+```js
+import { ref ,reactive,computed} from 'vue'
+// 初始化一个响应式对象spin,页面加载是样式为false
+const spin = reactIve({
+ imgSpin:false
+})
+// 用户点击图片触发事件
+const buttonImg = function(){
+ // spin.imgSpin的值随点击变化
+ spin.imgSpin = !spin.imgSpin
+ // isCollapse.value的值随点击变化
+ isCollapse.value = !isCollapse.value
+}
+// 初始化一个响应式对象isCollapse
+const isCollapse = ref(true)
+```
+```html
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
--
Gitee