mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-12 12:25:22 +08:00
docs: side-nav refactor with Vue3 (#1943)
* docs: side-nav refactor with Vue3 * docs: fix side-nav style
This commit is contained in:
Enoch Qin
GitHub
parent
0cac0bda38
commit
9b74a3dd03
@ -10,19 +10,23 @@
|
||||
<a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
|
||||
<ul class="pure-menu-list sub-nav">
|
||||
<li class="nav-item">
|
||||
<a class="sponsor" href="https://bit.dev/?from=element-ui" target="_blank">
|
||||
<a
|
||||
class="sponsor"
|
||||
href="https://bit.dev/?from=element-ui"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="~examples/assets/images/bit.svg" alt="bit">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
v-for="(item, keyy) in data"
|
||||
:key="keyy"
|
||||
class="nav-item"
|
||||
>
|
||||
<a v-if="!item.path && !item.href" @click="expandMenu">{{ item.name }}</a>
|
||||
<a v-if="item.href" :href="item.href" target="_blank">{{ item.name }}</a>
|
||||
<li v-for="(item, keyy) in data" :key="keyy" class="nav-item">
|
||||
<a v-if="!item.path && !item.href" @click="expandMenu">{{
|
||||
item.name
|
||||
}}</a>
|
||||
<a v-if="item.href" :href="item.href" target="_blank">{{
|
||||
item.name
|
||||
}}</a>
|
||||
<router-link
|
||||
v-if="item.path"
|
||||
active-class="active"
|
||||
@ -46,12 +50,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div
|
||||
v-for="(group, key) in item.groups"
|
||||
:key="key"
|
||||
class="nav-group"
|
||||
>
|
||||
<div class="nav-group__title" @click="expandMenu">{{ group.groupName }}</div>
|
||||
<div v-for="(group, key) in item.groups" :key="key" class="nav-group">
|
||||
<div class="nav-group__title" @click="expandMenu">
|
||||
{{ group.groupName }}
|
||||
</div>
|
||||
<ul class="pure-menu-list">
|
||||
<li
|
||||
v-for="(navItem, keey) in group.list"
|
||||
@ -74,219 +76,247 @@
|
||||
<!--<div id="code-sponsor-widget"></div>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import bus from '../bus'
|
||||
import compoLang from '../i18n/component.json'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
default: () => [],
|
||||
},
|
||||
base: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
isSmallScreen: false,
|
||||
isFade: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navStyle() {
|
||||
setup() {
|
||||
const isSmallScreen = ref(false)
|
||||
const isFade = ref(false)
|
||||
const route = useRoute()
|
||||
|
||||
bus.$on('fade-nav', () => {
|
||||
isFade.value = true
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
const navStyle = computed(() => {
|
||||
const style = {}
|
||||
if (this.isSmallScreen) {
|
||||
if (isSmallScreen.value) {
|
||||
style.paddingBottom = '60px'
|
||||
}
|
||||
style.opacity = this.isFade ? '0.5' : '1'
|
||||
style.opacity = isFade.value ? '0.5' : '1'
|
||||
return style
|
||||
},
|
||||
lang() {
|
||||
return this.$route.meta.lang
|
||||
},
|
||||
langConfig() {
|
||||
return compoLang.filter(config => config.lang === this.lang)[0]['nav']
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.handlePathChange()
|
||||
},
|
||||
isFade(val) {
|
||||
bus.$emit('nav-fade', val)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
bus.$on('fade-nav', () => {
|
||||
this.isFade = true
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.handleResize()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.isSmallScreen = document.documentElement.clientWidth < 768
|
||||
this.handlePathChange()
|
||||
},
|
||||
handlePathChange() {
|
||||
if (!this.isSmallScreen) {
|
||||
this.expandAllMenu()
|
||||
|
||||
const lang = computed(() => {
|
||||
return route.meta.lang
|
||||
})
|
||||
|
||||
const langConfig = computed(() => {
|
||||
return compoLang.filter(config => config.lang === lang.value)[0]['nav']
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
handlePathChange()
|
||||
},
|
||||
)
|
||||
|
||||
watch(isFade, val => {
|
||||
bus.$emit('nav-fade', val)
|
||||
})
|
||||
|
||||
const handleResize = () => {
|
||||
isSmallScreen.value = document.documentElement.clientWidth < 768
|
||||
handlePathChange()
|
||||
}
|
||||
|
||||
const handlePathChange = async () => {
|
||||
if (!isSmallScreen.value) {
|
||||
expandAllMenu()
|
||||
return
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.hideAllMenu()
|
||||
let activeAnchor = this.$el.querySelector('a.active')
|
||||
let ul = activeAnchor.parentNode
|
||||
while (ul.tagName !== 'UL') {
|
||||
ul = ul.parentNode
|
||||
}
|
||||
ul.style.height = 'auto'
|
||||
})
|
||||
},
|
||||
hideAllMenu() {
|
||||
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
|
||||
await nextTick()
|
||||
hideAllMenu()
|
||||
let activeAnchor = document.querySelector('a.active')
|
||||
let ul = activeAnchor.parentNode
|
||||
while (ul.tagName !== 'UL') {
|
||||
ul = ul.parentNode
|
||||
}
|
||||
ul.style.height = 'auto'
|
||||
}
|
||||
|
||||
const hideAllMenu = () => {
|
||||
[].forEach.call(document.querySelectorAll('.pure-menu-list'), ul => {
|
||||
ul.style.height = '0'
|
||||
})
|
||||
},
|
||||
expandAllMenu() {
|
||||
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
|
||||
}
|
||||
|
||||
const expandAllMenu = () => {
|
||||
[].forEach.call(document.querySelectorAll('.pure-menu-list'), ul => {
|
||||
ul.style.height = 'auto'
|
||||
})
|
||||
},
|
||||
expandMenu(event) {
|
||||
if (!this.isSmallScreen) return
|
||||
}
|
||||
|
||||
const expandMenu = event => {
|
||||
if (!isSmallScreen.value) return
|
||||
let target = event.currentTarget
|
||||
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return
|
||||
this.hideAllMenu()
|
||||
if (
|
||||
!target.nextElementSibling ||
|
||||
target.nextElementSibling.tagName !== 'UL'
|
||||
)
|
||||
return
|
||||
hideAllMenu()
|
||||
event.currentTarget.nextElementSibling.style.height = 'auto'
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
isFade,
|
||||
navStyle,
|
||||
lang,
|
||||
langConfig,
|
||||
expandMenu,
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.side-nav {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 30px;
|
||||
transition: opacity .3s;
|
||||
&.is-fade {
|
||||
transition: opacity 3s;
|
||||
}
|
||||
.side-nav {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 30px;
|
||||
transition: opacity 0.3s;
|
||||
&.is-fade {
|
||||
transition: opacity 3s;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> ul > .nav-item > a {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
> ul > .nav-item:nth-child(-n + 4) > a {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: 0.15s ease-out;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: normal;
|
||||
|
||||
> ul > .nav-item > a {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
> ul > .nav-item:nth-child(-n + 4) > a {
|
||||
margin-top: 0;
|
||||
&.active {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: .15s ease-out;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
color: #444;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #409EFF;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sponsors {
|
||||
& > .sub-nav {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: #444;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sponsors {
|
||||
& > .sub-nav {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 8px 20px 4px 0;
|
||||
|
||||
a {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 8px 20px 4px 0;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
}
|
||||
img {
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 26px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#code-sponsor-widget {
|
||||
margin: 0 0 0 -20px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown-list {
|
||||
width: 120px;
|
||||
margin-top: -8px;
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 26px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#code-sponsor-widget {
|
||||
margin: 0 0 0 -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-list {
|
||||
width: 120px;
|
||||
margin-top: -8px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user