From 5ace9753b2ce8857e57fe19fbb0d51d1d6947524 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=9B=E6=96=87=E8=BD=A9?= <3336438209@qq.com>
Date: Sun, 14 May 2023 20:38:16 +0800
Subject: [PATCH] ikun

---
 ...76\346\240\207\346\227\213\350\275\254.md" | 39 +++++++++++++++++++
 .../20230509-menu\350\276\271\346\241\206.md" | 22 +++++++++++
 .../20230511-\345\270\203\345\261\200.md"     | 30 ++++++++++++++
 .../20230512-\350\217\234\345\215\225.md"     | 16 ++++++++
 4 files changed, 107 insertions(+)
 create mode 100644 "33\347\211\233\346\226\207\350\275\251/20230508-\345\233\276\346\240\207\346\227\213\350\275\254.md"
 create mode 100644 "33\347\211\233\346\226\207\350\275\251/20230509-menu\350\276\271\346\241\206.md"
 create mode 100644 "33\347\211\233\346\226\207\350\275\251/20230511-\345\270\203\345\261\200.md"
 create mode 100644 "33\347\211\233\346\226\207\350\275\251/20230512-\350\217\234\345\215\225.md"

diff --git "a/33\347\211\233\346\226\207\350\275\251/20230508-\345\233\276\346\240\207\346\227\213\350\275\254.md" "b/33\347\211\233\346\226\207\350\275\251/20230508-\345\233\276\346\240\207\346\227\213\350\275\254.md"
new file mode 100644
index 0000000..afe47ce
--- /dev/null
+++ "b/33\347\211\233\346\226\207\350\275\251/20230508-\345\233\276\346\240\207\346\227\213\350\275\254.md"
@@ -0,0 +1,39 @@
+注册所有图标
+您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
+```
+// main.ts
+
+// 如果您正在使用CDN引入，请删除下面一行。
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+```
+
+Attributes
+
+```
+属性名：color 说明：svg 的 fill 颜色  类型：string    默认值：继承颜色
+属性名：size    说明：SVG 图标的大小，size x size 类型：number / string   默认值：继承字体大小
+旋转
+```
+
+```
+<el-icon :class="abc" size="30" @click="iconHandle">
+    <expand> </expand>
+</el-icon>
+
+import { ref, reactive, computed } from 'vue'
+const isCollapse = ref(true);
+const abc = reactive({
+    collapseIcon: true
+})
+const iconHandle = function () {
+    abc.collapseIcon = !abc.collapseIcon
+    isCollapse.value = !isCollapse.value
+}.collapseIcon {
+    transform: rotate(-90deg);
+}
+```
\ No newline at end of file
diff --git "a/33\347\211\233\346\226\207\350\275\251/20230509-menu\350\276\271\346\241\206.md" "b/33\347\211\233\346\226\207\350\275\251/20230509-menu\350\276\271\346\241\206.md"
new file mode 100644
index 0000000..7723692
--- /dev/null
+++ "b/33\347\211\233\346\226\207\350\275\251/20230509-menu\350\276\271\346\241\206.md"
@@ -0,0 +1,22 @@
+Menu 菜单
+```
+为网站提供导航功能的菜单。
+顶栏
+左右
+侧栏
+折叠面板
+```
+
+Menu Attributes
+```
+属性名：collapse 说明：是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） 类型：boolean 默认值：false
+属性名：text-color 说明：字体颜色
+属性名:active-text-color 说明：选中菜单栏时字体颜色
+属性名：index 说明：唯一标志
+插槽名：title 说明：自定义标题内容
+事件名：click 说明：点击菜单时的回调函数
+Menu的border-size
+.el-menu{
+    border-size:solid 1px '选择合适的颜色'
+}
+```
\ No newline at end of file
diff --git "a/33\347\211\233\346\226\207\350\275\251/20230511-\345\270\203\345\261\200.md" "b/33\347\211\233\346\226\207\350\275\251/20230511-\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..647b295
--- /dev/null
+++ "b/33\347\211\233\346\226\207\350\275\251/20230511-\345\270\203\345\261\200.md"
@@ -0,0 +1,30 @@
+```              
+<template>
+        <!-- 遍历传入的菜单数组 -->
+        <template v-for="menu in itemMenus">
+            <!-- 当前菜单对象如果有下级菜单，即有children属性，并且children的长度大于0，则需要使用组件中的子菜单组件el-sub-menu -->
+            <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.title">
+                <template #title>
+                    <el-icon>
+                        <component v-if="menu.meta && menu.meta.icon" :is="menu.meta.icon"></component>
+                        <setting v-else></setting>
+                    </el-icon>
+                    {{ menu.title }}
+                </template>
+                <!-- 重复自己 -->
+                <NavbarItem :item-menus="menu.children"></NavbarItem>
+            </el-sub-menu>
+            <el-menu-item v-else :index="menu.title">
+                <el-icon>
+                    <component v-if="menu.meta && menu.meta.icon" :is="menu.meta.icon"></component>
+                    <setting v-else></setting>
+                </el-icon>
+                {{ menu.title }}
+            </el-menu-item>
+        </template>
+</template>
+<script setup>
+const props = defineProps(['itemMenus'])
+
+</script>
+```
\ No newline at end of file
diff --git "a/33\347\211\233\346\226\207\350\275\251/20230512-\350\217\234\345\215\225.md" "b/33\347\211\233\346\226\207\350\275\251/20230512-\350\217\234\345\215\225.md"
new file mode 100644
index 0000000..bb096c8
--- /dev/null
+++ "b/33\347\211\233\346\226\207\350\275\251/20230512-\350\217\234\345\215\225.md"
@@ -0,0 +1,16 @@
+```
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import  ElementPlus  from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(ElementPlus)
+app.mount('#app')
+```
\ No newline at end of file
-- 
Gitee