>  기사  >  웹 프론트엔드  >  AntDesign Vue의 메뉴 메뉴 사용법을 간략하게 이해해 보겠습니다.

AntDesign Vue의 메뉴 메뉴 사용법을 간략하게 이해해 보겠습니다.

青灯夜游
青灯夜游앞으로
2021-12-20 11:33:135536검색

이 글에서는 Ant Design Vue에서 메뉴 메뉴를 사용하는 방법과 공통 속성, 공통 이벤트, 다단계 메뉴를 재귀적으로 중첩하는 방법에 대해 설명하겠습니다. 모든 분들께 도움이 되기를 바랍니다.

AntDesign Vue의 메뉴 메뉴 사용법을 간략하게 이해해 보겠습니다.

버전 ant-design-vue: "^1.7.4",ant-design-vue: "^1.7.4",

常用属性

属性 说明 默认值
mode 菜单类型,现在支持垂直、水平、和内嵌模式三种 vertical
inlineCollapsed inline 时菜单是否收起状态
theme 主题颜色(light/dark) light
openKeys(.sync) 当前展开的 SubMenu 菜单项 key 数组
defaultOpenKeys 初始展开的 SubMenu 菜单项 key 数组
selectedKeys(v-model) 当前选中的菜单项 key 数组
defaultSelectedKeys 初始选中的菜单项 key 数组

说明
defaultSelectedKeys 是默认选中的keya-menu-item上绑定的key),被选中会有高亮的显示效果;selectedKeys 也是一样的作用,不要同时使用,区别在于如果只希望指定一个初始化的菜单选项就使用defaultSelectedKeys,如果需要通过自己修改数据来选中菜单的选中项就使用selectedKeys

openKeysdefaultOpenKeys也是同理)

常用事件

openChangeMenu的事件,SubMenu 展开/关闭的回调

递归嵌套多级菜单

若只有两级菜单则直接使用v-forv-if指令即可完成;若菜单级数≥3则需要使用函数式组件。具体原因官网已经做了说明:

Before v2.0, 因组件内部会动态更改a-sub-menu的属性,如果拆分成单文件,无法将属性挂载到a-sub-menu上,你需要自行声明属性并挂载。为了方便,避免属性的声明,我们推荐使用函数式组件。

代码
App.vue (测试就随便在App.vue里写了)

<template>
    <div id="app">
        <div style="width: 256px">
            <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
            <a-icon :type="collapsed ? &#39;menu-unfold&#39; : &#39;menu-fold&#39;" />
            </a-button>
            <a-menu
                :defaultSelectedKeys="[$route.path]"
                :openKeys="openKeys"
                mode="inline"
                theme="dark"
                :inline-collapsed="collapsed"
                @openChange="onOpenChange"
                @click="menuClick"
            >
                <template v-for="item in list">
                    <a-menu-item v-if="!item.children" :key="item.path">
                        <a-icon type="pie-chart" />
                        <span>{{ item.title }}</span>
                    </a-menu-item>
                    <sub-menu v-else :key="item.path" :menu-info="item" />
                </template>
            </a-menu>
        </div>
        <router-view/>
    </div>
</template>

<script>
import { Menu } from &#39;ant-design-vue&#39;;
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.path">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.path" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: &#39;SubMenu&#39;,
  // must add isSubMenu: true 此项必须被定义
  isSubMenu: true,
  props: {
    // 解构a-sub-menu的属性,也就是文章开头提到的为什么使用函数式组件
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};

export default {
    name: "App",
    components: {
        &#39;sub-menu&#39;: SubMenu,
    },
    data() {
        return {
            collapsed: false,
            openKeys: [],
            rootSubmenuKeys: [&#39;/user&#39;],
            list: [
                {
                    key: &#39;1&#39;,
                    title: &#39;信息管理&#39;,
                    path: &#39;/info&#39;,
                },
                {
                    key: &#39;2&#39;,
                    title: &#39;用户管理&#39;,
                    path: &#39;/user&#39;,
                    children: [
                        { 
                            key: &#39;2.1&#39;,
                            title: &#39;后台用户&#39;,
                            path: &#39;/adminUser&#39;,
                            children: [
                                { 
                                    key: &#39;2.1.1&#39;,
                                    title: &#39;新增用户&#39;,
                                    path: &#39;/addAdminUser&#39;,
                                    children: [
                                        {
                                            key: &#39;2.1.1。1&#39;,
                                            title: &#39;用户xx&#39;,
                                            path: &#39;/addAdminUserXX&#39;,
                                        }
                                    ]
                                }
                            ]
                        },
                        { 
                            key: &#39;2.2&#39;,
                            title: &#39;前台用户&#39;,
                            path: &#39;/frontUser&#39;,
                        }
                    ]
                }
            ],
        };
    },
    created(){
        const openKeys = window.sessionStorage.getItem(&#39;openKeys&#39;)
        if(openKeys){
            this.openKeys = JSON.parse(openKeys)
        }
    },
    methods: {
        toggleCollapsed() {
            this.collapsed = !this.collapsed;
        },
        onOpenChange(openKeys) {
            // 将当前打开的父级菜单存入缓存中
            window.sessionStorage.setItem(&#39;openKeys&#39;, JSON.stringify(openKeys))
            //  控制只打开一个
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        },
        menuClick({key}) {
            // 获取到当前的key,并且跳转
            this.$router.push({
                path: key
            })
        },
    }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 50px;
}
</style>

这里省略了router配置,相信在座的各位也会!(不会的底下留言,包教包会!)

如果vue报编译错误You are using the runtime-only build of Vue,可以在vue的配置文件里加一行runtimeCompiler: true,重新运行即可。

如果点击同一个菜单报错了NavigationDuplicated: Avoided redundant navigation to current location,需要修改下Router设置(router/index.js

공통 속성

속성 설명 기본값
모드 메뉴 유형이 이제 수직, 수평 및 인라인 모드를 지원합니다 세로
inlineCollapsed 인라인 메뉴 닫힘 여부
테마 테마 색상(밝음/어두움) 밝음
openKeys(.sync) 현재 확장된 하위 메뉴 메뉴 항목 배열
defaultOpenKeys 처음에 확장된 SubMenu 메뉴 항목 key 배열
selectedKeys(v-model) 현재 선택된 메뉴 항목 배열
defaultSelectedKeys 처음에 선택된 메뉴 항목 key 배열
설명
defaultSelectedKeys 는 기본적으로 선택된 (a-menu-item에 바인딩된 )입니다. selected; selectedKeys도 동일한 효과를 가지므로 동시에 사용하지 마십시오. 차이점은 초기화된 메뉴 옵션만 지정하려는 경우 defaultSelectedKeys를 사용한다는 것입니다. 데이터를 직접 수정하여 메뉴에서 선택한 항목을 선택해야 하는 경우 selectedKeys를 사용하세요.

AntDesign Vue의 메뉴 메뉴 사용법을 간략하게 이해해 보겠습니다. (openKeysdefaultOpenKeys에도 동일하게 적용됨)

공통 이벤트

openChange메뉴의 이벤트입니다. >, 하위 메뉴 확장/닫기 콜백재귀적으로 중첩된 다중 레벨 메뉴

🎜2레벨 메뉴만 있는 경우 v-forv-를 사용하세요. if 코드> 명령을 완료할 수 있습니다. 메뉴 레벨 수가 3 이상인 경우 <code>기능 구성 요소를 사용해야 합니다. 구체적인 이유는 공식 홈페이지에 설명되어 있습니다: 🎜🎜🎜v2.0 이전에는 a-sub-menu의 속성이 단일 파일의 경우 속성을 마운트할 수 없습니다. 하위 메뉴에서 속성을 직접 선언하고 마운트해야 합니다. 편의를 위해 그리고 속성 선언을 피하기 위해 기능적 구성 요소를 사용하는 것이 좋습니다. 🎜🎜코드
App.vue (테스트는 App.vue로 작성되었습니다.)🎜
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
🎜 여기서는 라우터 구성이 생략되었습니다. 여기 있는 모든 사람도 똑같이 할 것이라고 믿습니다! (모르시면 아래에 메시지 남겨주시면 가르쳐드리겠습니다!) 🎜🎜🎜vue에서 컴파일 오류가 발생하는 경우 런타임 전용 빌드를 사용하고 계십니다. Vue의 경우 구성 파일에 runtimeCompiler: true 줄을 추가하고 다시 실행할 수 있습니다. 🎜🎜동일 메뉴를 클릭했는데 NavigationDuplicated: 회피됨 중복 탐색 현재 위치 오류가 보고되면 라우터 설정을 수정해야 합니다(router/index.js ): 🎜rrreee🎜Effect🎜🎜🎜🎜🎜 자동으로 다중 레벨 중첩 메뉴를 렌더링합니다. 새로 고치면 메뉴를 클릭하여 다른 모든 확장 메뉴가 축소됩니다. 🎜🎜【관련 추천: "🎜vue.js tutorial🎜"】🎜

위 내용은 AntDesign Vue의 메뉴 메뉴 사용법을 간략하게 이해해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제