PCとモバイルの側面にあるElement-UI Horizo​​ntalメニューEl-Menuのラベルサイズを調整して調整する方法は？

Element-UI Horizo​​ntal Menu El-Menu：PCとモバイル端子とラベルサイズの調整の間の適応

Element-UIのel-menuコンポーネントは強力ですが、開発者はPCやモバイルに適応する際に追加の処理が必要になることがよくあります。この記事ではmode="horizontal"モードでメニューラベルのサイズを調整する方法と、モバイル側のホバリングとクリックの違いに対処する方法について説明します。

質問：

mode="horizontal" el-menuを使用して、PC側では、予想どおり、メニュー項目がホバリングして拡張され、閉じられています。ただし、モバイル端末では、この相互作用は無効です。クリックしてサブメニューを展開し、クリックして他の領域で閉じる必要があります。さらに、開発者はメニューラベルのサイズを変更できることも望んでいます。

コード例：

次のコードは、1番目と2番目のメニューを含む水平el-menuを示しています。 PC側は正常ですが、モバイルターミナルメニューを拡張/閉じる必要があります。

<el-menu :ellipsis="ellipsis" active-text-color="#ffd04b" background-color="#1b80e9" class="el-menu-demo" mode="horizontal" ref="menu" text-color="#fff">
  <el-menu-item index="0">
    <a target="_blank">フロントページ</a></el-menu-item>
  <el-menu-item index="1">
    <a target="_blank">イベントニュース</a></el-menu-item>
  <el-sub-menu index="2">
    <template>ナショナルフィットネス</template>
    <el-menu-item index="2-1">スイミングプールの紹介</el-menu-item>
    <el-menu-item index="2-2">料金の発表</el-menu-item>
    <el-menu-item index="2-3">サービススタッフの発表</el-menu-item>
    <el-menu-item index="2-4">規則と規制の公告</el-menu-item>
  </el-sub-menu>
</el-menu>

方法：{
  handleOpen（key、keypath）{
    console.log（ "open：key =" key、 "keypath =" keypath）;
  }、
  handleclose（key、keypath）{
    console.log（ "close：key =" key、 "keypath =" keypath）;
  }
}

解決：

• メニュータグサイズ： CSSスタイルを使用して、フォントサイズ（ font-size ）とマージン（ padding ）を制御します。例えば：

 .el-menu-demo .el-menu-item {
  フォントサイズ：14px;
  パディング：0 15px;
}

• モバイルの適応： el-menu 、モバイル側のクリックアンドエクスパンドモードに自動的に切り替えます。これは、間違いではなく、レスポンシブデザインの一部です。モバイル側のPC側のホバー効果を維持する必要がある場合は、コンポーネントをカスタマイズするか、他のUIライブラリを検討する必要があります。メディアクエリを使用して、画面幅に基づいてスタイルを調整できます。

 @media（max-width：768px）{
  .el-menu-demo {
    /*モバイルスタイル*/
  }
}

CSSスタイルの調整とレスポンシブデザインを通じて、さまざまなデバイスでのel-menuの表示と相互作用の問題を効果的に解決し、それによりユーザーエクスペリエンスを改善できます。より複雑な相互作用ロジックが必要な場合は、カスタムコンポーネントを検討するか、他のより柔軟なUIコンポーネントを使用する必要があります。

以上がPCとモバイルの側面にあるElement-UI Horizo​​ntalメニューEl-Menuのラベルサイズを調整して調整する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。