LaravelでElementUIを使う #Vue.js

バージョン Laravel 5.5

ElementUIのインストール

npm install element-ui

npmの起動

npm run watch

サンプルViewの作成

resources/views/welcome.blade.phpを書き換える

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
            </div>
        </div>
    </nav>
    <div id="app">
        <example-component></example-component>
    </div>
</div>

<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

ElementUIを読み込む

resources/assets/js/app.jsを修正


require('./bootstrap');

window.Vue = require('vue');
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-chalk/index.css'
+ import locale from 'element-ui/lib/locale/lang/ja'

+ Vue.use(ElementUI, { locale })

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

ElementUIコンポーネントの追加

resources/assets/js/components/ExampleComponent.vueを修正

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                        <div>
                            <el-button type="primary" v-on:click="click_button" :loading="primary_lording">Primary</el-button>
                            <el-date-picker
                                    ref="picker"
                                    v-model="value1"
                                    v-on:change="change_calendar"
                                    type="date"
                                    placeholder="Pick a day">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value1: '2018-01-10', // カレンダーデフォルト値
                primary_lording: false, // ローディングデフォルト値
            };
        },
        mounted() {
            console.log('Component mounted.')
        },
        methods: {
            click_button: function() {
                this.$refs.picker.focus() //　ボタンを押すとカレンダーが開く
            },
            change_calendar: function (event) {
                const vm = this
                this.primary_lording = true //　カレンダーの値が変わるとボタンはローディング

                const timer = setInterval(function(){
                    vm.primary_lording = false // ５秒でローディング終了
                    clearInterval(timer)
                }, 5000)
            }
        }
    }
</script>