【vue.js】Element-uiでのヘッダー作成方法について

現在vue.jsを使用してPC・スマホ両対応のWEBアプリを作成していまして、UIフレームワークにElement-uiを使用しようと考えています。

Elementの使用方法自体は公式サイトを見てなんとなく理解出来ましたがヘッダーの作成方法だけがいまいちよく分かりません。

html
1<el-container>
2  <el-header>
3    <el-menu
4      :default-active="activeIndex2"
5      class="el-menu-demo"
6      mode="horizontal"
7      @select="handleSelect"
8      background-color="#545c64"
9      text-color="#fff"
10      active-text-color="#ffd04b">
11      <el-menu-item index="1">Processing Center</el-menu-item>
12      <el-submenu index="2">
13        <template slot="title">Workspace</template>
14        <el-menu-item index="2-1">item one</el-menu-item>
15        <el-menu-item index="2-2">item two</el-menu-item>
16        <el-menu-item index="2-3">item three</el-menu-item>
17      </el-submenu>
18      <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
19    </el-menu>
20  </el-header>
21  <el-main>
22    <p>メインコンテンツ</p>
23  </el-main>
24</el-container>

公式サイトのソースそのままですが、上記の様に書けば一応ヘッダー自体は作成出来ますが、ホバーした際の背景色などをCSSで指定する方法が分からず、リファレンスを見ても設定項目が無いように思います。

また、公式サイトのソースそのままではレスポンシブデザインではないようで、レスポンシブ化しようとしたら恐らく色々と設定をしなくてはならないのだと思います。
それならいっそのこと、Bootstrapを使用してヘッダを作成してしまえばいいのでは？とも考えたのですが、ヘッダーのためだけにJqueryとpopper.jsを入れるのもどうかと思い調べてみると、Bootstrap-vueというものがあることが分かりました。

UIフレームワークを２つ入れてもコンポーネント名が違うので競合等は恐らくないかと思いますが、用途に合わせて2種類、またはそれ以上のUIフレームワークを使用することはよくあることなのでしょうか？

また、Element-uiでのヘッダー作成が上手く行けばBootstrap-vueを使用することもなくなると思うので、Element-uiの使い方に詳しい方いましたらヘッダー作成のアドバイスを頂けないでしょうか？
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

レスポンシブ化しようとしたら恐らく色々と設定をしなくてはならないのだと思います。

具体的にレスポンシブ化するというのはどういうことでしょうか？
確かにレスポンシブに見た目を変える機能は element-ui にはないと思います(grid system以外)。

ホバーした際の背景色などをCSSで指定する方法が分からず

ホバー時の色については、menu-item のソースを見ると

https://github.com/ElemeFE/element/blob/dev/packages/menu/src/menu-item.vue

js
1      hoverBackground() {
2        return this.rootMenu.hoverBackground;
3      },
4
5...
6
7      onMouseEnter() {
8        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
9        this.$el.style.backgroundColor = this.hoverBackground;
10      },
11      onMouseLeave() {
12        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
13        this.$el.style.backgroundColor = this.backgroundColor;
14      },

とあり、rootMenuはおそらく menu.vue で、
https://github.com/ElemeFE/element/blob/dev/packages/menu/src/menu.vue

js
1      hoverBackground() {
2        return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
3      }

というように、horizontalモードのときはホバー時の色はbackgroundColorを少し暗くした色とハードコードされているようなので、残念ながら変えるのは無理そうです。

追記

ハンバーガーメニューのようにしたいということでしたら、見た目は改良の余地がありますが、element-uiのcollapnse component の中に menu を置けばそれっぽいものができます。

画面幅に対して表示を切り替えるには、windowのresizeイベントを使用するとできます(media query を使用する方法もあります)。

投稿2017/12/25 16:12

総合スコア2551

2017/12/25 16:20

回答ありがとうございます。レスポンシブ化というのはヘッダーについてで、画面幅が大きい場合は項目を横並びに表示、画面幅が小さい(スマホ等)場合は項目をアイコンがクリックされたら表示されるようにしたかったのです（ハンバーガーメニューというのでしょうか？） Bootstrapを使用すれば簡単に実現出来る様なのですが、Bootstrapですとハンバーガーメニューやドロップダウンの展開にJqueryとpopper.jsが必須みたいなので別の方法はないか(出来ればElement-uiだけを使用)と思った次第です。

hnzwjun

2017/12/26 10:16

サンプルを作成頂きありがとうございます。 collapseコンポーネントとbootstrapのCSSを合わせてヘッダー作成に挑戦してみましたが中々思い通りに作成が出来ていない状態です。見た目や機能はbootstpapのままbootstrap.jsを使わないというのはやはり難しいのですね