ElementUI案例示範:導航、布局、載入動畫

知識點

1.vue-router之嵌套路由 
http://router.vuejs.org/zh-cn/essentials/nested-routes.html 
2.element-ui 
導航組件、布局組件、載入動畫 
http://element.eleme.io/#/zh-CN/component/menu 
http://element.eleme.io/#/zh-CN/component/layout 
http://element.eleme.io/#/zh-CN/component/loading

 
 
el-nav.vue:

<template>    <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" :router="true">        <el-menu-item index="/elindex/hot">處理中心</el-menu-item>        <el-submenu index="2">            <template slot="title">我的工作台</template>            <el-menu-item index="2-1">選項1</el-menu-item>            <el-menu-item index="2-2">選項2</el-menu-item>            <el-menu-item index="2-3">選項3</el-menu-item>        </el-submenu>        <el-menu-item index="3">訂單管理</el-menu-item>    </el-menu></template>

1 2 3 4 5 6 7 8 9 10 11 12

el-index:

<template>    <div>        <el-row>            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>            <!--使用組件-->            <elnav></elnav>        </el-row>        <!--嵌套路由-->        <router-view></router-view>    </div></template><script>    // 引入elmenetui的導航組件    import elnav from "./el-nav.vue";    export default {        //載入組件        components:{elnav}    }</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

el-hot.vue:

<template>    <div>        <el-row v-for="hotNews in this.$store.state.ele.hot" justify="start" :gutter="2" align="middle">            <el-col :span="6">                <div class="grid-content bg-purple-dark hotimg">                    <img :src="hotNews.image"/>                </div>            </el-col>            <el-col :span="18">                <div class="grid-content bg-purple-dark hotcontent">                    <h2>{{hotNews.title}}</h2>                    <p>{{hotNews.desc}}</p>                </div>            </el-col>        </el-row>    </div></template><script>    export default{        mounted(){            this.$store.dispatch("getHot");        },        data(){            return {msg:"hello vue"}        }    }</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

eleModule.js:

import Vue from "vue";export default{    state:{        hot:[] //用來裝請求回來的資料    },    mutations:{        //寫個方法給hot數組設定資料        setHot(state, data){            state.hot = data;        }    },    actions:{        //寫個方法,做http請求        getHot(content){            //loading效果            let loading = Vue.prototype.$loading({text:"玩命載入中..."});            Vue.http.get("http://localhost/eleui.php",{},{emulateJSON:true})                .then(                    function (res) { //請求成功的回呼函數                        //先結束loading效果                        loading.close();                        //調用設定hot資料的方法,把請求成功的資料給hot數組                        content.commit("setHot",res.body);                    },function