ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 10:44:59 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

文档改版 (#55)

Browse Source
This commit is contained in:
neverland
2017-07-20 14:35:08 +08:00
committed by 张敏
parent 570cd24b6b
commit 78da8ff37f
47 changed files with 283 additions and 2874 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/src/ExamplesDocsApp.vue
View File

@@ -1,40 +1,30 @@
<template>
<div class="app">
<page-header></page-header>
<div class="main-content">
<div class="page-container clearfix">
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
<div class="page-content">
<router-view></router-view>
<footer-nav></footer-nav>
</div>
</div>
</div>
<page-footer></page-footer>
<zan-doc :simulator="simulatorSrc" :config="config">
<router-view></router-view>
</zan-doc>
</div>
</template>
<script>
import Vue from 'vue';
import 'highlight.js/styles/color-brewer.css';
import navConfig from './nav.config.js';
import SideNav from './components/side-nav';
import DemoBlock from './components/demo-block';
import FooterNav from './components/footer-nav';
import PageHeader from './components/page-header';
import PageFooter from './components/page-footer';
Vue.component('side-nav', SideNav);
Vue.component('demo-block', DemoBlock);
Vue.component('footer-nav', FooterNav);
Vue.component('page-header', PageHeader);
Vue.component('page-footer', PageFooter);
import docConfig from './doc.config';
export default {
data() {
return {
navConfig: navConfig
config: docConfig['zh-CN']
};
},
computed: {
simulatorSrc() {
const dir = this.$route.path.split('/').pop();
if (dir === 'quickstart' || dir === 'changelog') {
return '/zanui/vue/examples';
} else {
return `/zanui/vue/examples/component/${dir}`;
}
}
}
};
</script>

4
docs/src/components/demo-list.vue
View File

@@ -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'
};
},

130
docs/src/components/footer-nav.vue
View File

@@ -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>

59
docs/src/components/page-footer.vue
View File

@@ -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>

146
docs/src/components/page-header.vue
View File

@@ -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>

124
docs/src/components/side-nav.vue
View File

@@ -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>

181
docs/src/doc.config.js Normal file
View File

@@ -0,0 +1,181 @@
/* eslint-disable */
module.exports = {
"zh-CN": {
header: {
'首页': 'https://www.youzanyun.com/zanui',
'PC端': 'https://www.youzanyun.com/zanui/react',
'移动端': 'https://www.youzanyun.com/zanui/vue',
'微信小程序': 'https://github.com/youzan/zanui-weapp'
},
footer: {
copyright: `2012-${(new Date()).getFullYear()} © youzanyun.com - 浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号`,
nav: {
'有赞官网': 'https://www.youzan.com/',
'有赞云': 'http://www.youzanyun.com/zanui',
'加入我们': 'https://job.youzan.com/'
}
},
nav: [
{
"name": "开发指南",
"groups": [
{
"list": [
{
"path": "/quickstart",
"title": "快速上手",
noExample: true
},
{
"path": "/changelog",
"title": "更新日志",
noExample: true
}
]
}
]
},
{
"name": "Vant组件",
"showInMobile": true,
"groups": [
{
"groupName": "基础组件",
"list": [
{
"path": "/layout",
"title": "Layout 布局"
},
{
"path": "/button",
"title": "Button 按钮"
},
{
"path": "/icon",
"title": "Icon 图标"
},
{
"path": "/cell",
"title": "Cell 单元格"
},
{
"path": "/cell-swipe",
"title": "Cell Swipe 滑动单元格"
},
{
"path": "/progress",
"title": "Progress 进度条"
},
{
"path": "/card",
"title": "Card 图文组件"
},
{
"path": "/panel",
"title": "Panel 面板"
},
{
"path": "/loading",
"title": "Loading 加载"
},
{
"path": "/steps",
"title": "Steps 步骤条"
},
{
"path": "/tag",
"title": "Tag 标记"
},
{
"path": "/badge",
"title": "Badge 徽章"
},
{
"path": "/tab",
"title": "Tab 标签"
},
{
"path": "/popup",
"title": "Popup 弹出菜单"
},
{
"path": "/swipe",
"title": "Swipe 轮播"
},
{
"path": "/search",
"title": "Search 搜索"
},
{
"path": "/quantity",
"title": "Quantity 数量选择"
},
{
"path": "/waterfall",
"title": "Waterfall 瀑布流"
},
{
"path": "/image-preview",
"title": "ImagePreview 图片预览"
},
{
"path": "/lazyload",
"title": "Lazyload 图片懒加载"
}
]
},
{
"groupName": "表单",
"list": [
{
"path": "/switch",
"title": "Switch 开关"
},
{
"path": "/field",
"title": "Field 输入框"
},
{
"path": "/radio",
"title": "Radio 单选框"
},
{
"path": "/checkbox",
"title": "Checkbox 复选框"
},
{
"path": "/uploader",
"title": "Uploader 图片上传"
}
]
},
{
"groupName": "操作反馈",
"list": [
{
"path": "/actionsheet",
"title": "Actionsheet 行动按钮"
},
{
"path": "/toast",
"title": "Toast 轻提示"
},
{
"path": "/picker",
"title": "Picker 选择器"
},
{
"path": "/datetime-picker",
"title": "Datetime Picker 时间选择"
},
{
"path": "/dialog",
"title": "Dialog 弹出框"
}
]
}
]
}
]
}
}

6
docs/src/examples.js
View File

@@ -1,21 +1,21 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './ExamplesApp';
import navConfig from './nav.config.js';
import routes from './router.config';
import ZanUI from 'src/index';
import ZanDoc from 'zan-doc';
import 'packages/vant-css/src/index.css';
import DemoList from './components/demo-list.vue';
Vue.use(ZanUI);
Vue.use(ZanDoc);
Vue.use(ZanUI.Lazyload, {
lazyComponent: true
});
Vue.use(VueRouter);
const routesConfig = routes(navConfig, true);
const routesConfig = routes(true);
routesConfig.push({
path: '/',
component: DemoList.default || DemoList

7
docs/src/index.js
View File

@@ -1,10 +1,11 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './ExamplesDocsApp';
import navConfig from './nav.config.js';
import routes from './router.config';
import ZanUI from 'src/index.js';
import ZanDoc from 'zan-doc';
import packageJson from '../../package.json';
import DemoBlock from './components/demo-block';
const global = {
version: packageJson.version
@@ -22,11 +23,13 @@ function isMobile() {
Vue.use(VueRouter);
Vue.use(ZanUI);
Vue.use(ZanDoc);
Vue.use(ZanUI.Lazyload, {
lazyComponent: true
});
Vue.component('demo-block', DemoBlock);
const routesConfig = routes(navConfig);
const routesConfig = routes();
routesConfig.push({
path: '/',
redirect: '/component/quickstart'

163
docs/src/nav.config.js
View File

@@ -1,163 +0,0 @@
/* eslint-disable */
module.exports = {
"zh-CN": [
{
"name": "开发指南",
"groups": [
{
"list": [
{
"path": "/quickstart",
"title": "快速上手"
},
{
"path": "/changelog",
"title": "更新日志"
}
]
}
]
},
{
"name": "Vant组件",
"showInMobile": true,
"groups": [
{
"groupName": "基础组件",
"list": [
{
"path": "/layout",
"title": "Layout 布局"
},
{
"path": "/button",
"title": "Button 按钮"
},
{
"path": "/icon",
"title": "Icon 图标"
},
{
"path": "/cell",
"title": "Cell 单元格"
},
{
"path": "/cell-swipe",
"title": "Cell Swipe 滑动单元格"
},
{
"path": "/progress",
"title": "Progress 进度条"
},
{
"path": "/card",
"title": "Card 图文组件"
},
{
"path": "/panel",
"title": "Panel 面板"
},
{
"path": "/loading",
"title": "Loading 加载"
},
{
"path": "/steps",
"title": "Steps 步骤条"
},
{
"path": "/tag",
"title": "Tag 标记"
},
{
"path": "/badge",
"title": "Badge 徽章"
},
{
"path": "/tab",
"title": "Tab 标签"
},
{
"path": "/popup",
"title": "Popup 弹出菜单"
},
{
"path": "/swipe",
"title": "Swipe 轮播"
},
{
"path": "/search",
"title": "Search 搜索"
},
{
"path": "/quantity",
"title": "Quantity 数量选择"
},
{
"path": "/waterfall",
"title": "Waterfall 瀑布流"
},
{
"path": "/image-preview",
"title": "ImagePreview 图片预览"
},
{
"path": "/lazyload",
"title": "Lazyload 图片懒加载"
}
]
},
{
"groupName": "表单",
"list": [
{
"path": "/switch",
"title": "Switch 开关"
},
{
"path": "/field",
"title": "Field 输入框"
},
{
"path": "/radio",
"title": "Radio 单选框"
},
{
"path": "/checkbox",
"title": "Checkbox 复选框"
},
{
"path": "/uploader",
"title": "Uploader 图片上传"
}
]
},
{
"groupName": "操作反馈",
"list": [
{
"path": "/actionsheet",
"title": "Actionsheet 行动按钮"
},
{
"path": "/toast",
"title": "Toast 轻提示"
},
{
"path": "/picker",
"title": "Picker 选择器"
},
{
"path": "/datetime-picker",
"title": "Datetime Picker 时间选择"
},
{
"path": "/dialog",
"title": "Dialog 弹出框"
}
]
}
]
}
]
}

5
docs/src/router.config.js
View File

@@ -1,6 +1,7 @@
const registerRoute = (navConfig, isExample) => {
const navs = require('./doc.config')['zh-CN'].nav;
const registerRoute = (isExample) => {
let route = [];
let navs = navConfig['zh-CN'];
navs.forEach(nav => {
if (isExample && !nav.showInMobile) {
return;