57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
||
<div class="location">
|
||
<div class="location-content">
|
||
您的位置：
|
||
<span class="nav" v-for="(nav, index) in navArray" :key="index">
|
||
<router-link :to="nav.to" v-if="nav.to">{{ nav.name }}</router-link>
|
||
<span v-else>{{ nav.name }}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Nav',
|
||
props: {
|
||
navs: {
|
||
type: Array,
|
||
require: false,
|
||
default() {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
navArray: [
|
||
{to: '/', name: '首页'},
|
||
...this.navs
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.location
|
||
background #e5e5e5
|
||
line-height 30px
|
||
|
||
.location-content
|
||
margin 0 auto
|
||
font-size 14px
|
||
color #565656
|
||
.nav::after
|
||
content '>'
|
||
margin 0 5px
|
||
.nav:last-child::after
|
||
content: ' '
|
||
|
||
@media (min-width: 1200px)
|
||
.location-content
|
||
width 1200px
|
||
@media (max-width: 1200px)
|
||
.location-content
|
||
width 800px
|
||
</style> |