ElementUIとは
- Vue.jsのコンポーネントライブラリ
- よく使うデザインやフォームのコンポーネントがあるので、使い所が多そう。
- 既存のVueのコードにそのまま追加して利用できるのでオススメです。
- アニメーションだったりはコンポーネントにおまかせして、ロジックに注力できるので大変便利！
VueCLI
- インストール
Vuejs公式 -
npm run devまで実行
実装
インストール
cd my-project
npm i element-ui -S
main.js
- 以下の記述を追加します。
src/main.js
// ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
// ElementUIでの言語設定、datePickerとかで適用される
import locale from 'element-ui/lib/locale/lang/ja'
Vue.use(ElementUI, {locale});
スライドバー
- ここから使いたいやつを探します。
-
App.vueに追加していきます。
App.vue
<template>
<div id="app">
<div class="block">
<span class="demonstration">スライダー</span>
<el-slider v-model="value1"></el-slider>
</div>
<!-- コンポーネントで変化する値を利用してみる -->
<div>{{ value1 }}</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
value1: 50,
},
}
</script>
ブラウザで確認すると、↓になりました。
カーソルをあわせると吹き出しが出るようになってます。
datePicker
App.vue
<template>
<div id="app">
<!-- 追加 -->
<span class="demonstration">日付</span>
<el-date-picker
v-model="value2"
type="date"
placeholder="日付を選んでください">
</el-date-picker>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
value1: 50,
value2: '',
}
},
}
</script>
確認、ちゃんと日本語になってます。
入力フォーム
- rulesにvalidationルールを渡せるようです。
App.vue
<template>
<div id="app">
<!-- 追加 -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="年齢" prop="age">
<el-input type="number" v-model="ruleForm.age" auto-complete="off"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
ruleForm: {
age: 0
},
rules: {
age: [
{
validator: (rule, value, callback) => {
if (!value) {
return callback(new Error('値を入力してください'));
}
if (value > 51) {
return callback(new Error('年齢は50歳以下にしてください'));
}
},
trigger: 'change'
}
]
}
}
},
}
</script>
エラーが出るとデザインも変化！
入力フォームとスライダーを組み合わせてみる
- さきほどのスライダーのソースのv-model部分を書き換えて、スライダーで年齢入力できるようにしてみる。
App.vue
<!-- スライダーを以下に修正 -->
<div class="block">
<el-slider v-model="ruleForm.age"></el-slider>
<div>{{ ruleForm.age }}</div>
</div>
スライダーを動かすと自動で年齢が変化し、バリデーションも効いてます！
まとめ
- 既存ソースにも簡単に追加でき、とても便利かと思います。
- モックもすばやく作れて良さそう！