elementui案例演示导航布局加载动画.docx
《elementui案例演示导航布局加载动画.docx》由会员分享，可在线阅读，更多相关《elementui案例演示导航布局加载动画.docx（10页珍藏版）》请在冰豆网上搜索。
elementui案例演示导航布局加载动画
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-menutheme="dark"default-active="1"class="el-menu-demo"mode="horizontal":
router="true">
el-menu-itemindex="/elindex/hot">处理中心/el-menu-item>
el-submenuindex="2">
templateslot="title">我的工作台/template>
el-menu-itemindex="2-1">选项1/el-menu-item>
el-menu-itemindex="2-2">选项2/el-menu-item>
el-menu-itemindex="2-3">选项3/el-menu-item>
/el-submenu>
el-menu-itemindex="3">订单管理/el-menu-item>
/el-menu>
/template>12345678
el-index:
template>
div>
el-row>
el-col:
span="24">divclass="grid-contentbg-purple-dark">div>el-col>
elnav>elnav>
el-row>
router-view>router-view>
div>
template>
script>
//引入elmenetui的导航组件
importelnavfrom"./el-nav.vue";
exportdefault{
//加载组件
components:
{elnav}
}
script>12345678910111213141516171819202122
el-hot.vue:
template>
div>
el-rowv-for="hotNewsinthis.$store.state.ele.hot"justify="start":
gutter="2"align="middle">
el-col:
span="6">
divclass="grid-contentbg-purple-darkhotimg">
img:
src="hotNews.image"/>
div>
el-col>
el-col:
span="18">
divclass="grid-contentbg-purple-darkhotcontent">
h2>{{hotNews.title}}h2>
p>{{hotNews.desc}}p>
div>
el-col>
el-row>
div>
template>script>
exportdefault{
mounted（）{
this.$store.dispatch（"getHot"）;
},
data（）{
return{msg:
"hellovue"}
}
}
script>1234567891011121314151617181920212223242526
eleModule.js:
importVuefrom"vue";
exportdefault{
state:
{
hot:
[]//用来装请求回来的数据
},
mutations:
{
//写个方法给hot数组设置数据
setHot（state,data）{
state.hot=data;
}
},
actions:
{
//写个方法,做http请求
getHot（content）{
//loading效果
letloading=Vue.prototype.$loading（{text:
"玩命加载中..."}）;
Vue.http.get（"http:
//localhost/eleui.php",{},{emulateJSON:
true}）
.then（
function（res）{//请求成功的回调函数
//先结束loading效果
loading.close（）;
//调用设置hot数据的方法,把请求成功的数据给hot数组
mit（"setHot",res.body）;
},function（）{}
）;
}
}
}1234567891011121314151617181920
入口文件jssrc/index.js:
importVuefrom"vue";importpagenavfrom"./../components/page-nav.vue";
importnewsdetailfrom"./../components/news-detail.vue";
//引入
importvalidatefrom"./../components/validate";
//使用
Vue.use（validate）;
importVueRouterfrom'vue-router';
Vue.use（VueRouter）;//全局使用插件
importVueResourcefrom'vue-resource';
Vue.use（VueResource）;
importUserModulefrom"./../store/modules/UserModule";
importNewsModulefrom"./../store/modules/NewsModule";
importEleModulefrom"./../store/modules/eleModule";
importVuexfrom'vuex';
Vue.use（Vuex）;
importElementUIfrom'element-ui';
import'element-ui/lib/theme-default/index.css';
Vue.use（ElementUI）;
importeltablefrom"./../components/el-table.vue";
importelindexfrom"./../components/elmentui/el-index.vue";
importelhotfrom"./../components/elmentui/el-hot.vue";
constvuex_store=newVuex.Store（{
modules:
{
users:
UserModule,
news:
NewsModule,
ele:
EleModule
}
}）
constuserlogin=resolve=>{
//成功之后的回调
resolve（require（"./../components/user-login.vue"））;//这就是异步加载的方式
}
constnewslist=resolve=>{
//成功之后的回调
resolve（require（"./../components/news-list.vue"））;//这就是异步加载的方式
}
constrouterConfig=newVueRouter（{
routes:
[
{path:
'/',component:
userlogin},
{path:
'/news',component:
newslist,name:
"newslist"},
{path:
'/news/:
newsid',component:
newsdetail,name:
"newsdetail"},
{path:
'/login',component:
userlogin,name:
"userlogin"},
{path:
'/eltable',component:
eltable,name:
"eltable"},
{path:
'/elindex',component:
elindex,name:
"elindex",children:
[
{path:
"hot",component:
elhot,name:
"elhot"}
]}
]
}）
//全局组件,不加入路由管理
Vponent（"page-nav",pagenav）;
letmyvue=newVue（{
el:
".container",
store:
vuex_store,//注入到vue
router:
routerConfig,
}）;123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
代码分析
1、ele-nav导航组件是嵌套在ele-index组件里的，ele-index里加载导航组件
importelnavfrom"./el-nav.vue";
components:
{elnav}1212
elnav>elnav>1212
2、创建了eleModule模块之后，需要在入库文件里加载
//引入
importEleModulefrom"./../store/modules/eleModule";
//使用
constvuex_store=newVuex.Store（{
modules:
{
users:
UserModule,
news:
NewsModule,
ele:
EleModule
}
}）1234567891012345678910
3、给ele配置路由
//引入
importelindexfrom"./../components/elmentui/el-index.vue";
importelhotfrom"./../components/elmentui/el-hot.vue";
//配置
constrouterConfig=newVueRouter（{
routes:
[
{path:
'/',component:
userlogin},
{path:
'/news',component:
newslist,name:
"newslist"},
{path:
'/news/:
newsid',component:
newsdetail,name:
"newsdetail"},
{path:
'/login',component:
userlogin,name:
"userlogin"},
{path:
'/eltable',component:
eltable,name:
"eltable"},
{path:
'/elindex',component:
elindex,name:
"elindex",children:
[
{path:
"hot",component:
elhot,name:
"elhot"}
]}
]
}）12345678910111213141516171234567891011121314151617
这里用到了嵌套路由：
{path:
'/elindex',component:
elindex,name:
"elindex",children:
[
{path:
"hot",component:
elhot,name:
"elhot"}
]}123123
嵌套路由在组件里也需要配合：
router-view>router-view>1212
/elindex/hot
效果演示
PHP代码:
//指定允许其他域名访问
header（'Access-Control-Allow-Origin:
*'）;
//响应类型
header（'Access-Control-Allow-Methods:
GET'）;
header（'Access-Control-Allow-Headers:
x-requested-with,content-type'）;
//测试数据
header（"content-type:
application/json"）;//这句话TM很重要哦，否则到前端获取时只是普通字符串，不会自动识别
$data=[
["title"=>"SpaceX发射重启计划推迟明年1月发射一箭十星","desc"=>"今年9月1日，搭载有以色列Amos-6通信卫星的猎鹰9号火箭，在东海岸佛罗里达州卡纳维拉尔角40号发射台进行静态点火测试前准备工作时突然起火爆炸，火箭连同价值2亿美元的Amos-6通信卫星一并被炸毁，40号发射台也需要进行大修，随后SpaceX公司被暂停了所有发射。
","image"=>"
["title"=>"iPhone炸完iPad炸苹果要重蹈三星覆辙？
","desc"=>"宁波林先生怎么也没想到，这么悲催的事情居然发生在自己头上：
他用了一年多的iPad半夜在充电时爆炸了，不仅写字台被炸开了一个洞，iPad零件更是炸得整个房间到处都是。
”","image"=>"
["title"=>"遭唱衰的苹果接连公布利好：
AppStore上月营收创纪录","desc"=>"腾讯科技讯目前的苹果，已经进入了库克接手之后最困难的阶段，几乎全部电子产品销售出现同比下跌，财年收入出现了十多年来首次下滑。
另外今年推出的新手机也遭遇了类似去年的低迷命运。
”","image"=>"
];sleep
（2）;//模拟网速很卡
echo$data,JSON_UNESCAPED_UNICODE）;//精选123456789101112131415161718192021123456789101112131415161718192021
升级会员 