`vue3` 使用ant

在 `vue3` 项目中新增 `antd`

此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增

1. 安装 ant to vue3

通过 yarn 或者 npm 进行安装 ant

    yarn  add ant-design-vue@next
    
    # OR
    
    npm i --save ant-design-vue@next

!!! 如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用 vue3.0 方法进行引用会在浏览器内提示 Cannot read property 'use' of undefined ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用 ant 官方安装方法

    npm install ant-design-vue --save
    yarn add ant-design-vue

2. `vue3` 中,配置 `ant`

全局配置ant 在vue3中全局挂载模块和vue2中有一点区别, 区别不大

编辑 src 目录下的 main.js ,使用 app.use 来进行导入,支持链式调用

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
const app = createApp(App);
app.use(Antd);//此处为引用antd 
app.mount("#app");

// 也可以按照下面方式进行引用,xxx为模块
createApp(app).use(xxx).use(xxx).use(Antd)

递归渲染 `sidebar`

1. 思路解析

侧边栏部分可以使用 ant 的布局 Layout 来实现,配合 ant 的导航菜单 a-menu 子菜单使用 a-sub-menu 来实现多层级

<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>

如上方代码显示的结构将会显示为

目录1

目录2

通过递归循环渲染此结构即可实现递归渲染

2. 文件结构

文件夹目录结构,创建主要使用 sidebar.js url app.js components sidebars sidebar.js

示例数据结构

[
{
    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 中的内容

<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的内容

<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文档地址
操作一个菜单其他菜单会一起响应. 解决方法: 此时需要给每一个 a-menu-item 以及 a-sub-menu 设置 key 值通过给组件设置 mykey 属性赋值给 key 值

vue2好像就是这么整的
渲染出来的子菜单栏在侧边栏旁边生成解决方法: 在创建 a-menu 组件时设置属性 mod 为 inline
<a-menu mode="inline"> 其他组件 </a-menu>

vue3_Ant框架.md 5.4 KB History Raw

vue3 使用ant

在 vue3 项目中新增 antd

1. 安装 ant to vue3

2. vue3 中,配置 ant

递归渲染 sidebar