mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 11:54:02 +00:00
docs
This commit is contained in:
cookfront
103
docs/src/ExamplesApp.vue
Normal file
103
docs/src/ExamplesApp.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="examples-container">
|
||||
<router-link class="page-back" v-if="visible" :to="'/'">
|
||||
<i class="zan-icon zan-icon-arrow"></i>
|
||||
</router-link>
|
||||
<router-view></router-view>
|
||||
<div class="footer">
|
||||
<img src="https://b.yzcdn.cn/v2/image/wap/zanui-logo.png" alt="logo" class="zanui-logo">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
visible() {
|
||||
return ['/'].indexOf(this.$route.path) < 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.examples-container {
|
||||
padding-bottom: 10px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f9fafb;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-back {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
transform: rotate(180deg);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.demo-sub-title {
|
||||
font-size: 16px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.zanui-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
44
docs/src/ExamplesDocsApp.vue
Normal file
44
docs/src/ExamplesDocsApp.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<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>
|
||||
</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);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navConfig: navConfig
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
@import '../assets/docs.css';
|
||||
</style>
|
||||
66
docs/src/components/demo-block.vue
Normal file
66
docs/src/components/demo-block.vue
Normal 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
60
docs/src/components/demo-list.vue
Normal 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
14
docs/src/components/example-block.vue
Normal 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
130
docs/src/components/footer-nav.vue
Normal 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
23
docs/src/components/mobile-computed.js
Normal 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
94
docs/src/components/mobile-nav.vue
Normal 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
51
docs/src/components/mobile-popup.vue
Normal 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
59
docs/src/components/page-footer.vue
Normal 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
123
docs/src/components/page-header.vue
Normal 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
114
docs/src/components/side-nav.vue
Normal 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>
|
||||
51
docs/src/examples.js
Normal file
51
docs/src/examples.js
Normal file
@@ -0,0 +1,51 @@
|
||||
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 'packages/zanui-css/src/index.css';
|
||||
|
||||
import DemoList from './components/demo-list.vue';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
Vue.use(VueRouter);
|
||||
|
||||
let routesConfig = routes(navConfig, true);
|
||||
routesConfig.push({
|
||||
path: '/',
|
||||
component: DemoList.default || DemoList
|
||||
});
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
base: __dirname,
|
||||
routes: routesConfig
|
||||
});
|
||||
|
||||
let indexScrollTop = 0;
|
||||
router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
indexScrollTop = document.body.scrollTop;
|
||||
}
|
||||
document.title = route.meta.title || document.title;
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach(route => {
|
||||
if (route.path !== '/') {
|
||||
document.body.scrollTop = 0;
|
||||
} else {
|
||||
Vue.nextTick(() => {
|
||||
document.body.scrollTop = indexScrollTop;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app-container');
|
||||
58
docs/src/index.js
Normal file
58
docs/src/index.js
Normal file
@@ -0,0 +1,58 @@
|
||||
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 packagesJson from 'zanui/package.json';
|
||||
|
||||
const global = {
|
||||
version: packagesJson.version
|
||||
};
|
||||
window._global = global;
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
function isMobile() {
|
||||
var platform = navigator.userAgent.toLowerCase();
|
||||
return (/(android|bb\d+|meego).+mobile|kdtunion|weibo|m2oapp|micromessenger|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i).test(platform) ||
|
||||
(/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i).test(platform.substr(0, 4));
|
||||
}
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
path: '/',
|
||||
redirect: '/component/install'
|
||||
});
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: '/vue',
|
||||
routes: routesConfig
|
||||
});
|
||||
|
||||
router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
const pathname = process.env.NODE_ENV === 'production' ? '/vue/' : '/';
|
||||
if (isMobile()) {
|
||||
window.location.replace(pathname + 'examples.html#/');
|
||||
return;
|
||||
}
|
||||
document.title = route.meta.title || document.title;
|
||||
next();
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app-container');
|
||||
15
docs/src/index.tpl
Normal file
15
docs/src/index.tpl
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>ZanUI</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app-container">
|
||||
<app></app>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
158
docs/src/nav.config.js
Normal file
158
docs/src/nav.config.js
Normal file
@@ -0,0 +1,158 @@
|
||||
module.exports = {
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "开发指南",
|
||||
"groups": [
|
||||
{
|
||||
"list": [
|
||||
{
|
||||
"path": "/install",
|
||||
"title": "安装"
|
||||
},
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"title": "快速上手"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "ZanUI组件",
|
||||
"showInMobile": true,
|
||||
"groups": [
|
||||
{
|
||||
"groupName": "基础组件",
|
||||
"list": [
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button 按钮"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/cell",
|
||||
"title": "Cell 单元格"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress 进度条"
|
||||
},
|
||||
{
|
||||
"path": "/panel",
|
||||
"title": "Panel 面板"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card 图文组件"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading 加载"
|
||||
},
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout 布局"
|
||||
},
|
||||
{
|
||||
"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 弹出框"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
39
docs/src/router.config.js
Normal file
39
docs/src/router.config.js
Normal file
@@ -0,0 +1,39 @@
|
||||
const registerRoute = (navConfig, isExample) => {
|
||||
let route = [];
|
||||
let navs = navConfig['zh-CN'];
|
||||
navs.forEach(nav => {
|
||||
if (isExample && !nav.showInMobile) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (nav.groups) {
|
||||
nav.groups.forEach(group => {
|
||||
group.list.forEach(nav => {
|
||||
addRoute(nav);
|
||||
});
|
||||
});
|
||||
} else if (nav.children) {
|
||||
nav.children.forEach(nav => {
|
||||
addRoute(nav);
|
||||
});
|
||||
} else {
|
||||
addRoute(nav);
|
||||
}
|
||||
});
|
||||
|
||||
function addRoute(page) {
|
||||
const component = isExample
|
||||
? require(`../examples-dist${page.path}.vue`)
|
||||
: require(`../examples-docs${page.path}.md`);
|
||||
route.push({
|
||||
path: '/component' + page.path,
|
||||
component: component.default || component
|
||||
});
|
||||
}
|
||||
|
||||
// console.log(route);
|
||||
|
||||
return route;
|
||||
};
|
||||
|
||||
export default registerRoute;
|
||||
Reference in New Issue
Block a user