mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 02:31:21 +00:00
[Improvement] Reorganize demos (#1052)
This commit is contained in:
neverland
111
docs/src/demo-common.js
Normal file
111
docs/src/demo-common.js
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Demo Common Mixin && i18n
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
import progress from 'nprogress';
|
||||
import i18n from '../../packages/mixins/i18n';
|
||||
import Vant, { Lazyload } from '../../packages';
|
||||
import VantDoc, { DemoBlock, DemoSection } from 'vant-doc';
|
||||
import VueRouter from 'vue-router';
|
||||
import { Locale, Toast, Dialog } from '../../packages';
|
||||
import { camelize } from '../../packages/utils';
|
||||
|
||||
Vue
|
||||
.use(Vant)
|
||||
.use(VantDoc)
|
||||
.use(VueRouter)
|
||||
.use(Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
|
||||
Vue.mixin(i18n);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('demo-section', DemoSection);
|
||||
|
||||
window.Toast = Toast;
|
||||
window.Dialog = Dialog;
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
add: '增加',
|
||||
decrease: '减少',
|
||||
red: '红色',
|
||||
orange: '橙色',
|
||||
yellow: '黄色',
|
||||
tab: '标签',
|
||||
tag: '标签',
|
||||
desc: '描述信息',
|
||||
back: '返回',
|
||||
title: '标题',
|
||||
status: '状态',
|
||||
button: '按钮',
|
||||
option: '选项',
|
||||
search: '搜索',
|
||||
content: '内容',
|
||||
custom: '自定义',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
loading: '加载状态',
|
||||
disabled: '禁用状态',
|
||||
uneditable: '不可编辑',
|
||||
basicUsage: '基础用法',
|
||||
advancedUsage: '高级用法',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码'
|
||||
},
|
||||
'en-US': {
|
||||
add: 'Add',
|
||||
decrease: 'Decrease',
|
||||
red: 'Red',
|
||||
orange: 'Orange',
|
||||
yellow: 'Yellow',
|
||||
tab: 'Tab',
|
||||
tag: 'Tag',
|
||||
desc: 'Description',
|
||||
back: 'Back',
|
||||
title: 'Title',
|
||||
status: 'Status',
|
||||
button: 'Button',
|
||||
option: 'Option',
|
||||
search: 'Search',
|
||||
content: 'Content',
|
||||
custom: 'Custom',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
loading: 'Loading',
|
||||
disabled: 'Disabled',
|
||||
uneditable: 'Uneditable',
|
||||
basicUsage: 'Basic Usage',
|
||||
advancedUsage: 'Advanced Usage',
|
||||
usernamePlaceholder: 'Username',
|
||||
passwordPlaceholder: 'Password'
|
||||
}
|
||||
});
|
||||
|
||||
export function asyncWrapper(component) {
|
||||
return function(r) {
|
||||
progress.start();
|
||||
component(r).then(() => {
|
||||
progress.done();
|
||||
}).catch(() => {
|
||||
progress.done();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function componentWrapper(component, name) {
|
||||
component = component.default;
|
||||
name = 'demo-' + name;
|
||||
component.name = name;
|
||||
const { i18n } = component;
|
||||
if (i18n) {
|
||||
const formattedI18n = {};
|
||||
const camelizedName = camelize(name);
|
||||
Object.keys(i18n).forEach(key => {
|
||||
formattedI18n[key] = { [camelizedName]: i18n[key] };
|
||||
});
|
||||
Locale.add(formattedI18n);
|
||||
}
|
||||
return component;
|
||||
}
|
||||
58
docs/src/demo-entry.js
Normal file
58
docs/src/demo-entry.js
Normal file
@@ -0,0 +1,58 @@
|
||||
// This file is auto gererated by build/bin/build-entry.js
|
||||
import { asyncWrapper, componentWrapper } from './demo-common';
|
||||
|
||||
export default {
|
||||
'actionsheet': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/actionsheet/demo'), 'actionsheet')), 'actionsheet')),
|
||||
'address-edit': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/address-edit/demo'), 'address-edit')), 'address-edit')),
|
||||
'address-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/address-list/demo'), 'address-list')), 'address-list')),
|
||||
'area': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/area/demo'), 'area')), 'area')),
|
||||
'badge': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/badge/demo'), 'badge')), 'badge')),
|
||||
'button': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/button/demo'), 'button')), 'button')),
|
||||
'card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/card/demo'), 'card')), 'card')),
|
||||
'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/cell/demo'), 'cell')), 'cell')),
|
||||
'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/cell-swipe/demo'), 'cell-swipe')), 'cell-swipe')),
|
||||
'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/checkbox/demo'), 'checkbox')), 'checkbox')),
|
||||
'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/circle/demo'), 'circle')), 'circle')),
|
||||
'col': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/col/demo'), 'col')), 'col')),
|
||||
'collapse': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/collapse/demo'), 'collapse')), 'collapse')),
|
||||
'contact-card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/contact-card/demo'), 'contact-card')), 'contact-card')),
|
||||
'coupon-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/coupon-list/demo'), 'coupon-list')), 'coupon-list')),
|
||||
'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/datetime-picker/demo'), 'datetime-picker')), 'datetime-picker')),
|
||||
'dialog': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/dialog/demo'), 'dialog')), 'dialog')),
|
||||
'field': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/field/demo'), 'field')), 'field')),
|
||||
'goods-action': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/goods-action/demo'), 'goods-action')), 'goods-action')),
|
||||
'icon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/icon/demo'), 'icon')), 'icon')),
|
||||
'image-preview': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/image-preview/demo'), 'image-preview')), 'image-preview')),
|
||||
'lazyload': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/lazyload/demo'), 'lazyload')), 'lazyload')),
|
||||
'list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/list/demo'), 'list')), 'list')),
|
||||
'loading': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/loading/demo'), 'loading')), 'loading')),
|
||||
'nav-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/nav-bar/demo'), 'nav-bar')), 'nav-bar')),
|
||||
'notice-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/notice-bar/demo'), 'notice-bar')), 'notice-bar')),
|
||||
'number-keyboard': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/number-keyboard/demo'), 'number-keyboard')), 'number-keyboard')),
|
||||
'pagination': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/pagination/demo'), 'pagination')), 'pagination')),
|
||||
'panel': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/panel/demo'), 'panel')), 'panel')),
|
||||
'password-input': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/password-input/demo'), 'password-input')), 'password-input')),
|
||||
'picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/picker/demo'), 'picker')), 'picker')),
|
||||
'popup': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/popup/demo'), 'popup')), 'popup')),
|
||||
'progress': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/progress/demo'), 'progress')), 'progress')),
|
||||
'pull-refresh': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/pull-refresh/demo'), 'pull-refresh')), 'pull-refresh')),
|
||||
'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/radio/demo'), 'radio')), 'radio')),
|
||||
'rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/rate/demo'), 'rate')), 'rate')),
|
||||
'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/search/demo'), 'search')), 'search')),
|
||||
'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/sku/demo'), 'sku')), 'sku')),
|
||||
'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/slider/demo'), 'slider')), 'slider')),
|
||||
'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/stepper/demo'), 'stepper')), 'stepper')),
|
||||
'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/steps/demo'), 'steps')), 'steps')),
|
||||
'submit-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/submit-bar/demo'), 'submit-bar')), 'submit-bar')),
|
||||
'swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/swipe/demo'), 'swipe')), 'swipe')),
|
||||
'switch': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/switch/demo'), 'switch')), 'switch')),
|
||||
'switch-cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/switch-cell/demo'), 'switch-cell')), 'switch-cell')),
|
||||
'tab': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tab/demo'), 'tab')), 'tab')),
|
||||
'tabbar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tabbar/demo'), 'tabbar')), 'tabbar')),
|
||||
'tag': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tag/demo'), 'tag')), 'tag')),
|
||||
'toast': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/toast/demo'), 'toast')), 'toast')),
|
||||
'tree-select': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tree-select/demo'), 'tree-select')), 'tree-select')),
|
||||
'uploader': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/uploader/demo'), 'uploader')), 'uploader')),
|
||||
'vant-css': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/vant-css/demo'), 'vant-css')), 'vant-css')),
|
||||
'waterfall': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/waterfall/demo'), 'waterfall')), 'waterfall'))
|
||||
};
|
||||
@@ -38,7 +38,7 @@ module.exports = {
|
||||
noExample: true
|
||||
},
|
||||
{
|
||||
path: '/built-in-style',
|
||||
path: '/vant-css',
|
||||
title: '内置样式'
|
||||
},
|
||||
{
|
||||
@@ -69,7 +69,7 @@ module.exports = {
|
||||
groupName: '基础组件',
|
||||
list: [
|
||||
{
|
||||
path: '/layout',
|
||||
path: '/col',
|
||||
title: 'Layout - 布局'
|
||||
},
|
||||
{
|
||||
@@ -277,12 +277,12 @@ module.exports = {
|
||||
title: 'Card - 卡片'
|
||||
},
|
||||
{
|
||||
path: '/contact',
|
||||
path: '/contact-card',
|
||||
title: 'Contact - 联系人'
|
||||
},
|
||||
{
|
||||
path: '/coupon',
|
||||
title: 'Coupon - 优惠券选择器'
|
||||
path: '/coupon-list',
|
||||
title: 'Coupon - 优惠券'
|
||||
},
|
||||
{
|
||||
path: '/goods-action',
|
||||
@@ -340,7 +340,7 @@ module.exports = {
|
||||
noExample: true
|
||||
},
|
||||
{
|
||||
path: '/built-in-style',
|
||||
path: '/vant-css',
|
||||
title: 'Built-in style'
|
||||
},
|
||||
{
|
||||
@@ -371,7 +371,7 @@ module.exports = {
|
||||
groupName: 'Basic Components',
|
||||
list: [
|
||||
{
|
||||
path: '/layout',
|
||||
path: '/col',
|
||||
title: 'Layout'
|
||||
},
|
||||
{
|
||||
@@ -579,11 +579,11 @@ module.exports = {
|
||||
title: 'Card'
|
||||
},
|
||||
{
|
||||
path: '/contact',
|
||||
path: '/contact-card',
|
||||
title: 'Contact'
|
||||
},
|
||||
{
|
||||
path: '/coupon',
|
||||
path: '/coupon-list',
|
||||
title: 'Coupon'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import docConfig from './doc.config';
|
||||
import DemoList from './components/DemoList';
|
||||
import componentDocs from '../markdown';
|
||||
import componentDemos from '../demos';
|
||||
import componentDemos from './demo-entry';
|
||||
import DemoPages from './components/DemoPages';
|
||||
import Vue from 'vue';
|
||||
import './utils/iframe-router';
|
||||
|
||||
Reference in New Issue
Block a user