mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
[Doc] add demo pages (#237)
* [bugfix] Checkbox border render error in weixin browser * [bugfix] TreeSelect dependency path error * [bugfix] Swipe should clear autoplay timer when destroyed * [bugfix] Optimize component dependency analyze when build style entry * merge * update yarn.lock * update README.md * update README.md * update README.md * update README.md * update README.md * [Doc] add more badges in README.md * update README.md * [bugfix] Address & Contact list style * fix: contact test cases * [bugfix] popup style missing when build style entry * [bugfix] Search: onSearch event arguments missing * [Doc] add demo pages * update zan-doc@0.3.7 * fix: build entry error
This commit is contained in:
neverland
GitHub
parent
7e5dae3221
commit
0da517e004
@ -41,7 +41,7 @@ Vue.component(Search.name, Search);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-search placeholder="搜索框基础用法" v-model="basicSearch" />
|
||||
<van-search placeholder="搜索框基础用法" v-model="value" />
|
||||
```
|
||||
:::
|
||||
|
||||
@ -73,7 +73,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
|
||||
v-model="value"
|
||||
:show-action="true"
|
||||
@search="onSearch">
|
||||
<div slot="action" @click="goSlotSearch">搜索</div>
|
||||
<div slot="action" @click="onSearch">搜索</div>
|
||||
</van-search>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<zan-doc :simulator="simulator" :config="config" :base="base">
|
||||
<router-view></router-view>
|
||||
<zan-doc :simulators="simulators" :currentSimulator="currentSimulator" :config="config" :base="base">
|
||||
<router-view @changeDemoURL="onChangeDemoURL"></router-view>
|
||||
</zan-doc>
|
||||
</div>
|
||||
</template>
|
||||
@ -17,10 +17,9 @@ export default {
|
||||
group.list = group.list.filter(item => item.title !== '业务组件');
|
||||
}
|
||||
|
||||
const hash = window.location.hash;
|
||||
|
||||
return {
|
||||
simulator: `/zanui/vue/examples${hash}`,
|
||||
simulators: [`/zanui/vue/examples${location.hash}`],
|
||||
demoURL: '',
|
||||
lang: getLang()
|
||||
};
|
||||
},
|
||||
@ -32,6 +31,10 @@ export default {
|
||||
|
||||
config() {
|
||||
return docConfig[this.lang];
|
||||
},
|
||||
|
||||
currentSimulator() {
|
||||
return this.$route.name === 'zh-CN/demo' ? 1 : 0;
|
||||
}
|
||||
},
|
||||
|
||||
@ -39,6 +42,12 @@ export default {
|
||||
'$route'(to) {
|
||||
this.lang = to.meta.lang;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChangeDemoURL(url) {
|
||||
this.simulators = [this.simulators[0], url];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
94
docs/src/components/demo.vue
Normal file
94
docs/src/components/demo.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="zan-doc-demos">
|
||||
<h2>示例</h2>
|
||||
<p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
|
||||
<div class="zan-doc-demos__gallery">
|
||||
<div
|
||||
:class="['zan-doc-demos__item', { 'zan-doc-demos__item--active': index === currentDemo }]"
|
||||
v-for="(demo, index) in demos"
|
||||
>
|
||||
<h4>{{ demo.title }}</h4>
|
||||
<a :href="demo.source" target="_blank">源代码</a>
|
||||
<img :src="demo.preview" @click="onChangeDemo(demo, index)" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDemo: 0,
|
||||
demos: [{
|
||||
title: '会员中心',
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
|
||||
url: 'https://chenjiahan.github.io/vant-demo/#/user',
|
||||
source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/user'
|
||||
}, {
|
||||
title: '购物车',
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
|
||||
url: 'https://chenjiahan.github.io/vant-demo/#/cart',
|
||||
source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/cart'
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.$emit('changeDemoURL', this.demos[0].url);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChangeDemo(demo, index) {
|
||||
this.currentDemo = index;
|
||||
this.$emit('changeDemoURL', demo.url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.zan-doc-demos {
|
||||
&__gallery {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 28%;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
display: inline-block;
|
||||
|
||||
&:nth-child(3n+1),
|
||||
&:nth-child(3n+2) {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
background-color: #f8f8f8;
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin: 4px 0 7px;
|
||||
}
|
||||
|
||||
&--active {
|
||||
img {
|
||||
box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -28,12 +28,18 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
title: '业务组件',
|
||||
link: '/zanui/captain/component/quickstart'
|
||||
link: '/zanui/captain'
|
||||
},
|
||||
{
|
||||
path: '/changelog',
|
||||
title: '更新日志',
|
||||
noExample: true
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '示例页面',
|
||||
noDocument: true,
|
||||
noExample: true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesApp';
|
||||
import App from './WapApp';
|
||||
import routes from './router.config';
|
||||
import { setLang } from './utils/lang';
|
||||
import Vant, { Lazyload } from 'packages';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesDocsApp';
|
||||
import App from './DocsApp';
|
||||
import routes from './router.config';
|
||||
import ZanDoc from 'zan-doc';
|
||||
import isMobile from './utils/is-mobile';
|
||||
|
||||
@ -3,19 +3,16 @@ import { getLang } from './utils/lang';
|
||||
import DemoList from './components/demo-list';
|
||||
import componentDocs from '../examples-dist/entry-docs';
|
||||
import componentDemos from '../examples-dist/entry-demos';
|
||||
import Demo from './components/demo';
|
||||
import './utils/iframe-router';
|
||||
|
||||
const registerRoute = (isExample) => {
|
||||
const route = [{
|
||||
path: '/',
|
||||
redirect: to => {
|
||||
return `/${getLang()}/`;
|
||||
}
|
||||
redirect: to => `/${getLang()}/`
|
||||
}, {
|
||||
path: '*',
|
||||
redirect: to => {
|
||||
return `/${getLang()}/`;
|
||||
}
|
||||
redirect: to => `/${getLang()}/`
|
||||
}];
|
||||
|
||||
Object.keys(docConfig).forEach((lang, index) => {
|
||||
@ -53,9 +50,18 @@ const registerRoute = (isExample) => {
|
||||
const { path } = page;
|
||||
if (path) {
|
||||
const name = lang + '/' + path.replace('/', '');
|
||||
let component;
|
||||
|
||||
if (path === '/demo') {
|
||||
component = Demo;
|
||||
} else {
|
||||
component = isExample ? componentDemos[name] : componentDocs[name];
|
||||
}
|
||||
|
||||
route.push({
|
||||
name,
|
||||
component,
|
||||
path: `/${lang}/component${path}`,
|
||||
component: isExample ? componentDemos[name] : componentDocs[name],
|
||||
meta: { lang }
|
||||
});
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
"vue": ">= 2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.3",
|
||||
"autoprefixer": "^7.1.6",
|
||||
"avoriaz": "2.0.0",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
@ -119,6 +119,6 @@
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.9.2",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "^0.3.6"
|
||||
"zan-doc": "^0.3.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
<template>
|
||||
<a :class="['van-cell', 'van-hairline', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
|
||||
<div
|
||||
class="van-cell__title"
|
||||
v-if="$slots.title || title"
|
||||
>
|
||||
<div class="van-cell__title" v-if="$slots.title || title">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
|
||||
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon" />
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="van-cell__text" v-text="title"></span>
|
||||
<span class="van-cell__label" v-if="label" v-text="label"></span>
|
||||
<span class="van-cell__text" v-text="title" />
|
||||
<span class="van-cell__label" v-if="label" v-text="label" />
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
@ -21,20 +18,26 @@
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
<span v-text="value" />
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="right-icon">
|
||||
<i class="van-cell__right-icon van-icon van-icon-arrow" v-if="isLink"></i>
|
||||
<van-icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
|
||||
</slot>
|
||||
<slot name="extra"></slot>
|
||||
<slot name="extra" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
|
||||
export default {
|
||||
name: 'van-cell',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon
|
||||
},
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
title: String,
|
||||
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
*/
|
||||
handleSearch(e) {
|
||||
e.preventDefault();
|
||||
this.$emit('search');
|
||||
this.$emit('search', this.value);
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
.van-card {
|
||||
color: $text-color;
|
||||
height: 100px;
|
||||
font-size: 16px;
|
||||
background: #fafafa;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
display: table-cell;
|
||||
|
||||
.van-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
22
yarn.lock
22
yarn.lock
@ -341,12 +341,12 @@ autoprefixer@^6.3.1:
|
||||
postcss "^5.2.16"
|
||||
postcss-value-parser "^3.2.3"
|
||||
|
||||
autoprefixer@^7.1.3:
|
||||
version "7.1.5"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.5.tgz#d65d14b83c7cd1dd7bc801daa00557addf5a06b2"
|
||||
autoprefixer@^7.1.6:
|
||||
version "7.1.6"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
|
||||
dependencies:
|
||||
browserslist "^2.5.0"
|
||||
caniuse-lite "^1.0.30000744"
|
||||
browserslist "^2.5.1"
|
||||
caniuse-lite "^1.0.30000748"
|
||||
normalize-range "^0.1.2"
|
||||
num2fraction "^1.2.2"
|
||||
postcss "^6.0.13"
|
||||
@ -1133,7 +1133,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
|
||||
caniuse-db "^1.0.30000639"
|
||||
electron-to-chromium "^1.2.7"
|
||||
|
||||
browserslist@^2.1.2, browserslist@^2.5.0:
|
||||
browserslist@^2.1.2, browserslist@^2.5.1:
|
||||
version "2.5.1"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6"
|
||||
dependencies:
|
||||
@ -1233,6 +1233,10 @@ caniuse-lite@^1.0.30000744:
|
||||
version "1.0.30000748"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000748.tgz#44c8d6da52ad65a5d7b9dca4efebd0bdd982ba09"
|
||||
|
||||
caniuse-lite@^1.0.30000748:
|
||||
version "1.0.30000749"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000749.tgz#2ff382865aead8cca35dacfbab04f58effa4c01c"
|
||||
|
||||
caseless@~0.11.0:
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
|
||||
@ -8258,9 +8262,9 @@ yeast@0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
zan-doc@^0.3.6:
|
||||
version "0.3.6"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.6.tgz#fd21ebde256898c5e057c9d169c848666bf41420"
|
||||
zan-doc@^0.3.8:
|
||||
version "0.3.8"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.8.tgz#96eb93a196963e95af15527a426270ae73375351"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user