[new feature] add i18n support (#310)
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
This commit is contained in:
neverland
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Demo Common Mixin && i18n
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
import { Locale, Toast, Dialog } from 'packages';
|
||||
import { DemoBlock, DemoSection } from 'vant-doc';
|
||||
import camelize from 'packages/utils/camelize';
|
||||
|
||||
const demoBaseMixin = {
|
||||
beforeCreate() {
|
||||
const { name, i18n } = this.$options;
|
||||
if (name && i18n) {
|
||||
const formattedI18n = {};
|
||||
const camelizedName = camelize(name);
|
||||
Object.keys(i18n).forEach(key => {
|
||||
formattedI18n[key] = { [camelizedName]: i18n[key] };
|
||||
});
|
||||
Locale.add(formattedI18n);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.Toast = Toast;
|
||||
window.Dialog = Dialog;
|
||||
Vue.mixin(Locale.i18n);
|
||||
Vue.mixin(demoBaseMixin);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('demo-section', DemoSection);
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
red: '红色',
|
||||
orange: '橙色',
|
||||
yellow: '黄色',
|
||||
tab: '标签',
|
||||
tag: '标签',
|
||||
desc: '描述信息',
|
||||
back: '返回',
|
||||
title: '标题',
|
||||
status: '状态',
|
||||
button: '按钮',
|
||||
option: '选项',
|
||||
search: '搜索',
|
||||
content: '内容',
|
||||
custom: '自定义',
|
||||
loading: '加载状态',
|
||||
disabled: '禁用状态',
|
||||
basicUsage: '基础用法',
|
||||
advancedUsage: '高级用法'
|
||||
},
|
||||
'en-US': {
|
||||
red: 'Red',
|
||||
orange: 'Orange',
|
||||
yellow: 'Yellow',
|
||||
tab: 'Tab',
|
||||
tag: 'Tag',
|
||||
desc: 'Description',
|
||||
back: 'Back',
|
||||
title: 'Title',
|
||||
status: 'Status',
|
||||
button: 'Button',
|
||||
option: 'Option',
|
||||
search: 'Search',
|
||||
content: 'Content',
|
||||
custom: 'Custom',
|
||||
loading: 'Loading',
|
||||
disabled: 'Disabled',
|
||||
basicUsage: 'Basic Usage',
|
||||
advancedUsage: 'Advanced Usage'
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
// This file is auto gererated by build/bin/build-entry.js
|
||||
import './common';
|
||||
|
||||
function wrapper(component, name) {
|
||||
component = component.default;
|
||||
component.name = 'demo-' + name;
|
||||
return component;
|
||||
}
|
||||
|
||||
export default {
|
||||
'actionsheet': r => require.ensure([], () => r(wrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet'),
|
||||
'address-edit': r => require.ensure([], () => r(wrapper(require('./views/address-edit'), 'address-edit')), 'address-edit'),
|
||||
'address-list': r => require.ensure([], () => r(wrapper(require('./views/address-list'), 'address-list')), 'address-list'),
|
||||
'area': r => require.ensure([], () => r(wrapper(require('./views/area'), 'area')), 'area'),
|
||||
'badge': r => require.ensure([], () => r(wrapper(require('./views/badge'), 'badge')), 'badge'),
|
||||
'button': r => require.ensure([], () => r(wrapper(require('./views/button'), 'button')), 'button'),
|
||||
'card': r => require.ensure([], () => r(wrapper(require('./views/card'), 'card')), 'card'),
|
||||
'cell-swipe': r => require.ensure([], () => r(wrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe'),
|
||||
'cell': r => require.ensure([], () => r(wrapper(require('./views/cell'), 'cell')), 'cell'),
|
||||
'checkbox': r => require.ensure([], () => r(wrapper(require('./views/checkbox'), 'checkbox')), 'checkbox'),
|
||||
'contact': r => require.ensure([], () => r(wrapper(require('./views/contact'), 'contact')), 'contact'),
|
||||
'coupon': r => require.ensure([], () => r(wrapper(require('./views/coupon'), 'coupon')), 'coupon'),
|
||||
'datetime-picker': r => require.ensure([], () => r(wrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker'),
|
||||
'dialog': r => require.ensure([], () => r(wrapper(require('./views/dialog'), 'dialog')), 'dialog'),
|
||||
'field': r => require.ensure([], () => r(wrapper(require('./views/field'), 'field')), 'field'),
|
||||
'goods-action': r => require.ensure([], () => r(wrapper(require('./views/goods-action'), 'goods-action')), 'goods-action'),
|
||||
'icon': r => require.ensure([], () => r(wrapper(require('./views/icon'), 'icon')), 'icon'),
|
||||
'image-preview': r => require.ensure([], () => r(wrapper(require('./views/image-preview'), 'image-preview')), 'image-preview'),
|
||||
'layout': r => require.ensure([], () => r(wrapper(require('./views/layout'), 'layout')), 'layout'),
|
||||
'lazyload': r => require.ensure([], () => r(wrapper(require('./views/lazyload'), 'lazyload')), 'lazyload'),
|
||||
'loading': r => require.ensure([], () => r(wrapper(require('./views/loading'), 'loading')), 'loading'),
|
||||
'nav-bar': r => require.ensure([], () => r(wrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar'),
|
||||
'notice-bar': r => require.ensure([], () => r(wrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar'),
|
||||
'number-keyboard': r => require.ensure([], () => r(wrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard'),
|
||||
'panel': r => require.ensure([], () => r(wrapper(require('./views/panel'), 'panel')), 'panel'),
|
||||
'password-input': r => require.ensure([], () => r(wrapper(require('./views/password-input'), 'password-input')), 'password-input'),
|
||||
'picker': r => require.ensure([], () => r(wrapper(require('./views/picker'), 'picker')), 'picker'),
|
||||
'popup': r => require.ensure([], () => r(wrapper(require('./views/popup'), 'popup')), 'popup'),
|
||||
'progress': r => require.ensure([], () => r(wrapper(require('./views/progress'), 'progress')), 'progress'),
|
||||
'pull-refresh': r => require.ensure([], () => r(wrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh'),
|
||||
'radio': r => require.ensure([], () => r(wrapper(require('./views/radio'), 'radio')), 'radio'),
|
||||
'search': r => require.ensure([], () => r(wrapper(require('./views/search'), 'search')), 'search'),
|
||||
'sku': r => require.ensure([], () => r(wrapper(require('./views/sku'), 'sku')), 'sku'),
|
||||
'stepper': r => require.ensure([], () => r(wrapper(require('./views/stepper'), 'stepper')), 'stepper'),
|
||||
'steps': r => require.ensure([], () => r(wrapper(require('./views/steps'), 'steps')), 'steps'),
|
||||
'submit-bar': r => require.ensure([], () => r(wrapper(require('./views/submit-bar'), 'submit-bar')), 'submit-bar'),
|
||||
'swipe': r => require.ensure([], () => r(wrapper(require('./views/swipe'), 'swipe')), 'swipe'),
|
||||
'switch-cell': r => require.ensure([], () => r(wrapper(require('./views/switch-cell'), 'switch-cell')), 'switch-cell'),
|
||||
'switch': r => require.ensure([], () => r(wrapper(require('./views/switch'), 'switch')), 'switch'),
|
||||
'tab': r => require.ensure([], () => r(wrapper(require('./views/tab'), 'tab')), 'tab'),
|
||||
'tabbar': r => require.ensure([], () => r(wrapper(require('./views/tabbar'), 'tabbar')), 'tabbar'),
|
||||
'tag': r => require.ensure([], () => r(wrapper(require('./views/tag'), 'tag')), 'tag'),
|
||||
'toast': r => require.ensure([], () => r(wrapper(require('./views/toast'), 'toast')), 'toast'),
|
||||
'tree-select': r => require.ensure([], () => r(wrapper(require('./views/tree-select'), 'tree-select')), 'tree-select'),
|
||||
'uploader': r => require.ensure([], () => r(wrapper(require('./views/uploader'), 'uploader')), 'uploader'),
|
||||
'waterfall': r => require.ensure([], () => r(wrapper(require('./views/waterfall'), 'waterfall')), 'waterfall')
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,236 @@
|
||||
/* eslint-disable */
|
||||
var _global = {
|
||||
"kdt_id": 55,
|
||||
"user_id": 4674509,
|
||||
"offline_id": 0,
|
||||
"activity_alias": "",
|
||||
"sku": {
|
||||
"tree": [{
|
||||
"k": "\u989c\u8272",
|
||||
"k_id": "1",
|
||||
"v": [{
|
||||
"id": "30349",
|
||||
"name": "\u5929\u84dd\u8272",
|
||||
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
|
||||
}],
|
||||
"k_s": "s1",
|
||||
"count": 2
|
||||
}, {
|
||||
"k": "\u5c3a\u5bf8",
|
||||
"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": "\u7559\u8a001",
|
||||
"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": "\u7559\u8a002",
|
||||
"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": "\u7559\u8a003",
|
||||
"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": "\u7559\u8a004",
|
||||
"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": "\u6570\u5b57",
|
||||
"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": "\u90ae\u4ef6",
|
||||
"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": "\u65e5\u671f",
|
||||
"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": "\u65f6\u95f4\u542b\u65e5\u671f",
|
||||
"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": "\u65f6\u95f4",
|
||||
"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": ""
|
||||
}
|
||||
};
|
||||
|
||||
export default _global;
|
||||
@@ -0,0 +1,81 @@
|
||||
<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" :cancelText="$t('cancel')" />
|
||||
</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'
|
||||
},
|
||||
'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'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{ name: this.$t('option'), callback: this.onClick },
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option'), loading: true }
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-edit
|
||||
:areaList="areaList"
|
||||
:showPostal="true"
|
||||
:showSetDefault="true"
|
||||
:showSearchResult="true"
|
||||
:searchResult="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
@change-detail="onChangeDetail"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import areaList from '../mock/area.json';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
Toast('save');
|
||||
},
|
||||
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心H座'
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-area :areaList="areaList" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-area :areaList="areaList" value="110101" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-area :areaList="areaList" :columnsNum="2" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../mock/area.json';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选中省市县',
|
||||
title3: '配置显示列'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Initial Value',
|
||||
title3: 'Columns Number'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaList: AreaList
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-badge-group :activeKey="activeKey">
|
||||
<van-badge :title="$t('title')" @click="onClick"></van-badge>
|
||||
<van-badge :title="$t('title')" @click="onClick" info="8"></van-badge>
|
||||
<van-badge :title="$t('title')" @click="onClick" info="99"></van-badge>
|
||||
<van-badge :title="$t('title')" @click="onClick" info="199"></van-badge>
|
||||
</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>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button size="large">Large</van-button>
|
||||
<van-button size="normal">Normal</van-button>
|
||||
<van-button size="small">Small</van-button>
|
||||
<van-button size="mini">Mini</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-button disabled>Diabled</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button loading></van-button>
|
||||
<van-button loading type="primary"></van-button>
|
||||
</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" bottomAction>{{ $t('button') }}</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottomAction>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '按钮类型',
|
||||
title2: '按钮尺寸',
|
||||
title3: '加载状态',
|
||||
title4: '自定义按钮标签',
|
||||
title5: '页面底部操作按钮'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Type',
|
||||
title2: 'Size',
|
||||
title3: 'Loading',
|
||||
title4: 'Custom Tag',
|
||||
title5: 'Action Button'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-button {
|
||||
.van-button {
|
||||
user-select: none;
|
||||
|
||||
&--large,
|
||||
&--bottom-action {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&--small,
|
||||
&--normal {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<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>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<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>
|
||||
</van-cell-group>
|
||||
<span slot="right">{{ $t('button2') }}</span>
|
||||
</van-cell-swipe>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '选择',
|
||||
button2: '删除',
|
||||
title: '单元格'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Select',
|
||||
button2: 'Delete',
|
||||
title: 'Cell'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-cell-swipe {
|
||||
.van-cell-swipe__left,
|
||||
.van-cell-swipe__right {
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
.van-cell-swipe__left {
|
||||
background-color: #FF4444;
|
||||
}
|
||||
.van-cell-swipe__right {
|
||||
background-color: #84c483;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<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')">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="search" class="van-cell__right-icon"></van-icon>
|
||||
</template>
|
||||
</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'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-cell {
|
||||
.van-cell-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.van-cell__right-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-cell-text,
|
||||
.van-tag--danger {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-checkbox v-model="checkbox2" disabled>{{ $t('checkbox') }} 2</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="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
title3: 'Checkbox 组',
|
||||
title4: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<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
|
||||
:contactInfo="editingContact"
|
||||
:isEdit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
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>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosenCoupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosenCoupon="chosenCoupon"
|
||||
:disabledCoupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折'
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
Toast('兑换成功');
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-coupon {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
type="date"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
type="time"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选择日期',
|
||||
title3: '选择时间'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Date Picker',
|
||||
title3: 'Time Picker'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate1: new Date(2018, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: null
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<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-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '消息提示',
|
||||
title2: '消息确认',
|
||||
alert2: '无标题 Alert'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Alert dialog',
|
||||
title2: 'Confirm dialog',
|
||||
alert2: 'Alert without title'
|
||||
}
|
||||
},
|
||||
|
||||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" :placeholder="$t('usernamePlaceholder')"></van-field>
|
||||
</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
|
||||
@clickIcon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
:label="$t('password')"
|
||||
:placeholder="$t('passwordPlaceholder')"
|
||||
required>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-cell-group>
|
||||
<van-field :value="$t('inputDisabled')" :label="$t('username')" disabled></van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-cell-group>
|
||||
<van-field :label="$t('username')" :placeholder="$t('usernamePlaceholder')" error></van-field>
|
||||
</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-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义类型',
|
||||
title3: '禁用输入框',
|
||||
title4: '错误提示',
|
||||
title5: '高度自适应',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
message: '留言',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码',
|
||||
messagePlaceholder: '请输入留言',
|
||||
inputDisabled: '输入框已禁用'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom type',
|
||||
title3: 'Disabled',
|
||||
title4: 'Error info',
|
||||
title5: 'Auto resize',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
message: 'Message',
|
||||
usernamePlaceholder: 'Username',
|
||||
passwordPlaceholder: 'Password',
|
||||
messagePlaceholder: 'Message',
|
||||
inputDisabled: 'Disabled'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: '',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-field {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
|
||||
客服
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
|
||||
购物车
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-big-btn @click="onClickBigBtn">
|
||||
加入购物车
|
||||
</van-goods-action-big-btn>
|
||||
<van-goods-action-big-btn @click="onClickBigBtn" primary>
|
||||
立即购买
|
||||
</van-goods-action-big-btn>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
|
||||
onClickBigBtn() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-goods-action {
|
||||
.van-goods-action {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title')">
|
||||
<van-col span="8" v-for="icon in icons" :key="icon">
|
||||
<van-icon :name="icon"></van-icon>
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const icons = [
|
||||
'close',
|
||||
'location',
|
||||
'clock',
|
||||
'gold-coin',
|
||||
'chat',
|
||||
'exchange',
|
||||
'upgrade',
|
||||
'edit',
|
||||
'contact',
|
||||
'passed',
|
||||
'points',
|
||||
'delete',
|
||||
'records',
|
||||
'logistics',
|
||||
'check',
|
||||
'checked',
|
||||
'gift',
|
||||
'like-o',
|
||||
'like',
|
||||
'qr',
|
||||
'qr-invalid',
|
||||
'shop',
|
||||
'photograph',
|
||||
'add',
|
||||
'add2',
|
||||
'photo',
|
||||
'cart',
|
||||
'arrow',
|
||||
'search',
|
||||
'clear',
|
||||
'success',
|
||||
'fail',
|
||||
'wechat',
|
||||
'alipay',
|
||||
'password-view',
|
||||
'wap-nav',
|
||||
'password-not-view',
|
||||
'wap-home',
|
||||
'ecard-pay',
|
||||
'balance-pay',
|
||||
'peer-pay',
|
||||
'credit-pay',
|
||||
'debit-pay',
|
||||
'other-pay',
|
||||
'shopping-cart',
|
||||
'browsing-history',
|
||||
'goods-collect',
|
||||
'shop-collect',
|
||||
'receive-gift',
|
||||
'send-gift',
|
||||
'setting',
|
||||
'coupon',
|
||||
'free-postage',
|
||||
'discount',
|
||||
'birthday-privilege',
|
||||
'member-day-privilege',
|
||||
'balance-details',
|
||||
'cash-back-record',
|
||||
'points-mall',
|
||||
'exchange-record',
|
||||
'pending-payment',
|
||||
'pending-orders',
|
||||
'pending-deliver',
|
||||
'pending-evaluate',
|
||||
'cash-on-deliver',
|
||||
'gift-card-pay',
|
||||
'underway',
|
||||
'point-gift',
|
||||
'after-sale',
|
||||
'edit-data',
|
||||
'question',
|
||||
'description',
|
||||
'card',
|
||||
'gift-card',
|
||||
'coupon',
|
||||
'completed',
|
||||
'value-card',
|
||||
'certificate',
|
||||
'tosend',
|
||||
'sign',
|
||||
'home',
|
||||
'phone'
|
||||
];
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '图标列表'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Icon List'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
this.icons = icons;
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-icon {
|
||||
font-size: 0;
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<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-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'packages';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '预览图片',
|
||||
button2: '指定初始位置'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Images',
|
||||
button2: 'Custom Start Position'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showImagePreview(position) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.van-image-preview {
|
||||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<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-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +1,82 @@
|
||||
<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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-loading type="circle" color="black" />
|
||||
<van-loading type="circle" color="white" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-loading type="gradient-circle" color="black" />
|
||||
<van-loading type="gradient-circle" color="white" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '单色圆环',
|
||||
title2: '渐变色圆环',
|
||||
title3: 'Spinner'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Solid Circle',
|
||||
title2: 'Gradient Circle',
|
||||
title3: 'Spinner'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-nav-bar
|
||||
:title="$t('title')"
|
||||
:leftText="$t('back')"
|
||||
:rightText="$t('button')"
|
||||
leftArrow
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-nav-bar :title="$t('title')" :leftText="$t('back')" leftArrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-notice-bar
|
||||
:text="$t('text')"
|
||||
leftIcon="//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>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @touchstart.native.stop="showKeyboard = true">
|
||||
{{ $t('button1') }}
|
||||
</van-button>
|
||||
|
||||
<van-button @touchstart.native.stop="showKeyboard = false">
|
||||
{{ $t('button2') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@blur="showKeyboard = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '弹出键盘',
|
||||
button2: '收起键盘'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Keyboard',
|
||||
button2: 'Hide Keyboard'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast('Input: ' + value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('Delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-number-keyboard {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<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>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-panel {
|
||||
.van-panel__footer {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel__content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<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: '',
|
||||
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>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-picker
|
||||
showToolbar
|
||||
:title="$t('area')"
|
||||
:columns="columns"
|
||||
@change="onChange"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
area: '地区选择',
|
||||
title2: '带 toolbar 的 Picker',
|
||||
column: {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
|
||||
}
|
||||
},
|
||||
'en-US': {
|
||||
area: 'Title',
|
||||
title2: 'Picker with toolbar',
|
||||
column: {
|
||||
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
columns() {
|
||||
const column = this.$t('column');
|
||||
return [
|
||||
{
|
||||
values: Object.keys(column),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: column[Object.keys(column)[0]],
|
||||
className: 'column2'
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, this.$t('column')[values[0]]);
|
||||
},
|
||||
onCancel() {
|
||||
Toast('picker cancel');
|
||||
},
|
||||
onConfirm() {
|
||||
Toast('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
<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-button @click="showDialog">{{ $t('button3') }}</van-button>
|
||||
</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" :overlay="false">
|
||||
<van-button @click="show4 = false">{{ $t('button6') }}</van-button>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
position: '弹出位置',
|
||||
button1: '弹出 Popup',
|
||||
button2: '底部弹出',
|
||||
button3: '弹出 Dialog',
|
||||
button4: '顶部弹出',
|
||||
button5: '右侧弹出',
|
||||
button6: '关闭弹层'
|
||||
},
|
||||
'en-US': {
|
||||
position: 'Position',
|
||||
button1: 'Show Popup',
|
||||
button2: 'From Bottom',
|
||||
button3: 'Show Dialog',
|
||||
button4: 'From Top',
|
||||
button5: 'From Right',
|
||||
button6: 'Close Popup'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: 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;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&--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>
|
||||
@@ -0,0 +1,48 @@
|
||||
<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 :pivotText="$t('red')" color="#ed5050" :percentage="26" />
|
||||
<van-progress :pivotText="$t('orange')" color="#f60" :percentage="46" />
|
||||
<van-progress :pivotText="$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>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<van-pull-refresh v-model="isLoading">
|
||||
<demo-section name="pull-refresh" background="#fff">
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p>{{ $t('text') }}: {{ count }}</p>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</van-pull-refresh>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '刷新次数'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Refresh Count'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
isLoading() {
|
||||
if (this.isLoading) {
|
||||
setTimeout(() => {
|
||||
Toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-pull-refresh {
|
||||
p {
|
||||
margin: 10px 0 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">{{ $t('radio') }} 2</van-radio>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio2" disabled>{{ $t('text1') }}</van-radio>
|
||||
<van-radio name="2" v-model="radio2" disabled>{{ $t('text2') }}</van-radio>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
radio: '单选框',
|
||||
text1: '未选中禁用',
|
||||
text2: '选中且禁用',
|
||||
title3: 'Radio 组',
|
||||
title4: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
radio: 'Radio',
|
||||
text1: 'Disabled',
|
||||
text2: 'Disabled and checked',
|
||||
title3: 'Radio Group',
|
||||
title4: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-radio {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<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')"
|
||||
:showAction="true"
|
||||
@search="onSearch"
|
||||
@cancel="onCancel">
|
||||
</van-search>
|
||||
</form>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-search
|
||||
v-model="value"
|
||||
:showAction="true"
|
||||
@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>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
:hideStock="sku.hide_stock"
|
||||
:quota="quota"
|
||||
:quotaUsed="quotaUsed"
|
||||
:resetStepperOnHide="resetStepperOnHide"
|
||||
:disableStepperInput="disableStepperInput"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showBase = true" block>基础用法</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustomAction"
|
||||
stepperTitle="我要买"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
:hideStock="sku.hide_stock"
|
||||
:showAddCartBtn="true"
|
||||
:quota="quota"
|
||||
:quotaUsed="quotaUsed"
|
||||
:resetStepperOnHide="true"
|
||||
:initialSku="initialSku"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
<!-- 隐藏sku messages -->
|
||||
<template slot="sku-messages"></template>
|
||||
<!-- 自定义sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
|
||||
积分兑换
|
||||
</button>
|
||||
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
|
||||
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
|
||||
买买买
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from '../mock/sku';
|
||||
|
||||
const goods = data.goods_info;
|
||||
goods.picture = goods.picture[0];
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showBase: false,
|
||||
showCustomAction: false,
|
||||
sku: data.sku,
|
||||
goods: goods,
|
||||
goodsId: data.goods_id,
|
||||
quota: data.quota,
|
||||
quotaUsed: data.quota_used,
|
||||
disableStepperInput: true,
|
||||
resetStepperOnHide: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleBuyClicked(data) {
|
||||
Toast(JSON.stringify(data));
|
||||
},
|
||||
handleAddCartClicked(data) {
|
||||
Toast(JSON.stringify(data));
|
||||
},
|
||||
handlePointClicked() {
|
||||
Toast('积分兑换');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-sku {
|
||||
.sku-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<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" min="5" max="40" step="2" defaultValue="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>
|
||||
@@ -0,0 +1,113 @@
|
||||
<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: 0
|
||||
};
|
||||
},
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-submit-bar
|
||||
disabled
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-submit-bar
|
||||
loading
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
@submit="onClickButton"
|
||||
>
|
||||
<span slot="tip">
|
||||
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
|
||||
</span>
|
||||
</van-submit-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickButton() {
|
||||
Toast('点击按钮');
|
||||
},
|
||||
|
||||
onClickEditAddress() {
|
||||
Toast('修改地址');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-submit-bar {
|
||||
.van-submit-bar {
|
||||
position: relative;
|
||||
}
|
||||
.van-edit-address {
|
||||
color: #38F;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<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-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '图片懒加载'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Image Lazyload'
|
||||
}
|
||||
},
|
||||
|
||||
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'
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-swipe {
|
||||
padding-bottom: 30px;
|
||||
|
||||
.van-swipe {
|
||||
cursor: pointer;
|
||||
|
||||
&-item {
|
||||
color: #fff;
|
||||
min-height: 140px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<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 {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<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" @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>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tabs :active="active">
|
||||
<van-tab :title="$t('tab') + index" v-for="index in 4" :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="handleTabClick">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :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: '点击事件'
|
||||
},
|
||||
'en-US': {
|
||||
tab: 'Tab ',
|
||||
content: 'content of tab',
|
||||
title2: 'Swipe Tabs',
|
||||
title3: 'Disabled Tab',
|
||||
title4: 'Card Style',
|
||||
title5: 'Click Event'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!');
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
Toast(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tab {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<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>
|
||||
<img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
|
||||
</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>
|
||||
@@ -0,0 +1,53 @@
|
||||
<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>
|
||||
@@ -0,0 +1,95 @@
|
||||
<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': {
|
||||
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 });
|
||||
},
|
||||
|
||||
showSuccessToast() {
|
||||
Toast.success(this.$t('text2'));
|
||||
},
|
||||
|
||||
showFailToast() {
|
||||
Toast.fail(this.$t('text3'));
|
||||
},
|
||||
|
||||
showCustomizedToast(duration) {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
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>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:mainActiveIndex="mainActiveIndex"
|
||||
:activeId="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>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="demo-uploader-container">
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-uploader {
|
||||
&-container {
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<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: '当即将滚动到元素底部时，会自动加载更多'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'This list will load items will scroll to bottom.'
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user