195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
|
<aside class="one-nav">
|
|
<veui-menu
|
|
class="one-menu"
|
|
:items="menuItems"
|
|
:expanded.sync="expanded"
|
|
>
|
|
<template #before>
|
|
<header>
|
|
<h2>VEUI</h2>
|
|
<section class="desc">
|
|
<a href="https://github.com/ecomfe/veui">
|
|
<img
|
|
alt="VEUI on GitHub"
|
|
src="https://img.shields.io/github/stars/ecomfe/veui?label=stars&logo=github"
|
|
height="20"
|
|
>
|
|
</a>
|
|
<nuxt-link
|
|
:class="{
|
|
'locale-swith': true,
|
|
disabled: altLocale.disabled,
|
|
}"
|
|
:to="altLocale.disabled ? '' : altLocale.to"
|
|
>
|
|
{{ altLocale.label }}
|
|
</nuxt-link>
|
|
</section>
|
|
<section class="search">
|
|
<one-search/>
|
|
</section>
|
|
</header>
|
|
</template>
|
|
<template #item-label="{ label, sub }">
|
|
{{ label }}<small>{{ sub }}</small>
|
|
</template>
|
|
</veui-menu>
|
|
</aside>
|
|
</template>
|
|
|
|
<script>
|
|
import i18n from '../common/i18n'
|
|
import OneSearch from './OneSearch'
|
|
import { Menu } from 'veui'
|
|
|
|
export default {
|
|
name: 'one-menu',
|
|
components: {
|
|
'one-search': OneSearch,
|
|
'veui-menu': Menu
|
|
},
|
|
mixins: [i18n],
|
|
props: {
|
|
nav: {
|
|
type: Array,
|
|
default () {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
expanded: []
|
|
}
|
|
},
|
|
computed: {
|
|
altLocale () {
|
|
let { canonicalPath, locale, getLocalePath, isPathDisabled } = this
|
|
let altLocale = locale === 'zh-Hans' ? 'en-US' : 'zh-Hans'
|
|
let label = locale === 'zh-Hans' ? 'English' : '中文'
|
|
let disabled = isPathDisabled(canonicalPath, altLocale)
|
|
return {
|
|
to: disabled ? '' : getLocalePath(canonicalPath, altLocale),
|
|
disabled,
|
|
label
|
|
}
|
|
},
|
|
menuItems () {
|
|
return this.nav.map(item => this.normalizeItem(item))
|
|
}
|
|
},
|
|
created () {
|
|
this.expanded = this.menuItems.map(({ name }) => name)
|
|
},
|
|
methods: {
|
|
getTitleDetail (title) {
|
|
let [main, sub] = title.split(' - ')
|
|
return [main, sub]
|
|
},
|
|
isActive (path) {
|
|
let { route = {} } = this.$router.resolve(path) || {}
|
|
return route.name === this.$route.name
|
|
},
|
|
normalizeItem ({ title, children, slug, link, disabled }, base = '') {
|
|
const fullSlug = `${base}/${slug}`
|
|
const localePath = this.getLocalePath(fullSlug)
|
|
const to = (link !== false && fullSlug && !disabled) ? localePath : null
|
|
const [main, sub] = this.getTitleDetail(title)
|
|
|
|
return {
|
|
label: main,
|
|
sub,
|
|
to,
|
|
name: fullSlug,
|
|
disabled,
|
|
children: children ? children.map(child => this.normalizeItem(child, fullSlug)) : []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.one-nav
|
|
position fixed
|
|
top 0
|
|
bottom 0
|
|
left 0
|
|
width 280px
|
|
z-index 1
|
|
|
|
.one-menu
|
|
width 100%
|
|
height 100%
|
|
|
|
& >>> .veui-menu-tree-wrapper
|
|
display flex
|
|
flex-direction column
|
|
flex-grow 1
|
|
height 100%
|
|
overflow visible
|
|
|
|
.veui-menu-tree
|
|
overflow auto
|
|
|
|
& >>> .DocSearch
|
|
margin 0
|
|
border-radius 6px
|
|
font inherit
|
|
|
|
header
|
|
padding 32px 20px 20px
|
|
|
|
h2
|
|
display flex
|
|
align-items center
|
|
margin 0 0 16px
|
|
font-size 20px
|
|
font-weight 500
|
|
|
|
a
|
|
display block
|
|
|
|
& + .desc
|
|
display flex
|
|
align-items center
|
|
margin-bottom 20px
|
|
|
|
img
|
|
display block
|
|
|
|
small
|
|
margin-left 8px
|
|
opacity 0.7
|
|
|
|
.locale-swith
|
|
display block
|
|
margin-left 12px
|
|
padding 0 6px
|
|
border 1px solid #dbdbdb
|
|
border-radius 3px
|
|
line-height 18px
|
|
font-size 12px
|
|
text-align center
|
|
text-decoration none
|
|
transition all 0.2s
|
|
|
|
&:hover
|
|
border-color #999
|
|
|
|
.search
|
|
margin-top 16px
|
|
margin-right 12px
|
|
flex-shrink 0
|
|
|
|
.toggle
|
|
margin-right 16px
|
|
font-size 13px
|
|
vertical-align middle
|
|
|
|
.disabled
|
|
opacity 0.3
|
|
pointer-events none
|
|
</style>
|