[Improvement] Reorganize demos (#1052)
This commit is contained in:
neverland
GitHub
@@ -1,58 +0,0 @@
|
||||
// This file is auto gererated by build/bin/build-entry.js
|
||||
import { asyncWrapper, componentWrapper } from './common';
|
||||
|
||||
export default {
|
||||
'actionsheet': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet')),
|
||||
'address-edit': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/address-edit'), 'address-edit')), 'address-edit')),
|
||||
'address-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/address-list'), 'address-list')), 'address-list')),
|
||||
'area': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/area'), 'area')), 'area')),
|
||||
'badge': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/badge'), 'badge')), 'badge')),
|
||||
'built-in-style': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/built-in-style'), 'built-in-style')), 'built-in-style')),
|
||||
'button': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/button'), 'button')), 'button')),
|
||||
'card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/card'), 'card')), 'card')),
|
||||
'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe')),
|
||||
'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')),
|
||||
'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')),
|
||||
'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')),
|
||||
'collapse': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/collapse'), 'collapse')), 'collapse')),
|
||||
'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')),
|
||||
'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')),
|
||||
'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')),
|
||||
'dialog': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/dialog'), 'dialog')), 'dialog')),
|
||||
'field': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/field'), 'field')), 'field')),
|
||||
'goods-action': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/goods-action'), 'goods-action')), 'goods-action')),
|
||||
'icon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/icon'), 'icon')), 'icon')),
|
||||
'image-preview': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/image-preview'), 'image-preview')), 'image-preview')),
|
||||
'layout': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/layout'), 'layout')), 'layout')),
|
||||
'lazyload': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/lazyload'), 'lazyload')), 'lazyload')),
|
||||
'list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/list'), 'list')), 'list')),
|
||||
'loading': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/loading'), 'loading')), 'loading')),
|
||||
'nav-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar')),
|
||||
'notice-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar')),
|
||||
'number-keyboard': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard')),
|
||||
'pagination': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/pagination'), 'pagination')), 'pagination')),
|
||||
'panel': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/panel'), 'panel')), 'panel')),
|
||||
'password-input': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/password-input'), 'password-input')), 'password-input')),
|
||||
'picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/picker'), 'picker')), 'picker')),
|
||||
'popup': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/popup'), 'popup')), 'popup')),
|
||||
'progress': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/progress'), 'progress')), 'progress')),
|
||||
'pull-refresh': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh')),
|
||||
'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/radio'), 'radio')), 'radio')),
|
||||
'rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/rate'), 'rate')), 'rate')),
|
||||
'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/search'), 'search')), 'search')),
|
||||
'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/sku'), 'sku')), 'sku')),
|
||||
'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/slider'), 'slider')), 'slider')),
|
||||
'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/stepper'), 'stepper')), 'stepper')),
|
||||
'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/steps'), 'steps')), 'steps')),
|
||||
'submit-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/submit-bar'), 'submit-bar')), 'submit-bar')),
|
||||
'swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/swipe'), 'swipe')), 'swipe')),
|
||||
'switch-cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/switch-cell'), 'switch-cell')), 'switch-cell')),
|
||||
'switch': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/switch'), 'switch')), 'switch')),
|
||||
'tab': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tab'), 'tab')), 'tab')),
|
||||
'tabbar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tabbar'), 'tabbar')), 'tabbar')),
|
||||
'tag': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tag'), 'tag')), 'tag')),
|
||||
'toast': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/toast'), 'toast')), 'toast')),
|
||||
'tree-select': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tree-select'), 'tree-select')), 'tree-select')),
|
||||
'uploader': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/uploader'), 'uploader')), 'uploader')),
|
||||
'waterfall': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/waterfall'), 'waterfall')), 'waterfall'))
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,71 +0,0 @@
|
||||
export default {
|
||||
'province_list': {
|
||||
'110000': 'Beijing',
|
||||
'330000': 'Zhejiang',
|
||||
'810000': 'Hong Kong'
|
||||
},
|
||||
'city_list': {
|
||||
'110100': 'Beijing City',
|
||||
'330100': 'Hangzhou',
|
||||
'330200': 'Ningbo',
|
||||
'330300': 'Wenzhou',
|
||||
'330400': 'Jiaxin',
|
||||
'331100': 'Lishui',
|
||||
'810100': 'Hong Kong Island',
|
||||
'810200': 'Kowloon',
|
||||
'810300': 'New Territories'
|
||||
},
|
||||
'county_list': {
|
||||
'110101': 'Dongcheng',
|
||||
'110102': 'Xicheng',
|
||||
'110105': 'Chaoyang',
|
||||
'110106': 'Fengtai',
|
||||
'110108': 'Haidian',
|
||||
'110111': 'Fangshan',
|
||||
'110112': 'Tongzhou',
|
||||
'110113': 'Shunyi',
|
||||
'110114': 'Changping',
|
||||
'110115': 'Daxing',
|
||||
'330105': 'Gongshu',
|
||||
'330106': 'Xihu',
|
||||
'330108': 'Binjiang',
|
||||
'330109': 'Xiaoshan',
|
||||
'330110': 'Yuhang',
|
||||
'330111': 'Fuyang',
|
||||
'330127': 'Chunan',
|
||||
'330182': 'Jiande',
|
||||
'330185': 'Linan',
|
||||
'330206': 'Beilun',
|
||||
'330211': 'Zhenhai',
|
||||
'330225': 'Xiangshan',
|
||||
'330226': 'Ninghai',
|
||||
'330281': 'Yuyao',
|
||||
'330282': 'Cixi',
|
||||
'330327': 'Cangnan',
|
||||
'330328': 'Wencheng',
|
||||
'330329': 'Shuntai',
|
||||
'330381': 'Ruian',
|
||||
'330382': 'Yueqing',
|
||||
'330402': 'Nanhu',
|
||||
'330421': 'Jiashan',
|
||||
'330424': 'Haiyan',
|
||||
'330481': 'Haining',
|
||||
'330482': 'Pinghu',
|
||||
'330483': 'Tongxiang',
|
||||
'331102': 'Liandu District',
|
||||
'331121': 'Qingtian County',
|
||||
'331125': 'Yunhe County',
|
||||
'331181': 'Longquan County',
|
||||
'810101': 'Central',
|
||||
'810102': 'Wan Chai',
|
||||
'810202': 'Mong Kok',
|
||||
'810203': 'Sham Shui Po',
|
||||
'810204': 'Chuk Un',
|
||||
'810205': 'Kwun Tong',
|
||||
'810303': 'Sha Tin',
|
||||
'810305': 'Yuen Long',
|
||||
'810306': 'Tuen Mun',
|
||||
'810307': 'Tsuen Wan',
|
||||
'810309': 'Lantau Island'
|
||||
}
|
||||
}
|
||||
@@ -1,517 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
'zh-CN': {
|
||||
kdt_id: 55,
|
||||
user_id: 4674509,
|
||||
offline_id: 0,
|
||||
activity_alias: '',
|
||||
sku: {
|
||||
tree: [
|
||||
{
|
||||
k: '颜色',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: '天蓝色',
|
||||
imgUrl:
|
||||
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||
}
|
||||
],
|
||||
k_s: 's1',
|
||||
count: 2
|
||||
},
|
||||
{
|
||||
k: '尺寸',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1193',
|
||||
name: '1'
|
||||
},
|
||||
{
|
||||
id: '1194',
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
k_s: 's2',
|
||||
count: 2
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 110,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2260,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 0,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 111,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 6,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
}
|
||||
],
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
collection_id: 2261,
|
||||
collection_price: 0,
|
||||
none_sku: false,
|
||||
sold_num: 0,
|
||||
min_price: '1.00',
|
||||
max_price: '1.00',
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: '留言1',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: '1'
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言2',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'id_no',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言3',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'image',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: '留言4',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '数字',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'tel',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '邮件',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'email',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '日期',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'date',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '时间含日期',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: '时间',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
}
|
||||
],
|
||||
hide_stock: false
|
||||
},
|
||||
goods_id: '946755',
|
||||
alias: '2oml0r0n5vytj',
|
||||
quota: 15,
|
||||
is_virtual: '0',
|
||||
quota_used: 0,
|
||||
goods_info: {
|
||||
title: '测试商品',
|
||||
picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||
price: 1,
|
||||
origin: ''
|
||||
}
|
||||
},
|
||||
'en-US': {
|
||||
kdt_id: 55,
|
||||
user_id: 4674509,
|
||||
offline_id: 0,
|
||||
activity_alias: '',
|
||||
sku: {
|
||||
tree: [
|
||||
{
|
||||
k: 'Color',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: 'Blue',
|
||||
imgUrl:
|
||||
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||
}
|
||||
],
|
||||
k_s: 's1',
|
||||
count: 2
|
||||
},
|
||||
{
|
||||
k: 'Size',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1193',
|
||||
name: '1'
|
||||
},
|
||||
{
|
||||
id: '1194',
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
k_s: 's2',
|
||||
count: 2
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 110,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2260,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 0,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 111,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
extend: null,
|
||||
kdt_id: 55,
|
||||
discount_price: 0,
|
||||
stock_num: 4,
|
||||
stock_mode: 0,
|
||||
is_sell: null,
|
||||
combin_sku: false,
|
||||
goods_id: 946755
|
||||
}
|
||||
],
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
collection_id: 2261,
|
||||
collection_price: 0,
|
||||
none_sku: false,
|
||||
sold_num: 0,
|
||||
min_price: '1.00',
|
||||
max_price: '1.00',
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: 'Messsage 1',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: '1'
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: 'Messsage 2',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'id_no',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: 'Messsage 3',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'image',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: 'Messsage 4',
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'text',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Number',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'tel',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Email',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'email',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Date',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'date',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Datetime',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable_multiple: false,
|
||||
disable: false,
|
||||
name: 'Time',
|
||||
multiple: 0,
|
||||
disable_required: false,
|
||||
disable_edit_name: false,
|
||||
type: 'time',
|
||||
disable_delete: false,
|
||||
disable_type: false,
|
||||
required: 0
|
||||
}
|
||||
],
|
||||
hide_stock: false
|
||||
},
|
||||
goods_id: '946755',
|
||||
alias: '2oml0r0n5vytj',
|
||||
quota: 15,
|
||||
is_virtual: '0',
|
||||
quota_used: 1,
|
||||
goods_info: {
|
||||
title: 'Goods Name',
|
||||
picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||
price: 1,
|
||||
origin: ''
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="show2 = true">{{ $t('button2') }}</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions" :cancel-text="$t('cancel')" @cancel="handleCancel" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button @click="show3 = true">{{ $t('button3') }}</van-button>
|
||||
<van-actionsheet v-model="show3" :title="$t('title')">
|
||||
<p>{{ $t('content') }}</p>
|
||||
</van-actionsheet>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '弹出 Actionsheet',
|
||||
button2: '弹出带取消按钮的 Actionsheet',
|
||||
button3: '弹出带标题的 Actionsheet',
|
||||
title2: '带取消按钮的 Actionsheet',
|
||||
title3: '带标题的 Actionsheet',
|
||||
description: '描述信息'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Actionsheet',
|
||||
button2: 'Show Actionsheet with cancel button',
|
||||
button3: 'Show Actionsheet with title',
|
||||
title2: 'Actionsheet with cancel button',
|
||||
title3: 'Actionsheet with title',
|
||||
description: 'Description'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{ name: this.$t('option'), callback: this.onClick },
|
||||
{ name: this.$t('option'), subname: this.$t('description') },
|
||||
{ name: this.$t('option'), loading: true }
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
Toast('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
show-postal
|
||||
show-delete
|
||||
show-set-default
|
||||
show-search-result
|
||||
:search-result="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
@change-detail="onChangeDetail"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import areaList from '../mock/area';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
searchResult: [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心G座'
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区'
|
||||
}]
|
||||
},
|
||||
'en-US': {
|
||||
searchResult: [{
|
||||
name: 'Name1',
|
||||
address: 'Address'
|
||||
}, {
|
||||
name: 'Name2'
|
||||
}, {
|
||||
name: 'Name3',
|
||||
address: 'Address'
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
Toast('save');
|
||||
},
|
||||
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
|
||||
onChangeDetail(val) {
|
||||
this.searchResult = val ? this.$t('searchResult') : [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="$t('list')"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
],
|
||||
add: '新增收货地址',
|
||||
edit: '编辑收货地址'
|
||||
},
|
||||
'en-US': {
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
address: 'Somewhere'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
address: 'Somewhere'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Tywin',
|
||||
tel: '1320000000',
|
||||
address: 'Somewhere'
|
||||
}
|
||||
],
|
||||
add: 'Add',
|
||||
edit: 'Edit'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast(this.$t('add'));
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast(this.$t('edit') + ':' + index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-area :area-list="$t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-area :area-list="$t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-area :area-list="$t('areaList')" :columns-num="2" :title="$t('title')" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../mock/area';
|
||||
import AreaListEn from '../mock/areaEn';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选中省市县',
|
||||
title3: '配置显示列',
|
||||
areaList: AreaList
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Initial Value',
|
||||
title3: 'Columns Number',
|
||||
areaList: AreaListEn
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '330302'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-badge-group :active-key="activeKey">
|
||||
<van-badge :title="$t('title')" @click="onClick" />
|
||||
<van-badge :title="$t('title')" @click="onClick" info="8" />
|
||||
<van-badge :title="$t('title')" @click="onClick" info="99" />
|
||||
<van-badge :title="$t('title')" @click="onClick" info="199" />
|
||||
</van-badge-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '标签名称'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-badge {
|
||||
.van-badge-group {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-badge {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('ellipsis')">
|
||||
<div class="van-ellipsis">{{ $t('text') }}</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('hairline')">
|
||||
<div class="van-hairline--top" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('animation')">
|
||||
<van-switch-cell v-model="show" :title="$t('toggle')" :border="false" />
|
||||
<van-row>
|
||||
<transition name="van-fade">
|
||||
<van-col span="8" v-show="show">Fade</van-col>
|
||||
</transition>
|
||||
|
||||
<transition name="van-slide-bottom">
|
||||
<van-col span="8" v-show="show">Slide Bottom</van-col>
|
||||
</transition>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
hairline: '1px 边框',
|
||||
ellipsis: '文字省略',
|
||||
animation: '动画',
|
||||
toggle: '切换动画',
|
||||
text: '这是一段宽度限制 250px 的文字，后面的内容会省略'
|
||||
},
|
||||
'en-US': {
|
||||
hairline: 'Hairline',
|
||||
ellipsis: 'Text Ellipsis',
|
||||
animation: 'Animation',
|
||||
toggle: 'Switch animation',
|
||||
text: 'This is a paragraph of 250px width limit, the back will be omitted.'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-built-in-style {
|
||||
.van-ellipsis {
|
||||
font-size: 13px;
|
||||
margin-left: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.van-hairline--top {
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-col {
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
margin-left: 15px;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
.van-switch-cell {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button type="default">{{ $t('default') }}</van-button>
|
||||
<van-button type="primary">{{ $t('primary') }}</van-button>
|
||||
<van-button type="danger">{{ $t('danger') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button size="large">{{ $t('large') }}</van-button>
|
||||
<van-button size="normal">{{ $t('normal') }}</van-button>
|
||||
<van-button size="small">{{ $t('small') }}</van-button>
|
||||
<van-button size="mini">{{ $t('mini') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-button disabled>{{ $t('disabled') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button loading />
|
||||
<van-button loading type="primary" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-button type="primary" bottom-action>{{ $t('button') }}</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '按钮类型',
|
||||
title2: '按钮尺寸',
|
||||
title3: '加载状态',
|
||||
title4: '自定义按钮标签',
|
||||
title5: '页面底部操作按钮',
|
||||
default: '默认按钮',
|
||||
primary: '主要按钮',
|
||||
danger: '危险按钮',
|
||||
large: '大号按钮',
|
||||
normal: '普通按钮',
|
||||
small: '小型按钮',
|
||||
mini: '迷你按钮'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Type',
|
||||
title2: 'Size',
|
||||
title3: 'Loading',
|
||||
title4: 'Custom Tag',
|
||||
title5: 'Action Button',
|
||||
default: 'Default',
|
||||
primary: 'Primary',
|
||||
danger: 'Danger',
|
||||
large: 'Large',
|
||||
normal: 'Normal',
|
||||
small: 'Small',
|
||||
mini: 'Mini'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-button {
|
||||
.van-button {
|
||||
user-select: none;
|
||||
|
||||
&--large,
|
||||
&--bottom-action {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&--small,
|
||||
&--normal {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.van-loading {
|
||||
margin: 0 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<demo-section background="#fff">
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-card
|
||||
:title="$t('title')"
|
||||
:desc="$t('desc')"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-card
|
||||
:title="$t('title')"
|
||||
:desc="$t('desc')"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">{{ $t('button') }}</van-button>
|
||||
<van-button size="mini">{{ $t('button') }}</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<demo-section>
|
||||
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">{{ $t('button1') }}</span>
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('title')" :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
<span slot="right">{{ $t('button2') }}</span>
|
||||
</van-cell-swipe>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
|
||||
<span slot="left">{{ $t('button1') }}</span>
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('title')" :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
<span slot="right">{{ $t('button2') }}</span>
|
||||
</van-cell-swipe>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '选择',
|
||||
button2: '删除',
|
||||
title: '单元格',
|
||||
title2: '异步关闭',
|
||||
confirm: '确定删除吗？',
|
||||
tips: '建议在手机模式下浏览本示例'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Select',
|
||||
button2: 'Delete',
|
||||
title: 'Cell',
|
||||
title2: 'Async close',
|
||||
confirm: 'Are you sure to delete?',
|
||||
tips: 'Please try this demo in mobile mode'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClose(clickPosition, instance) {
|
||||
switch (clickPosition) {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
case 'right':
|
||||
Dialog.confirm({
|
||||
message: this.$t('confirm')
|
||||
}).then(() => {
|
||||
instance.close();
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-cell-swipe {
|
||||
user-select: none;
|
||||
|
||||
.van-cell-swipe {
|
||||
&__left,
|
||||
&__right {
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
background-color: #F44;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" />
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-cell-group>
|
||||
<van-cell :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('cell')" icon="location" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('cell')" is-link />
|
||||
<van-cell :title="$t('cell')" is-link :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-cell-group>
|
||||
<van-cell :value="$t('content')" icon="shop" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">{{ $t('cell') }}</span>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell :title="$t('cell')" icon="location" is-link />
|
||||
<van-cell :title="$t('cell')">
|
||||
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
cell: '单元格',
|
||||
title2: '只设置 value',
|
||||
title3: '展示图标',
|
||||
title4: '展示箭头'
|
||||
},
|
||||
'en-US': {
|
||||
cell: 'Cell title',
|
||||
title2: 'Value only',
|
||||
title3: 'Left Icon',
|
||||
title4: 'Link'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-cell {
|
||||
.van-cell-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.van-cell-text,
|
||||
.van-tag--danger {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('labelDisabled')">
|
||||
<van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-checkbox-group v-model="result2" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-checkbox-group v-model="result3">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
labelDisabled: '禁用内容部分点击事件',
|
||||
title3: 'Checkbox 组',
|
||||
title4: '设置最大可选数',
|
||||
title5: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
labelDisabled: 'Disable Label click event',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Maximum amount of checked options',
|
||||
title5: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
result3: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-circle
|
||||
v-model="currentRate1"
|
||||
:rate="rate"
|
||||
:speed="100"
|
||||
size="120px"
|
||||
:text="currentRate1.toFixed(0) + '%'"
|
||||
/>
|
||||
<van-circle
|
||||
v-model="currentRate2"
|
||||
color="#13ce66"
|
||||
fill="#fff"
|
||||
:rate="rate"
|
||||
size="120px"
|
||||
layer-color="#eee"
|
||||
:speed="100"
|
||||
:stroke-width="60"
|
||||
:clockwise="false"
|
||||
:text="currentRate2.toFixed(0) + '%'"
|
||||
/>
|
||||
<div>
|
||||
<van-button :text="$t('add')" type="primary" size="small" @click="add" />
|
||||
<van-button :text="$t('decrease')" type="danger" size="small" @click="reduce" />
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const format = rate => Math.min(Math.max(rate, 0), 100);
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '样式定制'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom Style'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rate: 30,
|
||||
currentRate1: 0,
|
||||
currentRate2: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
add() {
|
||||
this.rate = format(this.rate + 20);
|
||||
},
|
||||
|
||||
reduce() {
|
||||
this.rate = format(this.rate - 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-circle {
|
||||
.van-circle {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 10px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title3')">{{ $t('content3') }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('accordion')">
|
||||
<van-collapse v-model="active2" accordion>
|
||||
<van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title3')">{{ $t('content3') }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('titleSlot')">
|
||||
<van-collapse v-model="active3">
|
||||
<van-collapse-item>
|
||||
<div slot="title">{{ $t('title1') }}<van-icon name="question" /></div>
|
||||
{{ $t('content1') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
accordion: '手风琴',
|
||||
titleSlot: '自定义标题内容',
|
||||
title1: '有赞微商城',
|
||||
title2: '有赞零售',
|
||||
title3: '有赞美业',
|
||||
content1: '提供多样店铺模板，快速搭建网上商城',
|
||||
content2: '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
|
||||
content3: '线上拓客，随时预约，贴心顺手的开单收银'
|
||||
},
|
||||
'en-US': {
|
||||
accordion: 'Accordion',
|
||||
titleSlot: 'Custom title',
|
||||
title1: 'Title1',
|
||||
title2: 'Title2',
|
||||
title3: 'Title3',
|
||||
content1: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
content2: 'When someone walk out your life, let them. They are just making more room for someone else better to walk in.',
|
||||
content3: 'The world is big and life is short. Live the life the way you want.'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active1: [0],
|
||||
active2: 0,
|
||||
active3: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
@import "../../../packages/vant-css/src/common/var.css";
|
||||
|
||||
.demo-collapse {
|
||||
.van-collapse-item__content {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
.van-icon-question {
|
||||
color: $blue;
|
||||
vertical-align: -3px;
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contact-info="editingContact"
|
||||
:is-edit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('uneditable')">
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
:name="mockContact.name"
|
||||
:tel="mockContact.tel"
|
||||
:editable="false"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
name: '张三'
|
||||
},
|
||||
'en-US': {
|
||||
name: 'John Snow'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: []
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.list.push(this.mockContact);
|
||||
},
|
||||
|
||||
computed: {
|
||||
mockContact() {
|
||||
return {
|
||||
name: this.$t('name'),
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
};
|
||||
},
|
||||
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
},
|
||||
|
||||
currentContact() {
|
||||
const id = this.chosenContactId;
|
||||
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
onSave(info) {
|
||||
this.showEdit = false;
|
||||
this.showList = false;
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map(item => (item.id === info.id ? info : item));
|
||||
} else {
|
||||
this.list.push(info);
|
||||
}
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-contact {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable camelcase */
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
coupon: {
|
||||
name: '优惠券名称',
|
||||
reason: '优惠券不可用原因'
|
||||
},
|
||||
exchange: '兑换成功'
|
||||
},
|
||||
'en-US': {
|
||||
coupon: {
|
||||
name: 'Coupon name',
|
||||
reason: 'Coupon unavailable reason'
|
||||
},
|
||||
exchange: 'Success'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
exchangedCoupons: []
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
coupons() {
|
||||
return [this.coupon, this.discountCoupon, ...this.exchangedCoupons];
|
||||
},
|
||||
|
||||
disabledCoupons() {
|
||||
return [this.disabledCoupon, this.disabledDiscountCoupon];
|
||||
},
|
||||
|
||||
coupon() {
|
||||
return {
|
||||
id: 1,
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: this.$t('coupon.name'),
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
},
|
||||
|
||||
discountCoupon() {
|
||||
return {
|
||||
...this.coupon,
|
||||
id: 2,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12
|
||||
};
|
||||
},
|
||||
|
||||
disabledCoupon() {
|
||||
return {
|
||||
...this.coupon,
|
||||
id: 3,
|
||||
available: 0,
|
||||
reason: this.$t('coupon.reason')
|
||||
};
|
||||
},
|
||||
|
||||
disabledDiscountCoupon() {
|
||||
return {
|
||||
...this.discountCoupon,
|
||||
discount: 10,
|
||||
id: 4,
|
||||
available: 0,
|
||||
reason: this.$t('coupon.reason')
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
Toast(this.$t('exchange'));
|
||||
this.exchangedCoupons.push({
|
||||
...this.coupon,
|
||||
id: this.randomId()
|
||||
});
|
||||
},
|
||||
randomId(max = 999999) {
|
||||
return Math.floor(Math.random() * max) + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-coupon {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate4"
|
||||
type="time"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '选择完整时间',
|
||||
title2: '选择日期（年月日）',
|
||||
title3: '选择日期（年月）',
|
||||
title4: '选择时间'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Choose DateTime',
|
||||
title2: 'Choose Date',
|
||||
title3: 'Choose Year-Month',
|
||||
title4: 'Choose Time'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate1: new Date(2018, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: new Date(2018, 0, 1),
|
||||
currentDate4: '12:00'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button @click="onClickAlert">Alert</van-button>
|
||||
<van-button @click="onClickAlert2">{{ $t('alert2') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="onClickConfirm">Confirm</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-button @click="show = true">{{ $t('advancedUsage') }}</van-button>
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
show-cancel-button
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<van-field
|
||||
v-model="username"
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
:label="$t('password')"
|
||||
:placeholder="$t('passwordPlaceholder')"
|
||||
/>
|
||||
</van-dialog>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '消息提示',
|
||||
title2: '消息确认',
|
||||
alert2: '无标题 Alert'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Alert dialog',
|
||||
title2: 'Confirm dialog',
|
||||
alert2: 'Alert without title'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
username: '',
|
||||
password: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('content')
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message: this.$t('content')
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('content')
|
||||
});
|
||||
},
|
||||
|
||||
beforeClose(action, done) {
|
||||
if (action === 'confirm') {
|
||||
setTimeout(done, 1000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-dialog {
|
||||
.van-doc-demo-block > .van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" :placeholder="$t('usernamePlaceholder')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
:label="$t('username')"
|
||||
icon="clear"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
:label="$t('password')"
|
||||
:placeholder="$t('passwordPlaceholder')"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-cell-group>
|
||||
<van-field :value="$t('inputDisabled')" :label="$t('username')" disabled />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username2"
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
:label="$t('phone')"
|
||||
:placeholder="$t('phonePlaceholder')"
|
||||
:error-message="$t('phoneError')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
:label="$t('message')"
|
||||
type="textarea"
|
||||
:placeholder="$t('messagePlaceholder')"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title6')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
center
|
||||
v-model="sms"
|
||||
:label="$t('sms')"
|
||||
:placeholder="$t('smsPlaceholder')"
|
||||
icon="clear"
|
||||
@click-icon="sms = ''"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">{{ $t('sendSMS') }}</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义类型',
|
||||
title3: '禁用输入框',
|
||||
title4: '错误提示',
|
||||
title5: '高度自适应',
|
||||
title6: '插入按钮',
|
||||
message: '留言',
|
||||
phone: '手机号',
|
||||
sms: '短信验证码',
|
||||
sendSMS: '发送验证码',
|
||||
smsPlaceholder: '请输入短信验证码',
|
||||
phonePlaceholder: '请输入手机号',
|
||||
messagePlaceholder: '请输入留言',
|
||||
inputDisabled: '输入框已禁用',
|
||||
phoneError: '手机号格式错误'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom type',
|
||||
title3: 'Disabled',
|
||||
title4: 'Error info',
|
||||
title5: 'Auto resize',
|
||||
title6: 'Insert button',
|
||||
message: 'Message',
|
||||
phone: 'Phone',
|
||||
sms: 'SMS',
|
||||
sendSMS: 'Send SMS',
|
||||
smsPlaceholder: 'SMS',
|
||||
phonePlaceholder: 'Phone',
|
||||
messagePlaceholder: 'Message',
|
||||
inputDisabled: 'Disabled',
|
||||
phoneError: 'Invalid phone'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
sms: '',
|
||||
value: '',
|
||||
password: '',
|
||||
username: '',
|
||||
username2: '',
|
||||
message: '',
|
||||
phone: '1365577'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-field {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="cart" :text="$t('icon2')" @click="onClickMiniBtn" />
|
||||
<van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
|
||||
<van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="cart" info="5" :text="$t('icon2')" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="shop" :text="$t('icon3')" @click="onClickMiniBtn" />
|
||||
<van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
|
||||
<van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
clickIcon: '点击图标',
|
||||
clickButton: '点击按钮',
|
||||
icon1: '客服',
|
||||
icon2: '购物车',
|
||||
icon3: '店铺',
|
||||
button1: '加入购物车',
|
||||
button2: '立即购买',
|
||||
title2: '图标提示'
|
||||
},
|
||||
'en-US': {
|
||||
clickIcon: 'Click Icon',
|
||||
clickButton: 'Click Button',
|
||||
icon1: 'Icon1',
|
||||
icon2: 'Icon2',
|
||||
icon3: 'Icon3',
|
||||
button1: 'Button1',
|
||||
button2: 'Button2',
|
||||
title2: 'Icon info'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast(this.$t('clickIcon'));
|
||||
},
|
||||
|
||||
onClickBigBtn() {
|
||||
Toast(this.$t('clickButton'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-goods-action {
|
||||
.van-goods-action {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title')">
|
||||
<van-col span="8" v-for="icon in icons" :key="icon">
|
||||
<van-icon :name="icon" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const icons = require('../../../packages/vant-css/scripts/icon-config');
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '图标列表'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Icon List'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
this.icons = icons.glyphs.map(icon => icon.css);
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-icon {
|
||||
font-size: 0;
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="showImagePreview">{{ $t('button1') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('button2')">
|
||||
<van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('button3')">
|
||||
<van-button @click="showImagePreview(0, 1000)">{{ $t('button3') }}</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from '../../../packages';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '预览图片',
|
||||
button2: '指定初始位置',
|
||||
button3: '手动关闭'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Images',
|
||||
button2: 'Custom Start Position',
|
||||
button3: 'Close Manually'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showImagePreview(position, timer) {
|
||||
const instance = ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
], typeof position === 'number' ? position : 0);
|
||||
|
||||
if (timer) {
|
||||
setTimeout(() => {
|
||||
instance.close();
|
||||
}, timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.van-image-preview {
|
||||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-row>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col span="4">span: 4</van-col>
|
||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '在列元素之间增加间距'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Column Spacing'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-layout {
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
background-clip: content-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<img v-for="img in imageList" v-lazy="img" >
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img" >
|
||||
</lazy-component>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '背景图懒加载',
|
||||
title3: '懒加载模块'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Lazyload Background Image',
|
||||
title3: 'Lazyload Component'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-lazyload {
|
||||
padding: 0 15px;
|
||||
|
||||
img,
|
||||
div[lazy] {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin: 10px 0 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
background-size: 315px 250px;
|
||||
background-position: 15px;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title,
|
||||
.van-doc-demo-section__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p class="page-desc">{{ $t('text') }}</p>
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell v-for="item in list" :key="item" :title="item + ''" />
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '当即将滚动到元素底部时，会自动加载更多'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'This list will load items will scroll to bottom.'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const text = this.list.length + 1;
|
||||
this.list.push(text < 10 ? '0' + text : text);
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
if (this.list.length >= 40) {
|
||||
this.finished = true;
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
this.list = [];
|
||||
this.finished = false;
|
||||
this.refreshing = false;
|
||||
window.scrollTo(0, 10);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-list {
|
||||
.van-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-loading color="black" />
|
||||
<van-loading color="white" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: 'Circular',
|
||||
title2: 'Spinner'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Circular',
|
||||
title2: 'Spinner'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 5px 0 5px 20px;
|
||||
}
|
||||
|
||||
.van-loading--white {
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-nav-bar
|
||||
:title="$t('title')"
|
||||
:left-text="$t('back')"
|
||||
:right-text="$t('button')"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-nav-bar :title="$t('title')" :left-text="$t('back')" left-arrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
Toast(this.$t('back'));
|
||||
},
|
||||
onClickRight() {
|
||||
Toast(this.$t('button'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-notice-bar
|
||||
:text="$t('text')"
|
||||
left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-notice-bar :scrollable="false" :text="$t('text')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-notice-bar mode="closeable" :text="$t('text')" />
|
||||
<van-notice-bar mode="link" :text="$t('text')" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '禁用滚动',
|
||||
title3: '通告栏模式',
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Disable scroll',
|
||||
title3: 'Mode',
|
||||
text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-notice-bar {
|
||||
.van-notice-bar:not(:first-of-type) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('default')">
|
||||
<van-button @touchstart.native.stop="keyboard = 'default'">
|
||||
{{ $t('button1') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'default'"
|
||||
:close-button-text="$t('close')"
|
||||
extra-key="."
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('custom')">
|
||||
<van-button @touchstart.native.stop="keyboard = 'custom'">
|
||||
{{ $t('button2') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'custom'"
|
||||
:close-button-text="$t('close')"
|
||||
theme="custom"
|
||||
extra-key="."
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
default: '默认样式',
|
||||
custom: '自定义样式',
|
||||
button1: '弹出默认键盘',
|
||||
button2: '弹出自定义键盘',
|
||||
close: '完成'
|
||||
},
|
||||
'en-US': {
|
||||
default: 'Default style',
|
||||
custom: 'Custom style',
|
||||
button1: 'Show Default Keyboard',
|
||||
button2: 'Show Custom Keyboard',
|
||||
close: 'Close'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
keyboard: 'default'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast('Input: ' + value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('Delete');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-number-keyboard {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-pagination
|
||||
v-model="currentPage1"
|
||||
:total-items="24"
|
||||
:items-per-page="5"
|
||||
:previous-text= "$t('prevText')"
|
||||
:next-text= "$t('nextText')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-pagination
|
||||
v-model="currentPage2"
|
||||
:page-count="12"
|
||||
:previous-text= "$t('prevText')"
|
||||
:next-text= "$t('nextText')"
|
||||
mode="simple"
|
||||
size="small"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-pagination
|
||||
force-ellipses
|
||||
v-model="currentPage3"
|
||||
:total-items="125"
|
||||
:show-page-size="3"
|
||||
:previous-text= "$t('prevText')"
|
||||
:next-text= "$t('nextText')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '简单模式',
|
||||
title3: '',
|
||||
prevText: '上一页',
|
||||
nextText: '下一页'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Simple Mode',
|
||||
title3: 'Show ellipses',
|
||||
prevText: 'Prev',
|
||||
nextText: 'Next'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 1,
|
||||
currentPage2: 1,
|
||||
currentPage3: 1
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-pagination {
|
||||
.van-pagination {
|
||||
margin: 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
|
||||
<div>{{ $t('content') }}</div>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
|
||||
<div>{{ $t('content') }}</div>
|
||||
<div slot="footer">
|
||||
<van-button size="small">{{ $t('button') }}</van-button>
|
||||
<van-button size="small" type="danger">{{ $t('button') }}</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-panel {
|
||||
.van-panel__footer {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel__content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:info="$t('info')"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
info: '密码为 6 位数字'
|
||||
},
|
||||
'en-US': {
|
||||
info: 'Some tips'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-picker :columns="$t('column1')" @change="onChange1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-picker :columns="$t('column2')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="$t('area')"
|
||||
:columns="$t('column1')"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-picker :columns="columns" @change="onChange2" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-picker :columns="columns" loading />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
area: '标题',
|
||||
title2: '禁用选项',
|
||||
title3: '展示顶部栏',
|
||||
title4: '多列联动',
|
||||
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
column2: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' }
|
||||
],
|
||||
column3: {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州']
|
||||
},
|
||||
toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`
|
||||
},
|
||||
'en-US': {
|
||||
area: 'Title',
|
||||
title2: 'Disable Option',
|
||||
title3: 'Show Toolbar',
|
||||
title4: 'Multi Columns',
|
||||
column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
column2: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' }
|
||||
],
|
||||
column3: {
|
||||
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
||||
},
|
||||
toastContent: (value, index) => `Value: ${value}, Index：${index}`
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
columns() {
|
||||
const column = this.$t('column3');
|
||||
return [
|
||||
{
|
||||
values: Object.keys(column),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: column[Object.keys(column)[0]],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange1(picker, value, index) {
|
||||
Toast(this.$t('toastContent', value, index));
|
||||
},
|
||||
onChange2(picker, values) {
|
||||
picker.setColumnValues(1, this.$t('column3')[values[0]]);
|
||||
},
|
||||
onConfirm(value, index) {
|
||||
Toast(this.$t('toastContent', value, index));
|
||||
},
|
||||
onCancel() {
|
||||
Toast(this.$t('cancel'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
|
||||
<van-popup v-model="show1">{{ $t('content') }}</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('position')">
|
||||
<van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
|
||||
|
||||
<van-popup v-model="show2" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="$t('columns')"
|
||||
@confirm="show2 = false"
|
||||
@cancel="show2 = false"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show3 = true">{{ $t('button4') }}</van-button>
|
||||
<van-popup v-model="show3" position="top" :overlay="false">
|
||||
{{ $t('content') }}
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show4 = true">{{ $t('button5') }}</van-button>
|
||||
<van-popup v-model="show4" position="right">
|
||||
<van-button @click="show4 = false">{{ $t('button6') }}</van-button>
|
||||
<van-button @click="show5 = true">{{ $t('button5') }}</van-button>
|
||||
<van-popup v-model="show5" position="right">
|
||||
<van-button @click="show5 = false">{{ $t('button6') }}</van-button>
|
||||
</van-popup>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
position: '弹出位置',
|
||||
button1: '弹出 Popup',
|
||||
button2: '底部弹出',
|
||||
button3: '弹出 Dialog',
|
||||
button4: '顶部弹出',
|
||||
button5: '右侧弹出',
|
||||
button6: '关闭弹层',
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
},
|
||||
'en-US': {
|
||||
position: 'Position',
|
||||
button1: 'Show Popup',
|
||||
button2: 'From Bottom',
|
||||
button3: 'Show Dialog',
|
||||
button4: 'From Top',
|
||||
button5: 'From Right',
|
||||
button6: 'Close Popup',
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
show3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.show3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDialog() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-popup {
|
||||
.van-button {
|
||||
margin: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup {
|
||||
width: 60%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.van-tabs__content {
|
||||
height: 156px;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.van-tab__pane:not(:first-child) {
|
||||
padding: 10px;
|
||||
line-height: 1.4;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&--top {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&--left,
|
||||
&--right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-progress :percentage="0" />
|
||||
<van-progress :percentage="46" />
|
||||
<van-progress :percentage="100" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-progress inactive :percentage="0" />
|
||||
<van-progress inactive :percentage="46" />
|
||||
<van-progress inactive :percentage="100" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-progress :pivot-text="$t('red')" color="#ed5050" :percentage="26" />
|
||||
<van-progress :pivot-text="$t('orange')" color="#f60" :percentage="46" />
|
||||
<van-progress :pivot-text="$t('yellow')" color="#f09000" :percentage="66" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '进度条置灰',
|
||||
title3: '样式定制'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Inactive',
|
||||
title3: 'Custom Style'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-progress {
|
||||
.van-progress {
|
||||
margin: 20px 10px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<demo-section name="pull-refresh">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p>{{ $t('text') }}: {{ count }}</p>
|
||||
</demo-block>
|
||||
</van-pull-refresh>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '刷新次数',
|
||||
success: '刷新成功'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Refresh Count',
|
||||
success: 'Refresh success'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
Toast(this.$t('success'));
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-pull-refresh {
|
||||
.van-pull-refresh {
|
||||
&,
|
||||
&__track {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-radio-group v-model="radio1" class="demo-radio-group">
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-radio-group v-model="radio2" class="demo-radio-group" disabled>
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
radio: '单选框',
|
||||
text1: '未选中禁用',
|
||||
text2: '选中且禁用',
|
||||
title3: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
radio: 'Radio',
|
||||
text1: 'Disabled',
|
||||
text2: 'Disabled and checked',
|
||||
title: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-radio {
|
||||
&-group {
|
||||
padding: 0 17px;
|
||||
|
||||
.van-radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-rate v-model="value1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-rate
|
||||
v-model="value2"
|
||||
:size="25"
|
||||
:count="6"
|
||||
color="#2ba"
|
||||
void-color="#ceefe8"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate disabled v-model="value3" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
disabled: '禁用状态',
|
||||
customColor: '自定义颜色'
|
||||
},
|
||||
'en-US': {
|
||||
disabled: 'Disabled',
|
||||
customColor: 'Custom Color'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: 3,
|
||||
value2: 4,
|
||||
value3: 2
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-rate {
|
||||
.van-rate {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-search :placeholder="$t('placeholder')" v-model="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<form action="/">
|
||||
<van-search
|
||||
v-model="value"
|
||||
:placeholder="$t('placeholder')"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</form>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-search
|
||||
v-model="value"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
>
|
||||
<div slot="action" @click="onSearch">{{ $t('search') }}</div>
|
||||
</van-search>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '监听对应事件',
|
||||
title3: '自定义行动按钮',
|
||||
placeholder: '请输入商品名称'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Listen to Events',
|
||||
title3: 'Custom Button',
|
||||
placeholder: 'Placeholder'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSearch() {
|
||||
Toast(this.value);
|
||||
},
|
||||
onCancel() {
|
||||
Toast(this.$t('cancel'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-search {
|
||||
.van-search__action div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="$t('sku').sku"
|
||||
:goods="$t('sku').goods_info"
|
||||
:goods-id="$t('sku').goods_id"
|
||||
:hide-stock="$t('sku').sku.hide_stock"
|
||||
:quota="$t('sku').quota"
|
||||
:quota-used="$t('sku').quota_used"
|
||||
reset-stepper-on-hide
|
||||
reset-selected-sku-on-hide
|
||||
disable-stepper-input
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button type="primary" @click="showBase = true" block>{{ $t('basicUsage') }}</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showStepper"
|
||||
:sku="$t('sku').sku"
|
||||
:goods="$t('sku').goods_info"
|
||||
:goods-id="$t('sku').goods_id"
|
||||
:hide-stock="$t('sku').sku.hide_stock"
|
||||
:quota="$t('sku').quota"
|
||||
:quota-used="$t('sku').quota_used"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button type="primary" @click="showStepper = true" block>{{ $t('title2') }}</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustom"
|
||||
:stepper-title="$t('stepperTitle')"
|
||||
:sku="$t('sku').sku"
|
||||
:goods="$t('sku').goods_info"
|
||||
:goods-id="$t('sku').goods_id"
|
||||
:hide-stock="$t('sku').sku.hide_stock"
|
||||
:quota="$t('sku').quota"
|
||||
:quota-used="$t('sku').quota_used"
|
||||
show-add-cart-btn
|
||||
reset-stepper-on-hide
|
||||
:initial-sku="initialSku"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
>
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button bottom-action @click="onPointClicked">{{ $t('button1') }}</van-button>
|
||||
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">{{ $t('button2') }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showCustom = true" block>{{ $t('advancedUsage') }}</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from '../mock/sku';
|
||||
import { LIMIT_TYPE } from '../../../packages/sku/constants';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
sku: data['zh-CN'],
|
||||
title2: '自定义步进器相关配置',
|
||||
stepperTitle: '我要买',
|
||||
button1: '积分兑换',
|
||||
button2: '买买买'
|
||||
},
|
||||
'en-US': {
|
||||
sku: data['en-US'],
|
||||
title2: 'Custom Stepper Related Config',
|
||||
stepperTitle: 'Stepper title',
|
||||
button1: 'Button',
|
||||
button2: 'Button'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showBase: false,
|
||||
showCustom: false,
|
||||
showStepper: false,
|
||||
closeOnClickOverlay: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
},
|
||||
customStepperConfig: {
|
||||
quotaText: '单次限购100件',
|
||||
handleOverLimit: (data) => {
|
||||
const { action, limitType, quota } = data;
|
||||
|
||||
if (action === 'minus') {
|
||||
Toast('至少选择一件商品');
|
||||
} else if (action === 'plus') {
|
||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
||||
Toast(`限购${quota}件`);
|
||||
} else {
|
||||
Toast('库存不够了~~');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
messageConfig: {
|
||||
uploadImg: (file, img) => {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => resolve(img), 1000);
|
||||
});
|
||||
},
|
||||
uploadMaxSize: 3
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBuyClicked(data) {
|
||||
Toast(JSON.stringify(data));
|
||||
},
|
||||
|
||||
onAddCartClicked(data) {
|
||||
Toast(JSON.stringify(data));
|
||||
},
|
||||
|
||||
onPointClicked() {
|
||||
Toast('积分兑换');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-sku {
|
||||
.sku-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-slider v-model="value1" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-slider
|
||||
v-model="value2"
|
||||
:min="10"
|
||||
:max="90"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-slider v-model="value3" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-slider
|
||||
v-model="value4"
|
||||
:step="10"
|
||||
bar-height="4px"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '基本用法',
|
||||
title2: '指定选择范围',
|
||||
title3: '禁用',
|
||||
title4: '指定步长',
|
||||
text: '当前值：'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Basic Usage',
|
||||
title2: 'Range',
|
||||
title3: 'Disabled',
|
||||
title4: 'Step size',
|
||||
text: 'Current value: '
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: 50,
|
||||
value2: 50,
|
||||
value3: 50,
|
||||
value4: 50
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.$toast(this.$t('text') + value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-slider {
|
||||
user-select: none;
|
||||
|
||||
.van-slider {
|
||||
margin: 0 15px 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-stepper v-model="stepper1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-stepper v-model="stepper1" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-stepper
|
||||
v-model="stepper2"
|
||||
integer
|
||||
:min="5"
|
||||
:max="40"
|
||||
:step="2"
|
||||
:default-value="9"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper1: 1,
|
||||
stepper2: null
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-stepper {
|
||||
.van-stepper {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-steps :active="active">
|
||||
<van-step>{{ $t('step1') }}</van-step>
|
||||
<van-step>{{ $t('step2') }}</van-step>
|
||||
<van-step>{{ $t('step3') }}</van-step>
|
||||
<van-step>{{ $t('step4') }}</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-steps
|
||||
:active="active"
|
||||
icon="logistics"
|
||||
icon-class="steps-success"
|
||||
:title="$t('title')"
|
||||
:description="$t('desc')"
|
||||
>
|
||||
<van-step>{{ $t('step1') }}</van-step>
|
||||
<van-step>{{ $t('step2') }}</van-step>
|
||||
<van-step>{{ $t('step3') }}</van-step>
|
||||
<van-step>{{ $t('step4') }}</van-step>
|
||||
</van-steps>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>{{ $t('status1') }}</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>{{ $t('status2') }}</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>{{ $t('status3') }}</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
nextStep: '下一步',
|
||||
step1: '买家下单',
|
||||
step2: '商家接单',
|
||||
step3: '买家提货',
|
||||
step4: '交易完成',
|
||||
title2: '描述信息',
|
||||
title3: '竖向步骤条',
|
||||
status1: '【城市】物流状态1',
|
||||
status2: '【城市】物流状态',
|
||||
status3: '快件已发货'
|
||||
},
|
||||
'en-US': {
|
||||
nextStep: 'Next Step',
|
||||
step1: 'Step1',
|
||||
step2: 'Step2',
|
||||
step3: 'Step3',
|
||||
step4: 'Step4',
|
||||
title2: 'Description',
|
||||
title3: 'Vertical Steps',
|
||||
status1: '【City】Status1',
|
||||
status2: '【City】Status2',
|
||||
status3: '【City】Status3'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 1
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
this.active = ++this.active % 4;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-steps {
|
||||
.steps-success,
|
||||
.van-icon-location {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
.van-steps__message + p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
:button-text="$t('submit')"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-submit-bar
|
||||
disabled
|
||||
:price="3050"
|
||||
:button-text="$t('submit')"
|
||||
:tip="$t('tip1')"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-submit-bar
|
||||
loading
|
||||
:price="3050"
|
||||
:button-text="$t('submit')"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
:button-text="$t('submit')"
|
||||
@submit="onClickButton"
|
||||
>
|
||||
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
|
||||
<span slot="tip">
|
||||
{{ $t('tip2') }}<span class="van-edit-address" @click="onClickLink">{{ $t('tip3') }}</span>
|
||||
</span>
|
||||
</van-submit-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
submit: '提交订单',
|
||||
tip1: '您的收货地址不支持同城送, 我们已为您推荐快递',
|
||||
tip2: '您的收货地址不支持同城送, ',
|
||||
tip3: '修改地址',
|
||||
check: '全选',
|
||||
clickButton: '点击按钮',
|
||||
clickLink: '修改地址'
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
tip1: 'Some tips',
|
||||
tip2: 'Some tips, ',
|
||||
tip3: 'Link',
|
||||
check: 'Label',
|
||||
clickButton: 'Click button',
|
||||
clickLink: 'Click Link'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickButton() {
|
||||
Toast(this.$t('clickButton'));
|
||||
},
|
||||
onClickLink() {
|
||||
Toast(this.$t('clickLink'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-submit-bar {
|
||||
.van-submit-bar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.van-edit-address {
|
||||
color: #38F;
|
||||
}
|
||||
|
||||
.van-checkbox {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-swipe :autoplay="3000">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-swipe :autoplay="3000">
|
||||
<van-swipe-item v-for="(image, index) in images" :key="index">
|
||||
<img v-lazy="image" >
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-swipe @change="onChange">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-swipe :autoplay="3000" vertical class="demo-swipe--vertical">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '图片懒加载',
|
||||
title3: '监听 change 事件',
|
||||
title4: '纵向滚动',
|
||||
message: '当前 Swipe 索引：'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Image Lazyload',
|
||||
title3: 'Change Event',
|
||||
title4: 'Vertical Scrolling',
|
||||
message: 'Current Swipe index:'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.$toast(this.$t('message') + index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-swipe {
|
||||
padding-bottom: 30px;
|
||||
|
||||
.van-swipe {
|
||||
cursor: pointer;
|
||||
|
||||
&-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 150px;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: block;
|
||||
padding: 30px 60px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
height: 200px;
|
||||
|
||||
.van-swipe-item {
|
||||
line-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" disabled :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" loading :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-switch v-model="checked" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-switch v-model="checked" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-switch v-model="checked" loading />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-switch :value="checked2" size="36px" @input="onInput" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '提醒',
|
||||
message: '是否切换开关？'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
checked2: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('message')
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tabs v-model="active">
|
||||
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-tabs>
|
||||
<van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :disabled="index === 2" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-tabs type="card">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-tabs @click="onClick">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title6')">
|
||||
<van-tabs :active="active" sticky>
|
||||
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title7')">
|
||||
<van-tabs :active="active">
|
||||
<van-tab v-for="index in 2" :key="index">
|
||||
<div slot="title">
|
||||
<van-icon name="more-o" />{{ $t('tab') }}
|
||||
</div>
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title8')">
|
||||
<van-tabs :active="active" swipeable>
|
||||
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
tab: '选项 ',
|
||||
title2: '横向滚动',
|
||||
title3: '禁用标签',
|
||||
title4: '样式风格',
|
||||
title5: '点击事件',
|
||||
title6: '粘性布局',
|
||||
title7: '自定义标签',
|
||||
title8: '滑动切换',
|
||||
disabled: ' 已被禁用'
|
||||
},
|
||||
'en-US': {
|
||||
tab: 'Tab ',
|
||||
content: 'content of tab',
|
||||
title2: 'Swipe Tabs',
|
||||
title3: 'Disabled Tab',
|
||||
title4: 'Card Style',
|
||||
title5: 'Click Event',
|
||||
title6: 'Sticky',
|
||||
title7: 'Custom Tab',
|
||||
title8: 'Swipeable',
|
||||
disabled: ' is disabled'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 2,
|
||||
tabs: [1, 2, 3, 4]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickDisabled(index, title) {
|
||||
this.$toast(title + this.$t('disabled'));
|
||||
},
|
||||
|
||||
onClick(index, title) {
|
||||
this.$toast(title);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tab {
|
||||
margin-bottom: 300px;
|
||||
|
||||
.van-tab .van-icon {
|
||||
margin-right: 5px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block:last-child {
|
||||
.van-tab__pane {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="records" info="5">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin" info="20">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-tabbar v-model="active2">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>{{ $t('custom') }}</span>
|
||||
<template slot="icon" slot-scope="props">
|
||||
<img :src="props.active ? icon.active : icon.normal" >
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义图标'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom icon'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
active2: 0,
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tabbar {
|
||||
.van-tabbar {
|
||||
position: relative;
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tag>{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="primary">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-tag plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="success">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-tag mark>{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="success">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '空心样式',
|
||||
title3: '圆角样式'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Plain style',
|
||||
title3: 'Mark style'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button @click="showToast">{{ $t('title1') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="showLoadingToast">{{ $t('title2') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
|
||||
<van-button @click="showFailToast">{{ $t('fail') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
loading: '加载中',
|
||||
title1: '文字提示',
|
||||
title2: '加载提示',
|
||||
title3: '成功/失败提示',
|
||||
success: '成功提示',
|
||||
fail: '失败提示',
|
||||
text1: '我是提示文案，建议不超过十五字~',
|
||||
text2: '成功文案',
|
||||
text3: '失败文案',
|
||||
text4: second => `倒计时 ${second} 秒`
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Text',
|
||||
title2: 'Loading',
|
||||
title3: 'Success/Fail',
|
||||
success: 'Success',
|
||||
fail: 'Fail',
|
||||
text1: 'Some messages',
|
||||
text2: 'Success',
|
||||
text3: 'Fail',
|
||||
text4: second => `${second} seconds`
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast(this.$t('text1'));
|
||||
},
|
||||
|
||||
showLoadingToast() {
|
||||
Toast.loading({ mask: true, message: this.$t('loading') + '...' });
|
||||
},
|
||||
|
||||
showSuccessToast() {
|
||||
Toast.success(this.$t('text2'));
|
||||
},
|
||||
|
||||
showFailToast() {
|
||||
Toast.fail(this.$t('text3'));
|
||||
},
|
||||
|
||||
showCustomizedToast(duration) {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner',
|
||||
message: this.$t('text4', 3)
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = this.$t('text4', second);
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-toast {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index="mainActiveIndex"
|
||||
:active-id="activeId"
|
||||
@navclick="onNavClick"
|
||||
@itemclick="onItemClick"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
group1: '所有城市',
|
||||
group2: '浙江',
|
||||
group3: '江苏',
|
||||
city1: [{
|
||||
text: '杭州',
|
||||
id: 1001
|
||||
}, {
|
||||
text: '温州',
|
||||
id: 1002
|
||||
}, {
|
||||
text: '宁波',
|
||||
id: 1003
|
||||
}, {
|
||||
text: '义乌',
|
||||
id: 1004
|
||||
}],
|
||||
city2: [{
|
||||
text: '无锡',
|
||||
id: 1011
|
||||
}, {
|
||||
text: '常州',
|
||||
id: 1012
|
||||
}, {
|
||||
text: '莆田',
|
||||
id: 1013
|
||||
}, {
|
||||
text: '三明',
|
||||
id: 1014
|
||||
}]
|
||||
},
|
||||
'en-US': {
|
||||
group1: 'All',
|
||||
group2: 'Group1',
|
||||
group3: 'Group2',
|
||||
city1: [{
|
||||
text: 'Delaware',
|
||||
id: 1001
|
||||
}, {
|
||||
text: 'Florida',
|
||||
id: 1002
|
||||
}, {
|
||||
text: 'Georqia',
|
||||
id: 1003
|
||||
}, {
|
||||
text: 'Indiana',
|
||||
id: 1004
|
||||
}],
|
||||
city2: [{
|
||||
text: 'Alabama',
|
||||
id: 1011
|
||||
}, {
|
||||
text: 'Kansas',
|
||||
id: 1012
|
||||
}, {
|
||||
text: 'Louisiana',
|
||||
id: 1013
|
||||
}, {
|
||||
text: 'Texas',
|
||||
id: 1014
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mainActiveIndex: 0,
|
||||
activeId: 1001
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
items() {
|
||||
return [{
|
||||
text: this.$t('group1'),
|
||||
children: [...this.$t('city1'), ...this.$t('city2')]
|
||||
}, {
|
||||
text: this.$t('group2'),
|
||||
children: this.$t('city1')
|
||||
}, {
|
||||
text: this.$t('group3'),
|
||||
children: this.$t('city2')
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onNavClick(index) {
|
||||
this.mainActiveIndex = index;
|
||||
},
|
||||
onItemClick(data) {
|
||||
console.log(data);
|
||||
this.activeId = data.id;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="demo-uploader-container">
|
||||
<van-uploader :max-size="102400" @oversize="logContent('oversize')">
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<div class="demo-uploader-container">
|
||||
<van-uploader accept="image/gif, image/jpeg" multiple :max-size="36000" @oversize="logContent">
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '设置 input 属性'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Set input attr'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-uploader {
|
||||
&-container {
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p class="page-desc">{{ $t('text') }}</p>
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400">
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Waterfall } from '../../../packages';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '当即将滚动到元素底部时，会自动加载更多',
|
||||
tips: '注意：Waterfall 已被废弃，请使用 List 组件代替'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'This list will load items will scroll to bottom.',
|
||||
tips: 'Waterfall is deprecated and no longer maintained, please use the List component instead.'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-waterfall {
|
||||
ul {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -88,7 +88,7 @@ Example of `AreaList`
|
||||
}
|
||||
```
|
||||
|
||||
All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.js)
|
||||
All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)
|
||||
|
||||
#### argument of callback function confirm
|
||||
An array contains selected area objects.
|
||||
|
||||
@@ -18,7 +18,6 @@ export default {
|
||||
'zh-CN/address-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-list.md')), 'zh-CN/address-list')),
|
||||
'zh-CN/area': wrapper(r => require.ensure([], () => r(require('./zh-CN/area.md')), 'zh-CN/area')),
|
||||
'zh-CN/badge': wrapper(r => require.ensure([], () => r(require('./zh-CN/badge.md')), 'zh-CN/badge')),
|
||||
'zh-CN/built-in-style': wrapper(r => require.ensure([], () => r(require('./zh-CN/built-in-style.md')), 'zh-CN/built-in-style')),
|
||||
'zh-CN/button': wrapper(r => require.ensure([], () => r(require('./zh-CN/button.md')), 'zh-CN/button')),
|
||||
'zh-CN/card': wrapper(r => require.ensure([], () => r(require('./zh-CN/card.md')), 'zh-CN/card')),
|
||||
'zh-CN/cell-swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell-swipe.md')), 'zh-CN/cell-swipe')),
|
||||
@@ -27,9 +26,10 @@ export default {
|
||||
'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
|
||||
'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
|
||||
'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
|
||||
'zh-CN/col': wrapper(r => require.ensure([], () => r(require('./zh-CN/col.md')), 'zh-CN/col')),
|
||||
'zh-CN/collapse': wrapper(r => require.ensure([], () => r(require('./zh-CN/collapse.md')), 'zh-CN/collapse')),
|
||||
'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
|
||||
'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
|
||||
'zh-CN/contact-card': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact-card.md')), 'zh-CN/contact-card')),
|
||||
'zh-CN/coupon-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon-list.md')), 'zh-CN/coupon-list')),
|
||||
'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
|
||||
'zh-CN/dialog': wrapper(r => require.ensure([], () => r(require('./zh-CN/dialog.md')), 'zh-CN/dialog')),
|
||||
'zh-CN/field': wrapper(r => require.ensure([], () => r(require('./zh-CN/field.md')), 'zh-CN/field')),
|
||||
@@ -38,7 +38,6 @@ export default {
|
||||
'zh-CN/icon': wrapper(r => require.ensure([], () => r(require('./zh-CN/icon.md')), 'zh-CN/icon')),
|
||||
'zh-CN/image-preview': wrapper(r => require.ensure([], () => r(require('./zh-CN/image-preview.md')), 'zh-CN/image-preview')),
|
||||
'zh-CN/intro': wrapper(r => require.ensure([], () => r(require('./zh-CN/intro.md')), 'zh-CN/intro')),
|
||||
'zh-CN/layout': wrapper(r => require.ensure([], () => r(require('./zh-CN/layout.md')), 'zh-CN/layout')),
|
||||
'zh-CN/lazyload': wrapper(r => require.ensure([], () => r(require('./zh-CN/lazyload.md')), 'zh-CN/lazyload')),
|
||||
'zh-CN/list': wrapper(r => require.ensure([], () => r(require('./zh-CN/list.md')), 'zh-CN/list')),
|
||||
'zh-CN/loading': wrapper(r => require.ensure([], () => r(require('./zh-CN/loading.md')), 'zh-CN/loading')),
|
||||
@@ -71,13 +70,13 @@ export default {
|
||||
'zh-CN/toast': wrapper(r => require.ensure([], () => r(require('./zh-CN/toast.md')), 'zh-CN/toast')),
|
||||
'zh-CN/tree-select': wrapper(r => require.ensure([], () => r(require('./zh-CN/tree-select.md')), 'zh-CN/tree-select')),
|
||||
'zh-CN/uploader': wrapper(r => require.ensure([], () => r(require('./zh-CN/uploader.md')), 'zh-CN/uploader')),
|
||||
'zh-CN/vant-css': wrapper(r => require.ensure([], () => r(require('./zh-CN/vant-css.md')), 'zh-CN/vant-css')),
|
||||
'zh-CN/waterfall': wrapper(r => require.ensure([], () => r(require('./zh-CN/waterfall.md')), 'zh-CN/waterfall')),
|
||||
'en-US/actionsheet': wrapper(r => require.ensure([], () => r(require('./en-US/actionsheet.md')), 'en-US/actionsheet')),
|
||||
'en-US/address-edit': wrapper(r => require.ensure([], () => r(require('./en-US/address-edit.md')), 'en-US/address-edit')),
|
||||
'en-US/address-list': wrapper(r => require.ensure([], () => r(require('./en-US/address-list.md')), 'en-US/address-list')),
|
||||
'en-US/area': wrapper(r => require.ensure([], () => r(require('./en-US/area.md')), 'en-US/area')),
|
||||
'en-US/badge': wrapper(r => require.ensure([], () => r(require('./en-US/badge.md')), 'en-US/badge')),
|
||||
'en-US/built-in-style': wrapper(r => require.ensure([], () => r(require('./en-US/built-in-style.md')), 'en-US/built-in-style')),
|
||||
'en-US/button': wrapper(r => require.ensure([], () => r(require('./en-US/button.md')), 'en-US/button')),
|
||||
'en-US/card': wrapper(r => require.ensure([], () => r(require('./en-US/card.md')), 'en-US/card')),
|
||||
'en-US/cell-swipe': wrapper(r => require.ensure([], () => r(require('./en-US/cell-swipe.md')), 'en-US/cell-swipe')),
|
||||
@@ -85,9 +84,10 @@ export default {
|
||||
'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
|
||||
'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
|
||||
'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
|
||||
'en-US/col': wrapper(r => require.ensure([], () => r(require('./en-US/col.md')), 'en-US/col')),
|
||||
'en-US/collapse': wrapper(r => require.ensure([], () => r(require('./en-US/collapse.md')), 'en-US/collapse')),
|
||||
'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
|
||||
'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
|
||||
'en-US/contact-card': wrapper(r => require.ensure([], () => r(require('./en-US/contact-card.md')), 'en-US/contact-card')),
|
||||
'en-US/coupon-list': wrapper(r => require.ensure([], () => r(require('./en-US/coupon-list.md')), 'en-US/coupon-list')),
|
||||
'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),
|
||||
'en-US/dialog': wrapper(r => require.ensure([], () => r(require('./en-US/dialog.md')), 'en-US/dialog')),
|
||||
'en-US/field': wrapper(r => require.ensure([], () => r(require('./en-US/field.md')), 'en-US/field')),
|
||||
@@ -96,7 +96,6 @@ export default {
|
||||
'en-US/icon': wrapper(r => require.ensure([], () => r(require('./en-US/icon.md')), 'en-US/icon')),
|
||||
'en-US/image-preview': wrapper(r => require.ensure([], () => r(require('./en-US/image-preview.md')), 'en-US/image-preview')),
|
||||
'en-US/intro': wrapper(r => require.ensure([], () => r(require('./en-US/intro.md')), 'en-US/intro')),
|
||||
'en-US/layout': wrapper(r => require.ensure([], () => r(require('./en-US/layout.md')), 'en-US/layout')),
|
||||
'en-US/lazyload': wrapper(r => require.ensure([], () => r(require('./en-US/lazyload.md')), 'en-US/lazyload')),
|
||||
'en-US/list': wrapper(r => require.ensure([], () => r(require('./en-US/list.md')), 'en-US/list')),
|
||||
'en-US/loading': wrapper(r => require.ensure([], () => r(require('./en-US/loading.md')), 'en-US/loading')),
|
||||
@@ -129,5 +128,6 @@ export default {
|
||||
'en-US/toast': wrapper(r => require.ensure([], () => r(require('./en-US/toast.md')), 'en-US/toast')),
|
||||
'en-US/tree-select': wrapper(r => require.ensure([], () => r(require('./en-US/tree-select.md')), 'en-US/tree-select')),
|
||||
'en-US/uploader': wrapper(r => require.ensure([], () => r(require('./en-US/uploader.md')), 'en-US/uploader')),
|
||||
'en-US/vant-css': wrapper(r => require.ensure([], () => r(require('./en-US/vant-css.md')), 'en-US/vant-css')),
|
||||
'en-US/waterfall': wrapper(r => require.ensure([], () => r(require('./en-US/waterfall.md')), 'en-US/waterfall'))
|
||||
};
|
||||
|
||||
@@ -92,7 +92,7 @@ Vue.use(Area);
|
||||
}
|
||||
```
|
||||
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.js)
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)
|
||||
|
||||
#### 点击完成时返回的数据格式
|
||||
|
||||
|
||||
@@ -19,12 +19,12 @@ Vue
|
||||
lazyComponent: true
|
||||
});
|
||||
|
||||
Vue.mixin(i18n);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('demo-section', DemoSection);
|
||||
|
||||
window.Toast = Toast;
|
||||
window.Dialog = Dialog;
|
||||
Vue.mixin(i18n);
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
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