Menu的使用

2021-12-15 18:32:02 阅读：177 来源： 互联网

标签：菜单 Layout Menu component https 使用组件

接着上一篇文章的Layout布局，继续在那个Demo基础上添加代码：

1、修改App.vue的LayoutSider：

    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['1']"
        :default-open-keys="['sub1', 'sub2']"
      >
        <a-menu-item key="1">
          <a-icon type="mail" />
          一级菜单1
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="calendar" />
          一级菜单2
        </a-menu-item>
        <a-sub-menu key="sub1">
          <span slot="title">
            <a-icon type="appstore" />
            <span>一级菜单3</span>
          </span>
          <a-menu-item key="3">二级菜单31</a-menu-item>
          <a-menu-item key="4">二级菜单32</a-menu-item>
          <a-sub-menu key="sub1-2" title="Submenu">
            <a-menu-item key="5">三级菜单321</a-menu-item>
            <a-menu-item key="6">三级菜单322</a-menu-item>
          </a-sub-menu>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title">
            <a-icon type="setting" />
            <span>一级菜单4</span>
          </span>
          <a-menu-item key="7">二级菜单41</a-menu-item>
          <a-menu-item key="8">二级菜单42</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

2、注册Menu组件，main.js中添加代码：

引入组件：

import { Menu } from 'ant-design-vue'

注册组件：

Vue.component(Menu.name, Menu)
Vue.component(Menu.SubMenu.name, Menu.SubMenu)
Vue.component(Menu.Item.name, Menu.Item)

3、组件的引入，可以跟Layout写在一起：

import { Layout, Icon, Menu } from 'ant-design-vue'

4、编译并启动服务：

npm run serve

浏览器运行如下图：

参考文档：https://antdv.com/components/layout-cn

https://antdv.com/components/menu-cn/

Demo地址：https://gitee.com/yjh4866/antdv

标签：菜单,Layout,Menu,component,https,使用,组件
来源： https://blog.csdn.net/yjh4866/article/details/121958010

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Menu的使用