(src/router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:()=>import('../views/index.vue')
},
{
path:'/channelManage',
component:()=>import('../views/channelManage.vue')
}
]
const router = new VueRouter({
routes
})
export default router
(src/main.js)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.$axios = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
(src/views/index.vue)
<template>
<div>
<vNav></vNav>
<div class="main">
<div v-for="(item,index) in news" :key="index" class="item">
<img :src="item.pic">
<div class="right">
<div class="title">{{item.title}}</div>
<div class="bottom">
<div class="time">{{item.time}}</div>
<div class="type">{{item.src}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import vNav from '../components/vNav.vue'
export default {
components:{
vNav
},
data() {
return {
news:[]
}
},
mounted() {
this.$axios.get('json/news.json').then(({data:{result:{list}}})=>{
this.news = list
})
},
}
</script>
<style scoped lang='scss'>
.main{
font-size: 14px;
.item{
padding: 6px;
display: flex;
border-bottom: 1px solid #ccc;
img{
width: 100px;
height: 100px;
}
.right{
margin-left: 6px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.bottom{
display: flex;
justify-content: space-between;
font-size: 12px;
color: #666;
}
}
}
}
</style>
(src/App.vue)
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import axios from 'axios'
export default {
mounted() {
axios.get('json/nav.json').then(({data:{result}})=>{
this.$store.dispatch('muChannels',result)
})
},
}
</script>
<style lang="scss">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
}
html{
font-size: 20px;
}
</style>
(src/components/vNav.vue)
<template>
<div class="nav">
<div class="title">KGC新闻</div>
<div class="list">
<ul class="itmes">
<li v-for="(item,index) in myNav" :key="index">{{item}}</li>
</ul>
<div class="add" @click="$router.push('/channelManage')">
<img src="../assets/images/add.png">
</div>
</div>
</div>
</template>
<script>
export default {
computed:{
myNav(){
return this.$store.state.myNav
}
}
}
</script>
<style scoped lang='scss'>
.nav{
font-size: 14px;
.title{
height: 1.5rem;
line-height: 1.5rem;
background: #d43d3d;
font-weight: bold;
color: white;
text-align: center;
}
.list{
display: flex;
justify-content: space-between;
align-items: center;
height: 1.5rem;
background: #f4f5f6;
color: #505050;
.itmes{
flex: 1;
display: flex;
align-items: center;
overflow-x: scroll;
li{
padding: 0 15px;
white-space: nowrap;
}
}
.add{
height: 1.5rem;
width: 1.5rem;
img{
height: 1.5rem;
width: 1.5rem;
border-left: 1px solid #ccc;
}
}
}
}
</style>
(src/store/index.js)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
allNav:[],
myNav:[]
},
getters: {
},
mutations: {
muChannels(state,val){
state.allNav = val
},
increment(state,val){
state.myNav.push(state.allNav[val])
state.allNav.splice(val,1)
},
decrement(state,val){
state.allNav.push(state.myNav[val])
state.myNav.splice(val,1)
}
},
actions: {
muChannels(store,val){
store.commit('muChannels',val)
},
increment(store,val){
store.commit('increment',val)
},
decrement(store,val){
store.commit('decrement',val)
}
},
modules: {
}
})
(src/views/channelManage.vue)
<template>
<div class="channel">
<div class="title">
<div class="img" @click="$router.push('/')">
<img src="../assets/images/back.png">
</div>
<div class="content">频道管理</div>
</div>
<div class="box">
<div>点击删除以下频道</div>
<ul>
<li @click="del(index)" v-for="(item,index) in myNav" :key="index">{{item}}</li>
</ul>
</div>
<div class="box">
<div>点击添加以下频道</div>
<ul>
<li @click="add(index)" v-for="(item,index) in allNav" :key="index">{{item}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
computed:{
myNav(){
return this.$store.state.myNav
},
allNav(){
return this.$store.state.allNav
}
},
methods: {
add(index){
this.$store.dispatch('increment',index)
},
del(index){
this.$store.dispatch('decrement',index)
}
},
};
</script>
<style scoped lang="scss">
.channel{
font-size: 14px;
.title{
height: 2rem;
background: #d43d3d;
display: flex;
align-items: center;
.img{
padding: 0 5px;
display: flex;
align-items: center;
img{
width: 1.5rem;
}
}
.content{
flex: 1;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
}
}
.box{
padding: 10px;
ul{
display: flex;
flex-wrap: wrap;
li{
padding: 2px;
width: 60px;
text-align: center;
border: 1px solid #ccc;
margin-right: 20px;
margin-top: 4px;
}
}
}
}
</style>
