Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Nuxt.js + Element】Nuxt.jsでElement UI使ってみた

Web開発

【Nuxt.js + Element】Nuxt.jsでElement UI使ってみた

【Nuxt.js + Element】Nuxt.jsでElement UI使ってみた

目次

  1. Elementについて
  2. Elementの導入
    1. Elementのインストール
    2. プラグインを作る
    3. Elementの設定をする
  3. Elementの使い方
  4. まとめ

Nuxt.jsのUIコンポーネントライブラリであるElementの使い方をご紹介します。

なお、Nuxt.jsの環境構築に関しては下記記事でご紹介していますので、まだご覧になっていない方はこちらからご覧いただくことをお勧めします。

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築まで
https://www.dailyupblog.com/web_development/860/

それではいきましょう。

Elementについて

ElementとはNuxt.js用のUIコンポーネントライブラリです。

Elementにはレイアウトから、ボタン、フォーム、ダイアログ、アイコン、ローディング、その他たくさんのUIが用意されています。

Elementを使えば、簡単に整ったレイアウトやデザインを実装することが可能です。

Element公式サイト
https://element.eleme.io/#/en-US

Elementの導入

Elementを導入する方法についてご紹介します。

Nuxt.jsのプロジェクト作成の時、コマンド上で聞かれる質問にてElement導入にしていた場合は下記は不要です。

Elementのインストール

Elementをインストールしましょう。

下記コマンドでElementをインストールしてください。

//npmの場合
npm i element-ui -S

//yarnの場合
yarn add element-ui

プラグインを作る

インストールが完了しましたら、「plugins」フォルダ内にelement-ui.jsファイルを作成してください。

そして、下記を記述してください。

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })

Elementの設定をする

最後にnuxt.config.jsファイルに設定を記述します。

nuxt.config.jsファイルを開いて下記のようにpluginsとcssを追記してください

css: ["element-ui/lib/theme-chalk/index.css"],
plugins: ["@/plugins/element-ui"]

これで準備完了です。

Elementが使えるようになりました。

前述の通り、最初のNuxtプロジェクト作成で、Element導入を選んでいた場合は上記が既に完了されています。

Elementの使い方

Elementの使い方をご紹介します。

まず、下記Elementの公式サイトを開いてください。

https://element.eleme.io/#/en-US

そうしましたら、ヘッダーから「component」をクリックしてください。

そうすると、左メニューから沢山のコンポーネントのリンクがあります。

ここから使いたいものをクリックすれば、それに伴ったコンポーネントが表示されます。

下記のように3つほどElementのコンポーネントを実装してみました。

一番上：「Rate」>「Basic usage」
真ん中：「Progress」>「Internal percentage」
一番下：「Dialog」>「Basic usage」

例えば、一番上の「Rate」>「Basic usage」を実装するとします。

でしたら、サイトの左メニューから、「Rate」を選択してください。

一番うえの、「Basic usage」のところにある「Expand」をクリックしてください。

すると記述すべきコードが表示されます。

このコードをコピーして貼り付ければ、利用することができます。

下記は、上記の内容を記述した「pages」> index.vueの内容です。

<template>
  <div class="container">
    <div>
      <div class="content-wrap">
        <el-rate v-model="value" :colors="colors" :max="10"></el-rate>
      </div>
      <div class="content-wrap">
        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
        <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
      </div>
      <div class="content-wrap">
        <el-button type="text" @click="dialogVisible = true">ダイアログを開きます</el-button>

        <el-dialog
          title="ダイアログタイトル"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>ダイアログです。</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">キャンセル</el-button>
            <el-button type="primary" @click="dialogVisible = false">OK</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import axios from "axios";

export default Vue.extend({
  data() {
    return {
      value: null,
      dialogVisible: false,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"]
    };
  },
  methods: {
    handleClose(done: any) {
      this.$confirm("Are you sure to close this dialog?")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
});
</script>

<style>
.container {
  margin: 0 auto;
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.content-wrap {
  width: 400px;
  margin-bottom: 6%;
}

.el-progress {
  margin-bottom: 1em;
}
</style>

さて、ページの下の方にスクロールすると、「Attributes」という項目が出てきます。

ここには、コンポーネントをカスタマイズできる属性が記されています。

例えば、「Rate」を例に挙げると、「max」という属性があります。

これを設定すると、表示する星の数を調整できます。

デフォルトでは5つなので、これを10個に変えてみましょう。

<el-rate v-model="value" :colors="colors" :max="10"></el-rate>

これで確認すると、下記のように星の数が10個に増えました。

まとめ

いかがだったでしょうか。

今回はElementの使い方について、軽くまとめてみました。

Elementは本当にたくさんのUI コンポーネントが用意されていますので、とても便利です。

是非とも、アプリケーション開発等にご拡張ください。

それでは今回はここまで。

お疲れ様でした！

関連記事

関連記事