ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2026-04-01 02:01:29 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs

Browse Source
This commit is contained in:
cookfront
2017-04-10 10:46:50 +08:00
parent 481f46e41f
commit eccbd2269c
48 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/src/components/demo-block.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div class="demo-block" :class="blockClass">
<slot name="examples"></slot>
<slot name="highlight"></slot>
</div>
</template>
<script>
export default {
computed: {
blockClass() {
return `demo-${this.$route.path.split('/').pop()}`;
}
}
};
</script>
<style>
.demo-block {
transition: .2s;
overflow: hidden;
margin-bottom: 20px;
code {
font-family: Menlo, Monaco, Consolas, Courier, monospace;
overflow: auto;
white-space: pre-wrap;
}
.examples {
width: 320px;
box-sizing: border-box;
padding: 10px 0;
min-height: 60px;
max-height: 500px;
overflow: auto;
background-color: #F8F8F8;
border: 1px solid #E5E5E5;
float: right;
}
.highlight {
box-sizing: border-box;
border: 1px solid #E5E5E5;
border-radius: 4px;
margin-right: 345px;
pre {
margin: 0;
}
code.hljs {
margin: 0;
border: none;
max-height: none;
border-radius: 0;
padding: 20px;
background-color: #F8F8F8;
&::before {
content: none;
}
}
}
}
</style>

60
docs/src/components/demo-list.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div class="side-nav">
<h1 class="zanui-title">Zan UI Wap</h1>
<h2 class="zanui-desc">有赞移动wap端组件库</h2>
<div class="mobile-navs">
<template v-for="item in data">
<div class="mobile-nav-item" v-if="item.showInMobile">
<mobile-nav v-for="group in item.groups" :group="group" :base="base"></mobile-nav>
</div>
</template>
</div>
</div>
</template>
<script>
import navConfig from '../nav.config.js';
import MobileNav from './mobile-nav';
export default {
data() {
return {
highlights: [],
navState: [],
data: navConfig['zh-CN'],
base: '/component'
};
},
components: {
MobileNav
}
};
</script>
<style>
.side-nav {
width: 100%;
box-sizing: border-box;
padding: 90px 15px 20px;
position: relative;
z-index: 1;
.zanui-title,
.zanui-desc {
text-align: center;
font-weight: normal;
}
.zanui-title {
font-size: 26px;
color: #333;
}
.zanui-desc {
font-size: 14px;
color: #666;
margin-bottom: 50px;
}
}
</style>

14
docs/src/components/example-block.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="example-block">
<h2 class="demo-sub-title" v-text="title"></h2>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
title: String
}
};
</script>

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

@@ -0,0 +1,130 @@
<template>
<div class="footer-nav">
<a
href="javascript:void(0)"
v-if="leftNav"
class="footer-nav__link footer-nav__left"
@click="handleNavClick('prev')">
<zan-icon name="arrow"></zan-icon>
<span>{{ leftNav.title }}</span>
</a>
<a
href="javascript:void(0)"
v-if="rightNav"
class="footer-nav__link footer-nav__right"
@click="handleNavClick('next')">
<zan-icon name="arrow"></zan-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;
.zan-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;
.zan-icon {
float: left;
transform: rotate(180deg);
margin-right: 10px;
}
}
@e right {
float: right;
.zan-icon {
float: right;
margin-left: 10px;
}
}
}
}
</style>

23
docs/src/components/mobile-computed.js Normal file
View File

@@ -0,0 +1,23 @@
import MobilePopup from './mobile-popup.vue';
export default {
components: {
MobilePopup
},
computed: {
mobileUrl() {
if (process.env.NODE_ENV === 'production') {
return '/vue/examples#' + location.pathname.slice(4);
} else {
return '/examples.html#' + location.pathname.slice(4);
}
}
},
data() {
return {
mobileShow: false
};
}
};

94
docs/src/components/mobile-nav.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<div class="mobile-nav-group">
<div
class="mobile-nav-group__title"
:class="{
'mobile-nav-group__title--open': isOpen
}"
@click="isOpen = !isOpen">
{{group.groupName}}
</div>
<ul class="pure-menu-list" v-show="isOpen">
<template v-for="navItem in group.list">
<li
class="mobile-nav-group__title"
v-if="!navItem.disabled">
<router-link
active-class="active"
:to="base + navItem.path"
v-text="navItem.title">
</router-link>
<zan-icon name="arrow"></zan-icon>
</li>
</template>
</ul>
</div>
</template>
<script>
export default {
props: {
group: {
type: Object,
default: () => {
return [];
}
},
base: String
},
data() {
return {
isOpen: false
};
}
};
</script>
<style>
@component-namespace mobile {
@b nav-group {
border-radius: 2px;
margin-bottom: 15px;
padding-left: 20px;
background-color: #fff;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
@e title {
font-size: 16px;
color: #333;
line-height: 56px;
position: relative;
@m open {
color: #999;
}
a {
color: #333;
display: block;
border-top: 1px solid #e5e5e5;
}
.zan-icon-arrow {
position: absolute;
font-size: 12px;
line-height: 1;
top: 24px;
right: 20px;
}
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
}
}
</style>

51
docs/src/components/mobile-popup.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<zan-popup v-model="currentValue" :lock-on-scroll="true">
<div class="mobile-popup">
<iframe :src="url" class="mobile-popup-iframe"></iframe>
</div>
</zan-popup>
</template>
<script>
export default {
props: {
url: String,
value: {}
},
data() {
return {
currentValue: this.value
};
},
watch: {
currentValue(val) {
this.$emit('input', val);
},
value(val) {
console.log(val);
this.currentValue = val;
}
}
};
</script>
<style>
.mobile-popup {
width: 375px;
height: 650px;
background: url(https://b.yzcdn.cn/v2/image/wap/zanui-mobile-container.png) no-repeat;
}
.mobile-popup-iframe {
width: 100%;
box-sizing: border-box;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
position: relative;
top: 64px;
height: 586px;
}
</style>

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

@@ -0,0 +1,59 @@
<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="#" 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>

123
docs/src/components/page-header.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div class="page-header">
<h1 class="page-header__logo">
<a href="#"></a>
</h1>
<ul class="page-header__navs">
<li class="page-header__item">
<a href="/" class="page-header__link">首页</a>
</li>
<li class="page-header__item">
<a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
</li>
<li class="page-header__item">
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
</li>
<li class="page-header__item">
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
</li>
</ul>
<ul class="page-header__subnavs">
<li class="page-header__item">
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">基础组件</a>
</li>
<li class="page-header__item">
<a href="http://zanui.qima-inc.com/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="#" class="page-header__github" target="_blank"></a>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
version: window._global.version
};
}
};
</script>
<style>
@component-namespace page {
@b header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
height: 60px;
background-color: #fbfbfb;
@e logo {
float: left;
> a {
display: block;
width: 78px;
height: 20px;
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
background-size: contain;
background-repeat: no-repeat;
margin: 20px 0 0 20px;
}
}
@e navs {
float: right;
}
@e item {
float: left;
height: 50px;
}
@e subnavs {
position: absolute;
line-height: 50px;
top: 60px;
display: flex;
justify-content: center;
width: 100%;
background-color: #f2f2f2;
a,
span {
line-height: 50px;
}
}
@e link {
display: block;
line-height: 60px;
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>

114
docs/src/components/side-nav.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="side-nav">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path">{{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 in item.children">
<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 in item.groups">
<div class="nav-group__title">{{group.groupName}}</div>
<ul class="pure-menu-list">
<template v-for="navItem in group.list">
<li
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: ''
}
}
};
</script>
<style lang="css">
.side-nav {
width: 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>