mirror of
https://github.com/youzan/vant.git
synced 2025-10-21 19:24:16 +00:00
文档改版 (#55)
This commit is contained in:
neverland
@@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.js';
|
||||
import docConfig from '../doc.config.js';
|
||||
import MobileNav from './mobile-nav';
|
||||
|
||||
export default {
|
||||
@@ -21,7 +21,7 @@ export default {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
data: navConfig['zh-CN'],
|
||||
data: docConfig['zh-CN'].nav,
|
||||
base: '/component'
|
||||
};
|
||||
},
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div class="footer-nav">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="leftNav"
|
||||
class="footer-nav__link footer-nav__left"
|
||||
@click="handleNavClick('prev')">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>{{ leftNav.title }}</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="rightNav"
|
||||
class="footer-nav__link footer-nav__right"
|
||||
@click="handleNavClick('next')">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>{{ rightNav.title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPath: null,
|
||||
nav: [],
|
||||
leftNav: null,
|
||||
rightNav: null
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setNav() {
|
||||
let nav = navConfig['zh-CN'];
|
||||
for (let i = 0; i < nav.length; i++) {
|
||||
let navItem = nav[i];
|
||||
if (!navItem.groups) {
|
||||
this.nav.push(nav[i]);
|
||||
} else {
|
||||
for (let j = 0; j < navItem.groups.length; j++) {
|
||||
this.nav = this.nav.concat(navItem.groups[j].list);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateNav() {
|
||||
let baseUrl = '/component';
|
||||
let currentIndex;
|
||||
|
||||
this.currentPath = this.$route.path.slice(baseUrl.length);
|
||||
|
||||
for (let i = 0, len = this.nav.length; i < len; i++) {
|
||||
if (this.nav[i].path === this.currentPath) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.leftNav = this.nav[currentIndex - 1];
|
||||
this.rightNav = this.nav[currentIndex + 1];
|
||||
},
|
||||
|
||||
handleNavClick(direction) {
|
||||
this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace footer {
|
||||
@b nav {
|
||||
padding: 24px 40px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
||||
@e link {
|
||||
color: #3388FF;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
|
||||
.van-icon {
|
||||
width: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border: 2px solid #3388FF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@e left {
|
||||
float: left;
|
||||
|
||||
.van-icon {
|
||||
float: left;
|
||||
transform: rotate(180deg);
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@e right {
|
||||
float: right;
|
||||
|
||||
.van-icon {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="page-footer">
|
||||
<ul class="page-footer__navs">
|
||||
<li class="page-footer__item">
|
||||
<a href="https://www.youzan.com/" class="page-footer__link" target="_blank">有赞官网</a>
|
||||
</li>
|
||||
<li class="page-footer__item">
|
||||
<a href="https://www.youzanyun.com/" class="page-footer__link" target="_blank">有赞云</a>
|
||||
</li>
|
||||
<li class="page-footer__item">
|
||||
<a href="https://job.youzan.com/" class="page-footer__link" target="_blank">加入我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="page-footer__copyright">
|
||||
2012-{{ curYear }} © youzanyun.com - 浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curYear: (new Date()).getFullYear()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b footer {
|
||||
height: 72px;
|
||||
margin-top: 40px;
|
||||
background-color: #34383B;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@e item {
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@e link {
|
||||
display: block;
|
||||
color: #E5E5E5;
|
||||
font-size: 12px;
|
||||
line-height: 72px;
|
||||
}
|
||||
|
||||
@e copyright {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 72px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<div class="page-header__top">
|
||||
<h1 class="page-header__logo">
|
||||
<a href="https://www.youzanyun.com/zanui"></a>
|
||||
</h1>
|
||||
<ul class="page-header__navs">
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/react" class="page-header__link">Zent - PC端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">Vant - 移动端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">ZanUi-WeApp - 微信小程序</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="page-header__subnavs" :class="{ 'page-header__subnavs--shadow': scrollTop > 0 }">
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">基础组件</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/captain" class="page-header__link">业务组件</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<span class="page-header__link">V{{ version }}</span>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://github.com/youzan/vant" class="page-header__github" target="_blank"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
version: window._global.version,
|
||||
scrollTop: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const _this = this;
|
||||
let timer;
|
||||
window.addEventListener('scroll', () => {
|
||||
clearTimeout(timer);
|
||||
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
timer = setTimeout(() => {
|
||||
_this.scrollTop = scrollTop;
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
@e top {
|
||||
overflow: hidden;
|
||||
height: 80px;
|
||||
background-color: #fbfbfb;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
@e logo {
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
width: 78px;
|
||||
height: 20px;
|
||||
background-image: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 30px 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@e navs {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e item {
|
||||
float: left;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@e subnavs {
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #f2f2f2;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
|
||||
@m shadow {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@e link {
|
||||
display: block;
|
||||
line-height: 80px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
margin: 0 20px;
|
||||
|
||||
&:hover {
|
||||
color: #3388FF;
|
||||
}
|
||||
|
||||
@m active {
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
|
||||
@e github {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 14px 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="(item, index) in data" :key="index">
|
||||
<a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
|
||||
<router-link
|
||||
v-else
|
||||
active-class="active"
|
||||
:to="base + item.path"
|
||||
exact
|
||||
v-text="item.title || item.name">
|
||||
</router-link>
|
||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||
<li class="nav-item" v-for="(navItem, index) in item.children" :key="index">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title || navItem.name">
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div class="nav-group" v-for="(group, index) in item.groups" :key="index">
|
||||
<div class="nav-group__title">{{group.groupName}}</div>
|
||||
<ul class="pure-menu-list">
|
||||
<template v-for="(navItem, index) in group.list">
|
||||
<li
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
v-if="!navItem.disabled">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title">
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTitleClick(item) {
|
||||
const firstGroup = item.groups && item.groups[0];
|
||||
if (firstGroup && firstGroup.list && firstGroup.list.length !== 0) {
|
||||
return this.$router.replace(this.base + firstGroup.list[0].path);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
flex: 0 0 250px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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: all .3s;
|
||||
padding: 0 20px;
|
||||
|
||||
&.active {
|
||||
color: #3388FF;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
padding-left: 44px;
|
||||
|
||||
&:hover {
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding-left: 28px;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user