<style lang="css"> .loading { height: 100%; position: fixed; z-index: 10; width: 100%; background: #062734; opacity: .4; } .loading img { width: 100%; height: auto; position: absolute; top: calc(50% - 140px); } </style>
就添加了一张gif图而已,非常简单的
bus事件的处理
好的,既然我们的appheader已经发车了,那么应该在app.vue根路由里面开个公交车站,来接收巴士:
修改App.vue:
<template> <div id="app"> <transition name = "side"> <side-menu v-show = "show" @hide = "hideSide"></side-menu> </transition> <router-view/> </div> </template> <script> import SideMenu from "./components/SideMenu" import bus from "./bus" export default { name: 'app', components : { SideMenu }, created(){ this.$http.get(`/douyuapi/RoomApi/live?offset=1&limit=20`).then(res=>{ console.log(res.data.data); }) }, data(){ return { show : false } }, mounted () { bus.$on("showSide",this.side) }, methods : { side(){ this.show = !this.show }, hideSide(){ this.show = false } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
修改路由
修改根路由/src/router/index.js为:
import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] })
增加HomeItem
好的,我们有了以上功能以后呢,还需要在斗鱼主页中增加聊天室列表,在components目录中新建文件HomeItem.vue
<template lang="html"> <div class="mr-item"> <router-link :to="'/room/'+room.room_id"> <img :src="room.room_src" alt=""> <div class="room-info"> <span class = "nickname">{{room.nickname}}</span> <span class = "count"> <i class = "icon-group"></i> {{room.online || number}} </span> </div> <div class="room-title"> <i class = "icon-desktop"></i> {{room.room_name || message}} </div> </router-link> </div> </template> <script> export default { props : ["room"] } </script> <style lang="css" scoped> .mr-item { margin-top: 10px; float: left; width: 4.4rem; margin-right: .3rem; position: relative; } .mr-item img { width: 100%; height: 2.6rem; border-radius: 5px; } .room-info { position: absolute; bottom: 33px; color: #fff; padding: 0 5px; left: 0; right: 0; overflow: hidden; background: rgba(10,10,10,.5); line-height: 24px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .room-info .count { float: right; } .room-title { line-height: 30px; } </style>
内容版权声明:除非注明,否则皆为本站原创文章。