75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="site_nav_box">
|
|
<div v-for="(child,index) in children" :key="child.index" @click="handClick(index)">
|
|
<!-- <div class="site_nav" v-for="child in children" :key="child.index" :class="{'active': active === child.index}"> -->
|
|
<!-- <router-link v-if="active !== child.index" class="site_nav_a" :to="child.router">{{child.label}}</router-link> -->
|
|
<!-- <div>{{child.label}}</div> -->
|
|
<div class="site_nav site_nav_a" :class="{'active': n_active === child.index}">{{child.label}}</div>
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SiteNav',
|
|
props: {
|
|
array: Array,
|
|
default_active: String,
|
|
active: String
|
|
},
|
|
data () {
|
|
return {
|
|
children: [],
|
|
n_active: 0
|
|
// children: [
|
|
// {
|
|
// label: '搬运站点',
|
|
// index: '1-1',
|
|
// router: '/home'
|
|
// },
|
|
// {
|
|
// label: '任务列表',
|
|
// index: '1-2',
|
|
// router: '/home'
|
|
// },
|
|
// {
|
|
// label: '任务管理',
|
|
// index: '1-3',
|
|
// router: '/home'
|
|
// }
|
|
// ]
|
|
}
|
|
},
|
|
methods: {
|
|
handClick (i) {
|
|
this.n_active = i
|
|
this.$emit('change', i)
|
|
}
|
|
},
|
|
mounted () {
|
|
this.children = this.array
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.site_nav_box
|
|
// _wh(100%,100%)
|
|
padding .26rem 0 0 .4rem
|
|
.site_nav
|
|
_wh(2rem,1rem)
|
|
_bis('../images/aio/btn_dis.png',100%,100%)
|
|
margin-bottom .2rem
|
|
.site_nav_a, .site_nav_d
|
|
display block
|
|
_font(.32rem,1rem,,,center)
|
|
cursor pointer
|
|
.active
|
|
_bis('../images/aio/btn_checked.png',100%,100%)
|
|
color #ffffff
|
|
</style>
|