58 lines
1.2 KiB
Vue
58 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
|
|||
|
|
width 1200px
|
|||
|
|
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 768px
|
|||
|
|
</style>
|