【Vue.js】ライブラリElement Plusで、スライダー・ブログカード・ボタン・トグルメニューをサクッと作る
｜ 更新： 2024/05/05 ｜ 4356文字
今回は、Vue.js用のコンポーネントライブラリ『Element Plus』を使って、webサイトでよく使われるパーツをサックリ作ってみます。Element Plusでは他にもいろいろできますが、特に『スライダー・ブログカード・ボタン・トグルメニュー』などやってみました。さっそく内容を確認していきましょう。
目次
Element Plusとは？
vueバージョン３用のコンポーネントライブラリ
Vue.jsバージョン３用のコンポーネントライブラリです。コンポーネントの種類はかなり豊富で、『ボタン・色指定・フォーム・ドロップダウン・ヘッダー/フッター・ダイアログボックス』など、webサイトをつくるときに使う部品は、ほぼ網羅しているといえそうです。
書き方が通常のhtml&cssコーディングに比べ特殊ですが、テンプレートエンジンとか使ったことがある場合は迷わなそう。出力クラスを押さえておけば、CSSでの微調整も可能です。
Element Plus
https://element-plus.org/en-US/
vueバージョン２のときは？=>Element UIを使用する
上記Element Plusは、Vue.jsバージョン３用で、Vue.jsバージョン２を使っている場合は『Element UI』を使う形になります。そもそもVue.jsもバージョン2と3で、書き方がかなり変わっているので、しょうがないかなというところはありますね。
Element UI for Vue 2.x version
https://element.eleme.io/#/en-US
Vue.js ver3とElement Plusのセットアップ
そこそこ規模のプロジェクトで使う場合は、コマンドで入れてvue拡張子やテンプレートなども用意するんですが、今回はサックリ使うため、cdnで必要ファイルを読み込みます。
まずは、head内に、Element Plus用のＣＳＳをロード。
あとは、（管理人の環境ではフッター下）Element Plus本体と、Vue.js ver3を読み込んで、Vue.createAppでアプリケーションインスタンスを作成します。
const sampleApp = {
data() {
return {
message1: 'Hello Element Plus! are you alright?',
timeValue1:'',
};
},
};
const app = Vue.createApp(sampleApp);
app.use(ElementPlus);
app.mount('#app');
</script>
アプリケーションインスタンスのコードはこんな感じで。マウントするid要素は、全体で使うのでbodyにつけてます。またdata内のmessage1はMustacheでボタンにバインド、timeValue1はタイムピッカーの空初期値ということで設定しています。チェックボックスとか複数入るものの場合は配列にするそうです。
Vue.js＆Element Plusで各種webサイトのパーツを作ってみる
ファーストビュー（ヘッダー・スライダー・３列ブログカード）
ファーストビューのヘッダー・スライダー・３列ブログカードはこんな感じです。ここら辺の要素は『el-〇〇』のようなタグで出力。コードは以下のような感じです。
<el-header>
<strong>vue3 & element-plusてすと<br></strong>(el-header出力)
</el-header>
■スライダー
<el-carousel :interval=”4000″ type=”card” height=”300px”>
<el-carousel-item v-for=”item in 6″ :key=”item”>
<h3 text=”2xl” justify=”center”>{{item}}</h3>
</el-carousel-item>
■ブログカード
<div class=”el-card-wrap”>
<el-card :body-style=”{ padding: ‘4px’ }”>
<img src=”./imgs/001.jpg”>(el-card1)
</el-card>
<el-card :body-style=”{ padding: ‘4px’ }”>
<img src=”./imgs/002.jpg”>(el-card2)
</el-card>
<el-card :body-style=”{ padding: ‘4px’ }”>
<img src=”./imgs/003.jpg”> (el-card3)
</el-card>
</div>
ブログカードはラッパー要素を作って『display:flex;justify-content:space-between;』、出力のel-card要素は『width:32%;』で３列表示させています。また、スライダーの『el-carousel__item』要素のＣＳＳは、Element Plus公式のの例にあったものです。ここら辺もサクサク実装。
データバインドしたボタン・リンク・
次はボタンやリンク・クリックできないリンク（disabled）を実装。これらも基本的に『el-〇〇』タグです。コードは以下のような感じ。
<el-button>{{ message1 }}</el-button>
■リンク
<el-link>リンクはこんなかんじ</el-link>
<el-link :underline=”false”>Without Underline</el-link>
■disabledリンク
<el-link disabled>default</el-link>
<el-link type=”primary” disabled>primary</el-link>
<el-link type=”success” disabled>success</el-link>
<el-link type=”warning” disabled>warning</el-link>
<el-link type=”danger” disabled>danger</el-link>
<el-link type=”info” disabled>info</el-link>
アンダーライン有/無や、ステータスみたいなのの色分けもありました。
タイムピッカー
予約フォームとかで使うかもしれない、タイムピッカー。これはel-time-pickerで出せます。
『v-model="timeValue1"』というのが指定されていますが、これはアプリケーションインスタンス内のデータと紐づけされています。無しで操作した場合、操作後の値がセットされませんでした。
collapseメニュー（トグルメニューみたいに開閉するやつ）
クリックすると開閉するタイプのボックス。Element Plus公式サイト内ではcollapseと書いてあったけど、トグルメニューみたいな使い方もできそう。
<el-collapse-item title=”メニュー項目１” name=”1″>
<div>メニュー項目１ １行目</div>
<div>メニュー項目１ ２行目</div>
</el-collapse-item>
<el-collapse-item title=”メニュー項目２” name=”2″>
<div>メニュー項目２ １行目</div>
<div>メニュー項目２ ２行目</div>
</el-collapse-item>
</el-collapse>
実際の動作サンプルについて
画僧とコードを見てもらいましたが、実際に操作してみたい方は、当サイトドメイン内の以下のページに、今回のサンプルを載せてありますので、参考になさってください。
■サンプルurl
https://division-web.atelier-ss-agency.com/test/2020404-vue-elem/
あとがき・まとめ
- コンポーネントライブラリElement PlusはVue.jsバージョン3用。Vue.jsバージョン2のときはElement UI
- コマンドインストールの他、cdnでロードしても使用できる
- 基本的には『el-〇〇』というタグで、ほとんどの要素を実装できる
- 一部インスタンスのデータと関連するものもある
まとめると、こんなところでしょうか。タグの書き方に慣れれば、手打ちだと手間がかかるような要素もサクサク実装していける印象をうけました。
【カテゴリ】- javascript/jQuery、その他
【タグ】- vue.js, スライダー作成
