elementui案例演示导航布局加载动画

ElementUI

案例演示导航、布局、加载动画

知识点

-router

之嵌套路由

/zh- cn/essentials/

t-ui

导航组件、布局组件、加载动画

/#/zh-CN/component/menu

/#/zh- CN/component/layout

/#/zh-CN/component/loading

:

template>

el-menu theme=

class=

el-menu-item index=

处理中心

/el-menu-item>

el-submenu index=

template slot=

我的工作台

/template>

el-menu-item index=

选项

1/el-menu-item>

el-menu-item index=

选项

2/el-menu-item>

el-menu-item index=

选项

3/el-menu-item>

/el-submenu>

el-menu-item index=

订单管理

/el-menu-item>

/el-menu>

/template>12345678

el-index:

template>

div>

el-row>

el-col :span=

bg-purple- dark

elnav>elnav>

el-row>

router-view>router-view>

div>

template>

script>

//

引入

elmenetui

的导航组件< /p>

import elnav from

export default {

//

加载组件

components:{elnav}

}

script>2

:

template>

div>

el-row v-for=

justify=

el-col :span=

div class=

hotimg

img :src=

div>

el- col>

el-col :span=

div class=

hotcontent

h2>{{}}h2>

p>{{}}p>

div>

el-col>

el-row>

div>

template>script>

export default{

mounted(){

this.$$ch(

},

data(){

return {msg:

}

}

script>17181926

:

import Vue from

export default{

state:{

hot:[] //

用来装请求回来的数据

},

mutations:{

//

写个 方法给

hot

数组设置数据

setHot(state, data){

= data;

}

},

actions:{

//

写个 方法

,

做

http

请求

getHot(content){

//loading

效果

let loading = ype.$$loading({text:

玩命

加载中

...

(

)

.then(

function (res) { //

请求成功的回调函数

//< /p>

先结束

loading

效果

();

//

调用 设置

hot

数据的方法

,

把请

求成功的数据给

hot

数组

(

},function(){}

);

}

}

}17181920

入口文件

jssrc/:

import Vue from

import newsdetail from

//

引入

import validate from

//

使用

(validate);

import VueRouter from 'vue- router';

(VueRouter); //

全局使用插件

import VueResource from 'vue-resource';

(VueResource);

import UserModule from

import NewsModule from

import EleModule from

import Vuex from 'vuex';

(Vuex);

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-default/';