[Vue3 Museum Management System] Vue3 および Element-plus メニュー コンポーネントを使用してフロントエンド ユーザー メニューを構築する

シリーズ記事ディレクトリ

最初の章では、上部、中央、下部 (上部メニュー、下部エリア、中央のメインエリア表示) の 3 層構造のホームページをカスタマイズします。 第 2 章では、Vue3、Element-
plus メニュー コンポーネントを使用してメニューを構築します。
[第 3 章では、Vue3、Element-plus を使用します。ホイールを構築するためのメニュー コンポーネント ブロードキャスト マップ]
[第 4 章 Vu​​e3、Element-plus メニュー コンポーネントを使用してグループ マップを構築する記事]

---

序文

前の章では博物館管理システムの基礎を示し、基本的な製品アーキテクチャとフレームワークが整備されました。
この章では、行うことは 1 つあります。親子メニューを含む、上部エリアにメニューを構築します。

1.Element-plusのナビゲーションコンポーネントNavMenuを学習する

1.1、NavMenu ナビゲーション メニュー

サイトのナビゲーションを提供するメニュー

1.2. 水平ナビゲーションメニュー

ナビゲーション メニューのデフォルトは垂直モードですが、mode 属性を使用してナビゲーション メニューを水平モードに変更できます。
前の章では、ページ レイアウトで上部に水平モードのメニューである水平ナビゲーション メニュー レイアウトを使用しました。そのため、水平ナビゲーション メニューが必要です。早速、コードに進みましょう。

<el-menu
            :default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409eff"
            router
            :collapse="false"
        >
        ....................
</el-menu>

1.3. 完全なトップエリアデータとエフェクト表示

	<!-- 顶栏容器 -->
      <el-header style="margin-top: 10px;">
        <el-menu
            :default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409eff"
            router
            :collapse="false"
        >
          <div class="logo" style="width: 10%;" >
            <router-link to="/">
              <span style="width: 240px; position: absolute; top: 20px; left: 60px; ">罗刹海市博物馆</span>
              <img  src="./assets/logo.png" style="height: 50px;" alt />
            </router-link>
          </div>
          <el-menu-item index="/" >首页</el-menu-item>
          <el-sub-menu index="/about" >关于我们</el-sub-menu>
           <el-menu-item index="/clzl">陈列展览</el-menu-item>
          <el-menu-item index="/sc">收藏</el-menu-item>
          <el-menu-item index="/cg">参观</el-menu-item>
          <el-menu-item index="/hd" > <template #title>活动</template></el-menu-item>
          <el-menu-item index="/xx" >学习</el-menu-item>
          <el-menu-item index="/yj" >研究</el-menu-item>
        </el-menu>
      </el-header>

1.4、別のサブメニュー コードと効果

メニューでは、サブメニュー コンポーネントによって二次メニューを生成できます。

	<el-container>
      <!-- 顶栏容器 -->
      <el-header style="margin-top: 10px;">
        <el-menu
            :default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409eff"
            router
            :collapse="false"
        >
          <div class="logo" style="width: 10%;" >
            <router-link to="/">
              <span style="width: 240px; position: absolute; top: 20px; left: 60px; ">罗刹海市博物馆</span>
              <img  src="./assets/logo.png" style="height: 50px;" alt />
            </router-link>
          </div>
          <el-menu-item index="/" >首页</el-menu-item>
          <el-sub-menu index="/about" >
            <template #title>关于我们</template>
            <el-menu-item index="/about/gk">概況</el-menu-item>
            <el-menu-item index="/about/ls">历史</el-menu-item>
            <el-menu-item index="/about/zjjs">专家介绍</el-menu-item>
            <el-menu-item index="/about/yzzc">院长致辞</el-menu-item>
            <el-menu-item index="/about/mhgs">幕后故事</el-menu-item>
            <el-menu-item index="/about/bwgzy">博物馆之友</el-menu-item>
            <el-menu-item index="/about/xwzx">新闻资讯</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/clzl">陈列展览</el-menu-item>
          <el-menu-item index="/sc">收藏</el-menu-item>
          <el-menu-item index="/cg">参观</el-menu-item>
          <el-menu-item index="/hd" > <template #title>活动</template></el-menu-item>
          <el-menu-item index="/xx" >学习</el-menu-item>
          <el-menu-item index="/yj" >研究</el-menu-item>
        </el-menu>
      </el-header>

1.5. メニューのAPIを学ぶ

1.5.1、メニュー属性

パラメータ	説明する	タイプ	オプションの値	デフォルト
モード	モデル	弦	水平垂直	垂直
崩壊	折りたたみメニューを水平方向に折りたたむかどうか (モードが垂直の場合のみ使用可能)	ブール値	—	間違い
背景色	メニューの背景色 (16 進形式のみをサポート)	弦	—	#ffffff
テキストの色	メニューのテキストの色 (16 進形式のみをサポート)	弦	—	#303133
アクティブテキストの色	現在アクティブなメニューのテキストの色 (16 進形式のみをサポート)	弦	—	#409EFF
デフォルトアクティブ	現在アクティブなメニューのインデックス	弦	—	—
デフォルトで開かれたもの	現在開いているサブメニューのインデックスの配列	配列	—	—
ユニークなオープン	サブメニューを 1 つだけ展開したままにするかどうか	ブール値	—	間違い
メニュートリガー	サブメニューを開くためのトリガーメソッド（モードが水平の場合のみ有効）	弦	ホバー/クリック	ホバリング
ルーター	vue-router モードを使用するかどうか。このモードを有効にすると、ナビゲーションがアクティブ化されたときにジャンプ ブール値をルーティングするためのパスとしてインデックスが使用されます。	—	間違い
崩壊-遷移	折りたたみアニメーションを有効にするかどうか	ブール値	—	真実

1.5.2、メニューメソッド

メソッド名	説明する	パラメータ
開ける	指定したサブメニューを展開します	Index: 開く必要があるサブメニューのインデックス
近い	指定したサブメニューを折りたたむ	Index: 折りたたむ必要があるサブメニューのインデックス

1.5.3、メニューイベント

イベント名	説明する	コールバックパラメータ
選択する	メニューアクティブ化コールバック	Index: 選択したメニュー項目のインデックス、indexPath: 選択したメニュー項目のインデックス パス
開ける	サブメニュー展開のコールバック	Index: 開かれたサブメニューのインデックス、indexPath: 開かれたサブメニューのインデックス パス
近い	サブメニュー折りたたみのコールバック	Index: 折りたたまれたサブメニューのインデックス、indexPath: 折りたたまれたサブメニューのインデックス パス

1.5.4、サブメニュー属性

パラメータ	説明する	タイプ	オプションの値	デフォルト
索引	ユニークなロゴ	文字列/ヌル	—	ヌル
ポッパークラス	ポップアップメニューのカスタムクラス名	弦	—	—
ショータイムアウト	サブメニューを展開するまでの遅延	番号	—	300
非表示タイムアウト	サブメニューを折りたたむ遅延	番号	—	300
無効	ブール値を無効にするかどうか	—	間違い
ポッパー-ボディに追加	body要素にポップアップメニューを挿入するかどうか。メニューの位置に問題がある場合は、このプロパティを変更してみてください。	ブール値	—	第 1 レベルのサブメニュー: true / 第 1 レベル以外のサブメニュー: false

1.5.5、メニュー項目属性

パラメータ	説明する	タイプ	オプションの値	デフォルト
索引	ユニークなロゴ	弦	—	—
ルート	ルータービュー	パスオブジェクト	物体	—
無効	無効にするかどうか	ブール値	—	間違い

---

要約する

以上が今日お話したいことですが、この記事では、Element-plus メニュー、メニューの方向、サブメニュー、メニューとサブメニューの属性、スタイルなどを含む、博物館管理フロントエンド ユーザー ナビゲーション メニューのレイアウトを簡単に紹介するだけです。