AntDesign Vue のメニュー メニューの使用法を簡単に理解します。

この記事では、Ant Design Vue の [メニュー] メニューの使用方法、その共通プロパティ、共通イベント、およびマルチレベル メニューを再帰的にネストする方法を紹介します。

バージョンant-design-vue: "^1.7.4",

共通属性

#selectedKeys(v-model)現在選択されているメニュー項目##defaultSelectedKeyskey##説明

属性	説明	デフォルト値
#mode	メニュー タイプ、垂直モード、水平モード、およびインライン モードをサポートするようになりました	vertical
inlineCollapsed	inline メニューが折りたたまれた状態かどうか
theme	テーマの色(light/dark)	light
openKeys(.sync)	現在展開されている SubMenu メニュー項目 key array
defaultOpenKeys	最初に展開されたSubMenu メニュー項目key Array
	key Array
最初に選択されているメニュー項目	配列

defaultSelectedKeys これは
key# です## デフォルトで選択されており (key は a-menu-item にバインドされています)、選択すると強調表示されます。selectedKeys も同じ効果があります。これらを同時に使用しないでください。違いは、初期化されたメニュー オプションのみを指定したい場合は、defaultSelectedKeys を使用することです。メニューの選択された項目を選択するためにデータを自分で変更する必要がある場合は、 selectedKeys を使用します。 (同じことが openKeys と

defaultOpenKeys

にも当てはまります) 共通イベント

openChange

は

Menu

イベント、SubMenu コールバックの展開/クローズ再帰的にネストされた複数レベルのメニュー2 レベルのメニューしかない場合は、それを直接使用します

v -for

および

v-if

命令は完了できます。メニュー レベルが 3 以上の場合は、 機能コンポーネント を使用する必要があります。具体的な理由は公式 Web サイトで説明されています: v2.0 より前は、a-sub-menu

のプロパティがコンポーネント内で動的に変更されるためです。は単一のファイルに分割されているため、属性を

a-sub-menu

にマウントするには、属性を自分で宣言してマウントする必要があります。便宜上、またプロパティ宣言を避けるために、関数コンポーネントを使用することをお勧めします。 Code

App.vue (テストは App.vue
で記述されています)<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;div style=&quot;width: 256px&quot;&gt; &lt;a-button type=&quot;primary&quot; style=&quot;margin-bottom: 16px&quot; @click=&quot;toggleCollapsed&quot;&gt; &lt;a-icon :type=&quot;collapsed ? &amp;#39;menu-unfold&amp;#39; : &amp;#39;menu-fold&amp;#39;&quot; /&gt; &lt;/a-button&gt; &lt;a-menu :defaultSelectedKeys=&quot;[$route.path]&quot; :openKeys=&quot;openKeys&quot; mode=&quot;inline&quot; theme=&quot;dark&quot; :inline-collapsed=&quot;collapsed&quot; @openChange=&quot;onOpenChange&quot; @click=&quot;menuClick&quot; &gt; &lt;template v-for=&quot;item in list&quot;&gt; &lt;a-menu-item v-if=&quot;!item.children&quot; :key=&quot;item.path&quot;&gt; &lt;a-icon type=&quot;pie-chart&quot; /&gt; &lt;span&gt;{{ item.title }}&lt;/span&gt; &lt;/a-menu-item&gt; &lt;sub-menu v-else :key=&quot;item.path&quot; :menu-info=&quot;item&quot; /&gt; &lt;/template&gt; &lt;/a-menu&gt; &lt;/div&gt; &lt;router-view/&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import { Menu } from &amp;#39;ant-design-vue&amp;#39;; const SubMenu = { template: ` &lt;a-sub-menu :key=&quot;menuInfo.key&quot; v-bind=&quot;$props&quot; v-on=&quot;$listeners&quot;&gt; &lt;span slot=&quot;title&quot;&gt; &lt;a-icon type=&quot;mail&quot; /&gt;&lt;span&gt;{{ menuInfo.title }}&lt;/span&gt; &lt;/span&gt; &lt;template v-for=&quot;item in menuInfo.children&quot;&gt; &lt;a-menu-item v-if=&quot;!item.children&quot; :key=&quot;item.path&quot;&gt; &lt;a-icon type=&quot;pie-chart&quot; /&gt; &lt;span&gt;{{ item.title }}&lt;/span&gt; &lt;/a-menu-item&gt; &lt;sub-menu v-else :key=&quot;item.path&quot; :menu-info=&quot;item&quot; /&gt; &lt;/template&gt; &lt;/a-sub-menu&gt; `, name: &amp;#39;SubMenu&amp;#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: () =&gt; ({}), }, }, }; export default { name: &quot;App&quot;, components: { &amp;#39;sub-menu&amp;#39;: SubMenu, }, data() { return { collapsed: false, openKeys: [], rootSubmenuKeys: [&amp;#39;/user&amp;#39;], list: [ { key: &amp;#39;1&amp;#39;, title: &amp;#39;信息管理&amp;#39;, path: &amp;#39;/info&amp;#39;, }, { key: &amp;#39;2&amp;#39;, title: &amp;#39;用户管理&amp;#39;, path: &amp;#39;/user&amp;#39;, children: [ { key: &amp;#39;2.1&amp;#39;, title: &amp;#39;后台用户&amp;#39;, path: &amp;#39;/adminUser&amp;#39;, children: [ { key: &amp;#39;2.1.1&amp;#39;, title: &amp;#39;新增用户&amp;#39;, path: &amp;#39;/addAdminUser&amp;#39;, children: [ { key: &amp;#39;2.1.1。1&amp;#39;, title: &amp;#39;用户xx&amp;#39;, path: &amp;#39;/addAdminUserXX&amp;#39;, } ] } ] }, { key: &amp;#39;2.2&amp;#39;, title: &amp;#39;前台用户&amp;#39;, path: &amp;#39;/frontUser&amp;#39;, } ] } ], }; }, created(){ const openKeys = window.sessionStorage.getItem(&amp;#39;openKeys&amp;#39;) if(openKeys){ this.openKeys = JSON.parse(openKeys) } }, methods: { toggleCollapsed() { this.collapsed = !this.collapsed; }, onOpenChange(openKeys) { // 将当前打开的父级菜单存入缓存中 window.sessionStorage.setItem(&amp;#39;openKeys&amp;#39;, JSON.stringify(openKeys)) // 控制只打开一个 const latestOpenKey = openKeys.find(key =&gt; 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 }) }, } }; &lt;/script&gt; &lt;style&gt; #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 50px; } &lt;/style&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> router 設定はここでは省略されていますが、ここにいる誰もが同じことを行うと思います。 (分からない場合は、以下にメッセージを残してください。教えていただければ幸いです!)

vue

がコンパイル エラーを報告した場合

You are using Vue

のランタイム専用ビルド。#runtimeCompiler: true という行を Vue 構成ファイルに追加して、再度実行できます。 同じメニューをクリックするとエラーが報告される場合 NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました

、

Router

設定を変更する必要があります (router/index.js): <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err =&gt; err) }</pre><div class="contentsignin">ログイン後にコピー</div></div>Effect

マルチレベルのネストされたメニューを自動的にレンダリングします。更新すると、選択したメニューが保存されます。メニューをクリックして、展開された他のすべてのメニューを閉じます。

[関連する推奨事項:「

vue.js チュートリアル

」]

以上がAntDesign Vue のメニュー メニューの使用法を簡単に理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。