日常

vue/vue3 Ant框架.md

@@ -23,7 +23,7 @@
 
 ### 2. `vue3` 中,配置 `ant`
 > 全局配置ant
-> 在vue3中全局挂载模块和vue2中有一点区别,但是基本差不多
+> 在vue3中全局挂载模块和vue2中有一点区别, 区别不大
 
 编辑 `src` 目录下的 `main.js` ,使用 `app.use` 来进行导入,支持链式调用
 ```javascript
@@ -38,15 +38,172 @@ app.mount("#app");
 createApp(app).use(xxx).use(xxx).use(Antd)
 ```
 
-## `vue3` 递归渲染 `ant` 框架的 sidebar
-#### 思路解析
-侧边栏部分可以使用 `ant` 的布局 `Layout` 来实现,配合 `ant` 的 导航菜单 `a-menu` 子菜单使用
-#### 文件结构
-#### 示例代码
-#### 踩过的坑
+## 递归渲染 `sidebar`
+#### 1. 思路解析
+侧边栏部分可以使用 `ant` 的布局 `Layout` 来实现,配合 `ant` 的导航菜单 `a-menu` 子菜单使用 `a-sub-menu` 来实现多层级
+```html
+<a-menu>
+    <a-menu-item>目录1</a-menu_item> 
+    <a-sub-menu title="目录2">
+        <a-menu-item>子目录1</a-menu-item>
+        <a-menu-item>子目录2</a-menu-item>
+    </a-sub-menu>
+</a-menu>
+``` 
+如上方代码显示的结构将会显示为
+<hr>
+ 目录1
+<details>
+<summary> 目录2 </summary>
+
+<option>目录2的子目录1</option>
+<option>目录2的子目录2</option>
+</details>
+<hr>
+
+通过递归循环渲染此结构即可实现递归渲染 
+
+#### 2. 文件结构
+1. 文件夹目录结构,创建 主要使用 sidebar.js
+url
+    app.js
+    components
+        sidebars
+            sidebar.js
+2. 示例数据结构
+```javascript
+[
+    {
+        text: '摄像头',// 页面标题
+        is_menus: true,//是否为侧边栏的大项
+        children: [
+            {
+                is_menu: true,
+                text: '摄像头列表',
+                path: '/cameraList',
+                name: 'Home',
+                component: Home
+            },
+            {
+                is_menu: true,
+                text: '录像',
+                path: '/cameraVideo',
+                name: 'Home',
+                component: Home
+            }
+        ],
+    },
+    {
+        text: '账户',
+        is_menus: true,
+        children: [
+            {
+                is_menu: true,
+                text: '配置',
+                path: '/userConfig',
+                name: 'Home',
+                component: Home
+            }
+        ],
+        
+    },
+    {
+        title: '日志',
+        is_menu: true,//路由项
+        path: '/log',
+        name: 'Log',
+        text: '日志',
+        component: Home
+    }
+]
+``` 
+#### 3. 示例代码
+在 `sidebarMenuItem.js` 中的内容
+```jsx
+<template>
+    <a-menu-item v-if="menu.is_menu" :key="mykey">
+        <router-link :to="menu.path">{{menu.text}}</router-link>
+    </a-menu-item>
+    <a-sub-menu v-if="menu.is_menus" :title="menu.text" :key="mykey">
+        <sidebar-menu-item v-for="(item,i) in menu.children" :mykey="menu.path +'_'+item.path+'_'+i" :menu="item" :key="menu.path +'_'+item.path+'_'+i" ></sidebar-menu-item>
+    </a-sub-menu>
+</template>
+<script>
+export default {
+    name: 'sidebar-menu-item',
+    components: {
+    },
+    props: {
+        menu: {
+            type: Object,
+            default: function (){
+                return {}
+            }
+        },
+        mykey: {
+            type: String,
+            default: ''
+        }
+    },
+    mounted(){
+        console.log(this.menu);
+    }
+}
+</script>
+
+<style>
+
+</style>
+```
+在app.js中使用sidebarMenuItem的内容
+```jsx
+<template>
+  <a-layout id="components-layout-demo-responsive" class="h-full">
+    <a-layout-sider
+      breakpoint="lg"
+      collapsed-width="0"
+      @collapse="onCollapse"
+      @breakpoint="onBreakpoint"
+    >
+      <div class="logo" />
+      <a-menu mode="inline" >
+        <!-- 此处为使用组件 menus为数组  -->
+        <sidebarMenuItem  v-for="(item,i) in menus" :menu="item" :mykey="item.path + '_'+i" :key="'menu_'+item.path + '_'+i" />
+      </a-menu>
+    </a-layout-sider>
+    <a-layout class="h-full flex">
+      <a-layout-content>
+        <router-view/>
+      </a-layout-content>
+      <a-layout-footer style="textAlign: center">
+        ant
+      </a-layout-footer>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script>
+import sidebarMenuItem from './components/sidebars/sidebarMenuItem.vue'
+export default {
+  name: 'App',
+  components: {
+    sidebarMenuItem,
+  },
+  data(){
+    return {
+      menus: []
+    }
+  },
+}
+</script>
+    
+```
+
+#### 4. 注意事项
 > 多看文档,[ant文档地址](https://2x.antdv.com/components/overview-cn/)
 1. 操作一个菜单其他菜单会一起响应.
-    解决方法: 此时需要给每一个 `a-menu-item` 以及 `a-sub-menu` 设置 `key` 值
+    解决方法: 此时需要给每一个 `a-menu-item` 以及 `a-sub-menu` 设置 `key` 值 通过给组件设置 `mykey` 属性赋值给 `key` 值
+2. vue2好像就是这么整的
 3. 渲染出来的子菜单栏在侧边栏旁边生成
     解决方法: 在创建 `a-menu` 组件时设置属性 `mod` 为 `inline`
 ```jsx

简单题目/demo.js

@@ -0,0 +1,12 @@
+let flag = true;
+let obj = {}
+obj.a = fn
+function fn(str){
+    obj.a = []
+    module.exports = obj.a;
+}
+setTimeout(()=>{
+    module.exports = {}
+},1)
+
+module.exports = obj.a;

简单题目/returnfn.js

@@ -0,0 +1,17 @@
+async function fn(){
+    let r = await sleep(1);
+    console.log(r);
+}
+
+fn()
+function sleep(t){
+    return new Promise(resolve=>{
+        setTimeout(()=>{
+            resolve(false)
+        },t)
+    })
+}
+
+function fnn(){
+    return false;
+}

简单题目/test1.js

@@ -0,0 +1,9 @@
+const c = require('./demo');
+console.log(c,'123')
+// c();
+setTimeout(()=>{
+    const c3 = require('./test2');
+    console.log(c)
+},5)
+//const c2 = require('./test2');
+

简单题目/test2.js

@@ -0,0 +1,2 @@
+const c = require('./demo');
+console.log(c,'test2')