-
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/';
-
-
-
-
-
-
-
-
-
上一篇：26种偏方调治牙痛
下一篇：element 3D破解图文教程