From 9e53ddf1f8e4d97660ffd4408a2b6d60225179bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=B1?= <1954960364@qq.com>
Date: Sun, 14 May 2023 12:33:40 +0000
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

Signed-off-by: 李昱 <1954960364@qq.com>
---
 ...46\240\207icon\346\227\213\350\275\254.md" | 43 +++++++++++++++++++
 ...71\346\241\206\350\256\276\347\275\256.md" | 24 +++++++++++
 .../2023-05-11-\345\270\203\345\261\200.md"   | 30 +++++++++++++
 .../2023-05-12-\350\217\234\345\215\225.md"   | 16 +++++++
 4 files changed, 113 insertions(+)
 create mode 100644 "14\346\235\216\346\230\261/2023-05-08-Element-\345\233\276\346\240\207icon\346\227\213\350\275\254.md"
 create mode 100644 "14\346\235\216\346\230\261/2023-05-09-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md"
 create mode 100644 "14\346\235\216\346\230\261/2023-05-11-\345\270\203\345\261\200.md"
 create mode 100644 "14\346\235\216\346\230\261/2023-05-12-\350\217\234\345\215\225.md"

diff --git "a/14\346\235\216\346\230\261/2023-05-08-Element-\345\233\276\346\240\207icon\346\227\213\350\275\254.md" "b/14\346\235\216\346\230\261/2023-05-08-Element-\345\233\276\346\240\207icon\346\227\213\350\275\254.md"
new file mode 100644
index 0000000..78fc018
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-05-08-Element-\345\233\276\346\240\207icon\346\227\213\350\275\254.md"
@@ -0,0 +1,43 @@
+# 注册所有图标
+
+* 您需要从 @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/14\346\235\216\346\230\261/2023-05-09-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md" "b/14\346\235\216\346\230\261/2023-05-09-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md"
new file mode 100644
index 0000000..7e8c4bb
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-05-09-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md"
@@ -0,0 +1,24 @@
+# Menu 菜单
+
+* 为网站提供导航功能的菜单。
+
+1. 顶栏
+2. 左右
+3. 侧栏
+4. 折叠面板
+
+# Menu Attributes
+
+* 属性名：collapse  说明：是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）  类型：boolean   默认值：false
+* 属性名：text-color    说明：字体颜色
+* 属性名:active-text-color  说明：选中菜单栏时字体颜色
+* 属性名：index 说明：唯一标志	
+* 插槽名：title 说明：自定义标题内容
+* 事件名：click 说明：点击菜单时的回调函数
+
+# Menu的border-size
+```
+.el-menu{
+    border-size:solid 1px '选择合适的颜色'
+}
+```
diff --git "a/14\346\235\216\346\230\261/2023-05-11-\345\270\203\345\261\200.md" "b/14\346\235\216\346\230\261/2023-05-11-\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..75eabe5
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-05-11-\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/14\346\235\216\346\230\261/2023-05-12-\350\217\234\345\215\225.md" "b/14\346\235\216\346\230\261/2023-05-12-\350\217\234\345\215\225.md"
new file mode 100644
index 0000000..bb096c8
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-05-12-\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