blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: simplify $t to t

Browse Source
This commit is contained in:
chenjiahan 2020-03-21 14:46:02 +08:00
parent 10f32d6619
commit d8fa4b9495
80 changed files with 918 additions and 950 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/site/mobile.js
View File

@ -21,7 +21,7 @@ let demoUid = 0;
// helper for demo locales // helper for demo locales
Vue.mixin({ Vue.mixin({
computed: { computed: {
$t() { t() {
const { name } = this.$options; const { name } = this.$options;
const { lang = 'zh-CN' } = (this.$route && this.$route.meta) || {}; const { lang = 'zh-CN' } = (this.$route && this.$route.meta) || {};
const prefix = name ? camelize(name) + '.' : ''; const prefix = name ? camelize(name) + '.' : '';

36
src/action-sheet/demo/index.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" /> <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" /> <van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
<van-cell <van-cell
is-link is-link
:title="$t('showDescription')" :title="t('showDescription')"
@click="show.description = true" @click="show.description = true"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('optionStatus')"> <demo-block :title="t('optionStatus')">
<van-cell <van-cell
is-link is-link
:title="$t('optionStatus')" :title="t('optionStatus')"
@click="show.status = true" @click="show.status = true"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customPanel')"> <demo-block :title="t('customPanel')">
<van-cell is-link :title="$t('customPanel')" @click="show.title = true" /> <van-cell is-link :title="t('customPanel')" @click="show.title = true" />
</demo-block> </demo-block>
<van-action-sheet <van-action-sheet
@ -32,14 +32,14 @@
v-model="show.status" v-model="show.status"
close-on-click-action close-on-click-action
:actions="statusActions" :actions="statusActions"
:cancel-text="$t('cancel')" :cancel-text="t('cancel')"
/> />
<van-action-sheet <van-action-sheet
v-model="show.cancel" v-model="show.cancel"
:actions="simpleActions" :actions="simpleActions"
close-on-click-action close-on-click-action
:cancel-text="$t('cancel')" :cancel-text="t('cancel')"
@cancel="onCancel" @cancel="onCancel"
/> />
@ -47,11 +47,11 @@
v-model="show.description" v-model="show.description"
:actions="simpleActions" :actions="simpleActions"
close-on-click-action close-on-click-action
:description="$t('description')" :description="t('description')"
/> />
<van-action-sheet v-model="show.title" :title="$t('title')"> <van-action-sheet v-model="show.title" :title="t('title')">
<div class="demo-action-sheet-content">{{ $t('content') }}</div> <div class="demo-action-sheet-content">{{ t('content') }}</div>
</van-action-sheet> </van-action-sheet>
</demo-section> </demo-section>
</template> </template>
@ -98,17 +98,17 @@ export default {
computed: { computed: {
simpleActions() { simpleActions() {
return [ return [
{ name: this.$t('option') }, { name: this.t('option') },
{ name: this.$t('option') }, { name: this.t('option') },
{ name: this.$t('option'), subname: this.$t('subname') }, { name: this.t('option'), subname: this.t('subname') },
]; ];
}, },
statusActions() { statusActions() {
return [ return [
{ name: this.$t('option'), color: GREEN }, { name: this.t('option'), color: GREEN },
{ loading: true }, { loading: true },
{ name: this.$t('disabledOption'), disabled: true }, { name: this.t('disabledOption'), disabled: true },
]; ];
}, },
}, },

10
src/address-edit/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-address-edit <van-address-edit
:area-list="areaList" :area-list="areaList"
show-postal show-postal
@ -8,7 +8,7 @@
show-set-default show-set-default
show-search-result show-search-result
:search-result="searchResult" :search-result="searchResult"
:area-columns-placeholder="$t('areaColumnsPlaceholder')" :area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave" @save="onSave"
@delete="onDelete" @delete="onDelete"
@change-detail="onChangeDetail" @change-detail="onChangeDetail"
@ -65,15 +65,15 @@ export default {
methods: { methods: {
onSave() { onSave() {
this.$toast(this.$t('save')); this.$toast(this.t('save'));
}, },
onDelete() { onDelete() {
this.$toast(this.$t('delete')); this.$toast(this.t('delete'));
}, },
onChangeDetail(val) { onChangeDetail(val) {
this.searchResult = val ? this.$t('searchResult') : []; this.searchResult = val ? this.t('searchResult') : [];
}, },
}, },
}; };

14
src/address-list/demo/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-address-list <van-address-list
v-model="chosenAddressId" v-model="chosenAddressId"
:list="$t('list')" :list="t('list')"
:disabled-list="$t('disabledList')" :disabled-list="t('disabledList')"
:disabled-text="$t('disabledText')" :disabled-text="t('disabledText')"
:default-tag-text="$t('defaultTagText')" :default-tag-text="t('defaultTagText')"
@add="onAdd" @add="onAdd"
@edit="onEdit" @edit="onEdit"
/> />
@ -85,11 +85,11 @@ export default {
methods: { methods: {
onAdd() { onAdd() {
this.$toast(this.$t('add')); this.$toast(this.t('add'));
}, },
onEdit(item, index) { onEdit(item, index) {
this.$toast(`${this.$t('edit')}:${index}`); this.$toast(`${this.t('edit')}:${index}`);
}, },
}, },
}; };

22
src/area/demo/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-area :area-list="$t('areaList')" /> <van-area :area-list="t('areaList')" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-area :area-list="$t('areaList')" :value="value" /> <van-area :area-list="t('areaList')" :value="value" />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-area <van-area
:area-list="$t('areaList')" :area-list="t('areaList')"
:columns-num="2" :columns-num="2"
:title="$t('title')" :title="t('title')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="t('title4')">
<van-area <van-area
:area-list="$t('areaList')" :area-list="t('areaList')"
:columns-placeholder="$t('columnsPlaceholder')" :columns-placeholder="t('columnsPlaceholder')"
:title="$t('title')" :title="t('title')"
/> />
</demo-block> </demo-block>
</demo-section> </demo-section>

74
src/button/demo/index.vue
View File

@ -1,78 +1,78 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('type')"> <demo-block :title="t('type')">
<div class="demo-button-row"> <div class="demo-button-row">
<van-button type="default">{{ $t('default') }}</van-button> <van-button type="default">{{ t('default') }}</van-button>
<van-button type="primary">{{ $t('primary') }}</van-button> <van-button type="primary">{{ t('primary') }}</van-button>
<van-button type="info">{{ $t('info') }}</van-button> <van-button type="info">{{ t('info') }}</van-button>
</div> </div>
<van-button type="danger">{{ $t('danger') }}</van-button> <van-button type="danger">{{ t('danger') }}</van-button>
<van-button type="warning">{{ $t('warning') }}</van-button> <van-button type="warning">{{ t('warning') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('plain')"> <demo-block :title="t('plain')">
<van-button plain type="primary" :text="$t('plain')" /> <van-button plain type="primary" :text="t('plain')" />
<van-button plain type="info" :text="$t('plain')" /> <van-button plain type="info" :text="t('plain')" />
</demo-block> </demo-block>
<demo-block :title="$t('hairline')"> <demo-block :title="t('hairline')">
<van-button plain hairline type="primary" :text="$t('hairlineButton')" /> <van-button plain hairline type="primary" :text="t('hairlineButton')" />
<van-button plain hairline type="info" :text="$t('hairlineButton')" /> <van-button plain hairline type="info" :text="t('hairlineButton')" />
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-button disabled type="primary" :text="$t('disabled')" /> <van-button disabled type="primary" :text="t('disabled')" />
<van-button disabled type="info" :text="$t('disabled')" /> <van-button disabled type="info" :text="t('disabled')" />
</demo-block> </demo-block>
<demo-block :title="$t('loadingStatus')"> <demo-block :title="t('loadingStatus')">
<van-button loading type="primary" /> <van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" /> <van-button loading type="primary" loading-type="spinner" />
<van-button loading :loading-text="$t('loadingText')" type="info" /> <van-button loading :loading-text="t('loadingText')" type="info" />
</demo-block> </demo-block>
<demo-block :title="$t('shape')"> <demo-block :title="t('shape')">
<van-button type="primary" square :text="$t('square')" /> <van-button type="primary" square :text="t('square')" />
<van-button type="info" round :text="$t('round')" /> <van-button type="info" round :text="t('round')" />
</demo-block> </demo-block>
<demo-block :title="$t('icon')"> <demo-block :title="t('icon')">
<van-button type="primary" icon="star-o" /> <van-button type="primary" icon="star-o" />
<van-button type="primary" icon="star-o" :text="$t('button')" /> <van-button type="primary" icon="star-o" :text="t('button')" />
<van-button <van-button
plain plain
type="primary" type="primary"
icon="https://img.yzcdn.cn/vant/logo.png" icon="https://img.yzcdn.cn/vant/logo.png"
:text="$t('button')" :text="t('button')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('size')"> <demo-block :title="t('size')">
<van-button type="primary" size="large">{{ $t('large') }}</van-button> <van-button type="primary" size="large">{{ t('large') }}</van-button>
<van-button type="primary" size="normal">{{ $t('normal') }}</van-button> <van-button type="primary" size="normal">{{ t('normal') }}</van-button>
<van-button type="primary" size="small">{{ $t('small') }}</van-button> <van-button type="primary" size="small">{{ t('small') }}</van-button>
<van-button type="primary" size="mini">{{ $t('mini') }}</van-button> <van-button type="primary" size="mini">{{ t('mini') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('blockElement')"> <demo-block :title="t('blockElement')">
<van-button type="primary" block>{{ $t('blockElement') }}</van-button> <van-button type="primary" block>{{ t('blockElement') }}</van-button>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('router')"> <demo-block v-if="!isWeapp" :title="t('router')">
<van-button <van-button
:text="$t('urlRoute')" :text="t('urlRoute')"
type="primary" type="primary"
url="/vant/mobile.html" url="/vant/mobile.html"
/> />
<van-button :text="$t('vueRoute')" type="primary" to="index" /> <van-button :text="t('vueRoute')" type="primary" to="index" />
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="t('customColor')">
<van-button color="#7232dd" :text="$t('pure')" /> <van-button color="#7232dd" :text="t('pure')" />
<van-button plain color="#7232dd" :text="$t('pure')" /> <van-button plain color="#7232dd" :text="t('pure')" />
<van-button <van-button
color="linear-gradient(to right, #4bb0ff, #6149f6)" color="linear-gradient(to right, #4bb0ff, #6149f6)"
:text="$t('gradient')" :text="t('gradient')"
/> />
</demo-block> </demo-block>
</demo-section> </demo-section>

48
src/calendar/demo/index.vue
View File

@ -1,91 +1,91 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell <van-cell
is-link is-link
:title="$t('selectSingle')" :title="t('selectSingle')"
:value="formatFullDate(date.selectSingle)" :value="formatFullDate(date.selectSingle)"
@click="show('single', 'selectSingle')" @click="show('single', 'selectSingle')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('selectMultiple')" :title="t('selectMultiple')"
:value="formatMultiple(date.selectMultiple)" :value="formatMultiple(date.selectMultiple)"
@click="show('multiple', 'selectMultiple')" @click="show('multiple', 'selectMultiple')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('selectRange')" :title="t('selectRange')"
:value="formatRange(date.selectRange)" :value="formatRange(date.selectRange)"
@click="show('range', 'selectRange')" @click="show('range', 'selectRange')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('quickSelect')"> <demo-block :title="t('quickSelect')">
<van-cell <van-cell
is-link is-link
:title="$t('selectSingle')" :title="t('selectSingle')"
:value="formatFullDate(date.quickSelect1)" :value="formatFullDate(date.quickSelect1)"
@click="show('single', 'quickSelect1')" @click="show('single', 'quickSelect1')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('selectRange')" :title="t('selectRange')"
:value="formatRange(date.quickSelect2)" :value="formatRange(date.quickSelect2)"
@click="show('range', 'quickSelect2')" @click="show('range', 'quickSelect2')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customCalendar')"> <demo-block :title="t('customCalendar')">
<van-cell <van-cell
is-link is-link
:title="$t('customColor')" :title="t('customColor')"
:value="formatRange(date.customColor)" :value="formatRange(date.customColor)"
@click="show('range', 'customColor')" @click="show('range', 'customColor')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('customRange')" :title="t('customRange')"
:value="formatFullDate(date.customRange)" :value="formatFullDate(date.customRange)"
@click="show('single', 'customRange')" @click="show('single', 'customRange')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('customConfirm')" :title="t('customConfirm')"
:value="formatRange(date.customConfirm)" :value="formatRange(date.customConfirm)"
@click="show('range', 'customConfirm')" @click="show('range', 'customConfirm')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('customDayText')" :title="t('customDayText')"
:value="formatRange(date.customDayText)" :value="formatRange(date.customDayText)"
@click="show('range', 'customDayText')" @click="show('range', 'customDayText')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('customPosition')" :title="t('customPosition')"
:value="formatFullDate(date.customPosition)" :value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')" @click="show('single', 'customPosition')"
/> />
<van-cell <van-cell
is-link is-link
:title="$t('maxRange')" :title="t('maxRange')"
:value="formatRange(date.maxRange)" :value="formatRange(date.maxRange)"
@click="show('range', 'maxRange')" @click="show('range', 'maxRange')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('tiledDisplay')"> <demo-block :title="t('tiledDisplay')">
<van-calendar <van-calendar
:title="$t('calendar')" :title="t('calendar')"
:poppable="false" :poppable="false"
:show-confirm="false" :show-confirm="false"
:min-date="tiledMinDate" :min-date="tiledMinDate"
@ -226,8 +226,8 @@ export default {
this.color = GREEN; this.color = GREEN;
break; break;
case 'customConfirm': case 'customConfirm':
this.confirmText = this.$t('confirmText'); this.confirmText = this.t('confirmText');
this.confirmDisabledText = this.$t('confirmDisabledText'); this.confirmDisabledText = this.t('confirmDisabledText');
break; break;
case 'customRange': case 'customRange':
this.minDate = new Date(2010, 0, 1); this.minDate = new Date(2010, 0, 1);
@ -254,18 +254,18 @@ export default {
if (month === 5) { if (month === 5) {
if (date === 1) { if (date === 1) {
day.topInfo = this.$t('laborDay'); day.topInfo = this.t('laborDay');
} else if (date === 4) { } else if (date === 4) {
day.topInfo = this.$t('youthDay'); day.topInfo = this.t('youthDay');
} else if (date === 11) { } else if (date === 11) {
day.text = this.$t('today'); day.text = this.t('today');
} }
} }
if (day.type === 'start') { if (day.type === 'start') {
day.bottomInfo = this.$t('in'); day.bottomInfo = this.t('in');
} else if (day.type === 'end') { } else if (day.type === 'end') {
day.bottomInfo = this.$t('out'); day.bottomInfo = this.t('out');
} }
return day; return day;
@ -285,7 +285,7 @@ export default {
formatMultiple(dates) { formatMultiple(dates) {
if (dates.length) { if (dates.length) {
return this.$t('selectCount', dates.length); return this.t('selectCount', dates.length);
} }
}, },

24
src/card/demo/index.vue
View File

@ -1,33 +1,33 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-card <van-card
num="2" num="2"
price="2.00" price="2.00"
:desc="$t('desc')" :desc="t('desc')"
:title="$t('title')" :title="t('title')"
:thumb="imageURL" :thumb="imageURL"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('discountInfo')"> <demo-block :title="t('discountInfo')">
<van-card <van-card
num="2" num="2"
price="2.00" price="2.00"
origin-price="10.00" origin-price="10.00"
:tag="$t('tag')" :tag="t('tag')"
:desc="$t('desc')" :desc="t('desc')"
:title="$t('title')" :title="t('title')"
:thumb="imageURL" :thumb="imageURL"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customContent')"> <demo-block :title="t('customContent')">
<van-card <van-card
num="2" num="2"
price="2.00" price="2.00"
:desc="$t('desc')" :desc="t('desc')"
:title="$t('title')" :title="t('title')"
:thumb="imageURL" :thumb="imageURL"
> >
<template #tags> <template #tags>
@ -44,10 +44,10 @@
<template #footer> <template #footer>
<div> <div>
<van-button round size="mini"> <van-button round size="mini">
{{ $t('button') }} {{ t('button') }}
</van-button> </van-button>
<van-button round size="mini"> <van-button round size="mini">
{{ $t('button') }} {{ t('button') }}
</van-button> </van-button>
</div> </div>
</template> </template>

72
src/cell/demo/index.vue
View File

@ -1,80 +1,76 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell-group> <van-cell-group>
<van-cell :title="$t('cell')" :value="$t('content')" /> <van-cell :title="t('cell')" :value="t('content')" />
<van-cell <van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
:title="$t('cell')"
:value="$t('content')"
:label="$t('desc')"
/>
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
<demo-block :title="$t('largeSize')"> <demo-block :title="t('largeSize')">
<van-cell :title="$t('cell')" :value="$t('content')" size="large" /> <van-cell :title="t('cell')" :value="t('content')" size="large" />
<van-cell <van-cell
:title="$t('cell')" :title="t('cell')"
:value="$t('content')" :value="t('content')"
size="large" size="large"
:label="$t('desc')" :label="t('desc')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('showIcon')"> <demo-block :title="t('showIcon')">
<van-cell :title="$t('cell')" :value="$t('content')" icon="location-o" /> <van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('valueOnly')"> <demo-block v-if="!isWeapp" :title="t('valueOnly')">
<van-cell :value="$t('content')" /> <van-cell :value="t('content')" />
</demo-block> </demo-block>
<demo-block :title="$t('showArrow')"> <demo-block :title="t('showArrow')">
<van-cell :title="$t('cell')" is-link /> <van-cell :title="t('cell')" is-link />
<van-cell :title="$t('cell')" is-link :value="$t('content')" /> <van-cell :title="t('cell')" is-link :value="t('content')" />
<van-cell <van-cell
:title="$t('cell')" :title="t('cell')"
is-link is-link
arrow-direction="down" arrow-direction="down"
:value="$t('content')" :value="t('content')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('router')"> <demo-block :title="t('router')">
<van-cell :title="$t('urlRoute')" is-link url="/vant/mobile.html" /> <van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
<van-cell :title="$t('vueRoute')" is-link to="index" /> <van-cell :title="t('vueRoute')" is-link to="index" />
</demo-block> </demo-block>
<demo-block :title="$t('groupTitle')"> <demo-block :title="t('groupTitle')">
<van-cell-group :title="`${$t('group')} 1`"> <van-cell-group :title="`${t('group')} 1`">
<van-cell :title="$t('cell')" :value="$t('content')" /> <van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group> </van-cell-group>
<van-cell-group :title="`${$t('group')} 2`"> <van-cell-group :title="`${t('group')} 2`">
<van-cell :title="$t('cell')" :value="$t('content')" /> <van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
<demo-block :title="$t('useSlots')"> <demo-block :title="t('useSlots')">
<van-cell :value="$t('content')" is-link> <van-cell :value="t('content')" is-link>
<template #title> <template #title>
<span class="custom-title">{{ $t('cell') }}</span> <span class="custom-title">{{ t('cell') }}</span>
<van-tag type="danger">{{ $t('tag') }}</van-tag> <van-tag type="danger">{{ t('tag') }}</van-tag>
</template> </template>
</van-cell> </van-cell>
<van-cell icon="shop-o" :title="$t('cell')"> <van-cell icon="shop-o" :title="t('cell')">
<template #right-icon> <template #right-icon>
<van-icon name="search" style="line-height: inherit;" /> <van-icon name="search" style="line-height: inherit;" />
</template> </template>
</van-cell> </van-cell>
</demo-block> </demo-block>
<demo-block :title="$t('verticalCenter')"> <demo-block :title="t('verticalCenter')">
<van-cell <van-cell
center center
:title="$t('cell')" :title="t('cell')"
:value="$t('content')" :value="t('content')"
:label="$t('desc')" :label="t('desc')"
/> />
</demo-block> </demo-block>
</demo-section> </demo-section>

66
src/checkbox/demo/index.vue
View File

@ -1,98 +1,98 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox> <van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-checkbox :value="false" disabled> <van-checkbox :value="false" disabled>
{{ $t('checkbox') }} {{ t('checkbox') }}
</van-checkbox> </van-checkbox>
<van-checkbox :value="true" disabled> <van-checkbox :value="true" disabled>
{{ $t('checkbox') }} {{ t('checkbox') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('customShape')"> <demo-block :title="t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square"> <van-checkbox v-model="checkboxShape" shape="square">
{{ $t('customColor') }} {{ t('customColor') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160"> <van-checkbox v-model="checkbox2" checked-color="#07c160">
{{ $t('customColor') }} {{ t('customColor') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('customIconSize')"> <demo-block :title="t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="24px"> <van-checkbox v-model="checboxIcon" icon-size="24px">
{{ $t('customIconSize') }} {{ t('customIconSize') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('customIcon')"> <demo-block :title="t('customIcon')">
<van-checkbox v-model="checkbox3"> <van-checkbox v-model="checkbox3">
{{ $t('customIcon') }} {{ t('customIcon') }}
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon" /> <img :src="checked ? activeIcon : inactiveIcon" />
</template> </template>
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('disableLabel')"> <demo-block :title="t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled> <van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }} {{ t('checkbox') }}
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox> <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox> <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('horizontal')"> <demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-checkbox-group v-model="horizontalResult" direction="horizontal"> <van-checkbox-group v-model="horizontalResult" direction="horizontal">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox> <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox> <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="t('title4')">
<van-checkbox-group v-model="result2" :max="2"> <van-checkbox-group v-model="result2" :max="2">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox> <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox> <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox> <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('toggleAll')"> <demo-block v-if="!isWeapp" :title="t('toggleAll')">
<van-checkbox-group v-model="checkAllResult" ref="group"> <van-checkbox-group v-model="checkAllResult" ref="group">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox> <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox> <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox> <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
<div class="demo-checkbox-buttons"> <div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll"> <van-button type="primary" @click="checkAll">
{{ $t('checkAll') }} {{ t('checkAll') }}
</van-button> </van-button>
<van-button type="info" @click="toggleAll"> <van-button type="info" @click="toggleAll">
{{ $t('inverse') }} {{ t('inverse') }}
</van-button> </van-button>
</div> </div>
</demo-block> </demo-block>
<demo-block :title="$t('title5')"> <demo-block :title="t('title5')">
<van-checkbox-group v-model="result3"> <van-checkbox-group v-model="result3">
<van-cell-group> <van-cell-group>
<van-cell <van-cell
v-for="(item, index) in list" v-for="(item, index) in list"
clickable clickable
:key="index" :key="index"
:title="`${$t('checkbox')} ${item}`" :title="`${t('checkbox')} ${item}`"
@click="toggle(index)" @click="toggle(index)"
> >
<template #right-icon> <template #right-icon>

18
src/circle/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-circle <van-circle
v-model="currentRate1" v-model="currentRate1"
:rate="rate" :rate="rate"
@ -9,13 +9,13 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-circle <van-circle
v-model="currentRate3" v-model="currentRate3"
:rate="rate" :rate="rate"
:speed="100" :speed="100"
:stroke-width="60" :stroke-width="60"
:text="$t('customWidth')" :text="t('customWidth')"
/> />
<van-circle <van-circle
@ -24,7 +24,7 @@
:rate="rate" :rate="rate"
layer-color="#ebedf0" layer-color="#ebedf0"
:speed="100" :speed="100"
:text="$t('customColor')" :text="t('customColor')"
/> />
<van-circle <van-circle
@ -32,7 +32,7 @@
:rate="rate" :rate="rate"
:speed="100" :speed="100"
:color="gradientColor" :color="gradientColor"
:text="$t('gradient')" :text="t('gradient')"
/> />
<van-circle <van-circle
@ -41,7 +41,7 @@
:rate="rate" :rate="rate"
:speed="100" :speed="100"
:clockwise="false" :clockwise="false"
:text="$t('counterClockwise')" :text="t('counterClockwise')"
style="margin-top: 15px;" style="margin-top: 15px;"
/> />
@ -52,15 +52,15 @@
:speed="100" :speed="100"
size="120px" size="120px"
:clockwise="false" :clockwise="false"
:text="$t('customSize')" :text="t('customSize')"
style="margin-top: 15px;" style="margin-top: 15px;"
/> />
</demo-block> </demo-block>
<div style="margin-top: 15px;"> <div style="margin-top: 15px;">
<van-button :text="$t('add')" type="primary" size="small" @click="add" /> <van-button :text="t('add')" type="primary" size="small" @click="add" />
<van-button <van-button
:text="$t('decrease')" :text="t('decrease')"
type="danger" type="danger"
size="small" size="small"
@click="reduce" @click="reduce"

6
src/col/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-row> <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-col span="8">span: 8</van-col>
@ -21,7 +21,7 @@
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-row gutter="20"> <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-col span="8">span: 8</van-col>
@ -29,7 +29,7 @@
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('title3')"> <demo-block v-if="!isWeapp" :title="t('title3')">
<van-row type="flex"> <van-row type="flex">
<van-col span="6">span: 6</van-col> <van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col> <van-col span="6">span: 6</van-col>

40
src/collapse/demo/index.vue
View File

@ -1,47 +1,47 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-collapse v-model="active1"> <van-collapse v-model="active1">
<van-collapse-item :title="$t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="$t('title') + 2"> <van-collapse-item :title="t('title') + 2">
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="$t('title') + 3" disabled> <van-collapse-item :title="t('title') + 3" disabled>
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>
<demo-block :title="$t('accordion')"> <demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion> <van-collapse v-model="active2" accordion>
<van-collapse-item :title="$t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="$t('title') + 2"> <van-collapse-item :title="t('title') + 2">
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="$t('title') + 3"> <van-collapse-item :title="t('title') + 3">
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>
<demo-block :title="$t('titleSlot')"> <demo-block :title="t('titleSlot')">
<van-collapse v-model="active3"> <van-collapse v-model="active3">
<van-collapse-item> <van-collapse-item>
<template #title> <template #title>
{{ $t('title') + 1 }}<van-icon name="question-o" /> {{ t('title') + 1 }}<van-icon name="question-o" />
</template> </template>
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item <van-collapse-item
:title="$t('title') + 2" :title="t('title') + 2"
:value="$t('content')" :value="t('content')"
icon="shop-o" icon="shop-o"
> >
{{ $t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>

10
src/contact-card/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-contact-card <van-contact-card
:type="cardType" :type="cardType"
:name="currentContact.name" :name="currentContact.name"
@ -12,7 +12,7 @@
<van-contact-list <van-contact-list
v-model="chosenContactId" v-model="chosenContactId"
:list="list" :list="list"
:default-tag-text="$t('defaultTagText')" :default-tag-text="t('defaultTagText')"
@add="onAdd" @add="onAdd"
@edit="onEdit" @edit="onEdit"
@select="onSelect" @select="onSelect"
@ -22,7 +22,7 @@
<van-popup v-model="showEdit" position="bottom" :lazy-render="false"> <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
<van-contact-edit <van-contact-edit
show-set-default show-set-default
:set-default-label="$t('defaultLabel')" :set-default-label="t('defaultLabel')"
:contact-info="editingContact" :contact-info="editingContact"
:is-edit="isEdit" :is-edit="isEdit"
@save="onSave" @save="onSave"
@ -31,7 +31,7 @@
</van-popup> </van-popup>
</demo-block> </demo-block>
<demo-block :title="$t('uneditable')"> <demo-block :title="t('uneditable')">
<van-contact-card <van-contact-card
type="edit" type="edit"
:name="mockContact.name" :name="mockContact.name"
@ -71,7 +71,7 @@ export default {
computed: { computed: {
mockContact() { mockContact() {
return { return {
name: this.$t('name'), name: this.t('name'),
tel: '13000000000', tel: '13000000000',
id: 0, id: 0,
isDefault: 1, isDefault: 1,

24
src/count-down/demo/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-count-down :time="time" /> <van-count-down :time="time" />
</demo-block> </demo-block>
<demo-block :title="$t('customFormat')"> <demo-block :title="t('customFormat')">
<van-count-down :time="time" :format="$t('formatWithDay')" /> <van-count-down :time="time" :format="t('formatWithDay')" />
</demo-block> </demo-block>
<demo-block :title="$t('millisecond')"> <demo-block :title="t('millisecond')">
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" /> <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-count-down :time="time"> <van-count-down :time="time">
<template v-slot="currentTime"> <template v-slot="currentTime">
<span class="item">{{ currentTime.hours }}</span> <span class="item">{{ currentTime.hours }}</span>
@ -22,27 +22,23 @@
</van-count-down> </van-count-down>
</demo-block> </demo-block>
<demo-block :title="$t('manualControl')"> <demo-block :title="t('manualControl')">
<van-count-down <van-count-down
ref="countDown" ref="countDown"
millisecond millisecond
:time="3000" :time="3000"
:auto-start="false" :auto-start="false"
format="ss:SSS" format="ss:SSS"
@finish="$toast($t('finished'))" @finish="$toast(t('finished'))"
/> />
<van-grid clickable :column-num="3"> <van-grid clickable :column-num="3">
<van-grid-item <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
icon="play-circle-o"
:text="$t('start')"
@click="start"
/>
<van-grid-item <van-grid-item
icon="pause-circle-o" icon="pause-circle-o"
:text="$t('pause')" :text="t('pause')"
@click="pause" @click="pause"
/> />
<van-grid-item icon="replay" :text="$t('reset')" @click="reset" /> <van-grid-item icon="replay" :text="t('reset')" @click="reset" />
</van-grid> </van-grid>
</demo-block> </demo-block>
</demo-section> </demo-section>

12
src/coupon-list/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-coupon-cell <van-coupon-cell
:coupons="coupons" :coupons="coupons"
:chosen-coupon="chosenCoupon" :chosen-coupon="chosenCoupon"
@ -70,8 +70,8 @@ export default {
condition: '无使用门槛\n最多优惠12元', condition: '无使用门槛\n最多优惠12元',
reason: '', reason: '',
value: 150, value: 150,
name: this.$t('coupon.name'), name: this.t('coupon.name'),
description: this.$t('coupon.description'), description: this.t('coupon.description'),
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
@ -93,7 +93,7 @@ export default {
return { return {
...this.coupon, ...this.coupon,
id: 3, id: 3,
reason: this.$t('coupon.reason'), reason: this.t('coupon.reason'),
}; };
}, },
@ -103,7 +103,7 @@ export default {
valueDesc: '1', valueDesc: '1',
unitDesc: '折', unitDesc: '折',
id: 4, id: 4,
reason: this.$t('coupon.reason'), reason: this.t('coupon.reason'),
}; };
}, },
}, },
@ -114,7 +114,7 @@ export default {
this.chosenCoupon = index; this.chosenCoupon = index;
}, },
onExchange() { onExchange() {
this.$toast(this.$t('exchange')); this.$toast(this.t('exchange'));
this.exchangedCoupons.push({ this.exchangedCoupons.push({
...this.coupon, ...this.coupon,
id: this.randomId(), id: this.randomId(),

14
src/datetime-picker/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="t('title1')">
<van-datetime-picker <van-datetime-picker
v-model="currentDate1" v-model="currentDate1"
type="datetime" type="datetime"
@ -9,7 +9,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-datetime-picker <van-datetime-picker
v-model="currentDate2" v-model="currentDate2"
type="date" type="date"
@ -18,7 +18,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-datetime-picker <van-datetime-picker
v-model="currentDate3" v-model="currentDate3"
type="year-month" type="year-month"
@ -28,7 +28,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="t('title4')">
<van-datetime-picker <van-datetime-picker
v-model="currentTime1" v-model="currentTime1"
type="time" type="time"
@ -37,7 +37,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('optionFilter')"> <demo-block :title="t('optionFilter')">
<van-datetime-picker <van-datetime-picker
v-model="currentTime2" v-model="currentTime2"
type="time" type="time"
@ -85,10 +85,10 @@ export default {
methods: { methods: {
formatter(type, value) { formatter(type, value) {
if (type === 'year') { if (type === 'year') {
return value + this.$t('year'); return value + this.t('year');
} }
if (type === 'month') { if (type === 'month') {
return value + this.$t('month'); return value + this.t('month');
} }
return value; return value;
}, },

34
src/dialog/demo/index.vue
View File

@ -1,33 +1,33 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('alert1')"> <demo-block :title="t('alert1')">
<van-button type="primary" @click="onClickAlert"> <van-button type="primary" @click="onClickAlert">
{{ $t('alert1') }} {{ t('alert1') }}
</van-button> </van-button>
<van-button type="primary" @click="onClickAlert2"> <van-button type="primary" @click="onClickAlert2">
{{ $t('alert2') }} {{ t('alert2') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('confirm')"> <demo-block :title="t('confirm')">
<van-button type="primary" @click="onClickConfirm"> <van-button type="primary" @click="onClickConfirm">
{{ $t('confirm') }} {{ t('confirm') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('asyncClose')"> <demo-block :title="t('asyncClose')">
<van-button type="primary" @click="onClickAsyncClose"> <van-button type="primary" @click="onClickAsyncClose">
{{ $t('asyncClose') }} {{ t('asyncClose') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('componentCall')"> <demo-block :title="t('componentCall')">
<van-button type="primary" @click="show = true"> <van-button type="primary" @click="show = true">
{{ $t('componentCall') }} {{ t('componentCall') }}
</van-button> </van-button>
<van-dialog <van-dialog
v-model="show" v-model="show"
:title="$t('title')" :title="t('title')"
show-cancel-button show-cancel-button
:lazy-render="false" :lazy-render="false"
> >
@ -68,21 +68,21 @@ export default {
methods: { methods: {
onClickAlert() { onClickAlert() {
this.$dialog.alert({ this.$dialog.alert({
title: this.$t('title'), title: this.t('title'),
message: this.$t('content'), message: this.t('content'),
}); });
}, },
onClickAlert2() { onClickAlert2() {
this.$dialog.alert({ this.$dialog.alert({
message: this.$t('content'), message: this.t('content'),
}); });
}, },
onClickConfirm() { onClickConfirm() {
this.$dialog.confirm({ this.$dialog.confirm({
title: this.$t('title'), title: this.t('title'),
message: this.$t('content'), message: this.t('content'),
}); });
}, },
@ -96,8 +96,8 @@ export default {
} }
this.$dialog.confirm({ this.$dialog.confirm({
title: this.$t('title'), title: this.t('title'),
message: this.$t('content'), message: this.t('content'),
beforeClose, beforeClose,
}); });
}, },

20
src/divider/demo/index.vue
View File

@ -1,36 +1,36 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-divider /> <van-divider />
</demo-block> </demo-block>
<demo-block :title="$t('withText')"> <demo-block :title="t('withText')">
<van-divider> <van-divider>
{{ $t('text') }} {{ t('text') }}
</van-divider> </van-divider>
</demo-block> </demo-block>
<demo-block :title="$t('contentPosition')"> <demo-block :title="t('contentPosition')">
<van-divider content-position="left"> <van-divider content-position="left">
{{ $t('text') }} {{ t('text') }}
</van-divider> </van-divider>
<van-divider content-position="right"> <van-divider content-position="right">
{{ $t('text') }} {{ t('text') }}
</van-divider> </van-divider>
</demo-block> </demo-block>
<demo-block :title="$t('dashed')"> <demo-block :title="t('dashed')">
<van-divider dashed :hairline="false"> <van-divider dashed :hairline="false">
{{ $t('text') }} {{ t('text') }}
</van-divider> </van-divider>
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-divider <van-divider
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }" :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
> >
{{ $t('text') }} {{ t('text') }}
</van-divider> </van-divider>
</demo-block> </demo-block>
</demo-section> </demo-section>

22
src/dropdown-menu/demo/index.vue
View File

@ -1,40 +1,40 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('customContent')"> <demo-block :title="t('customContent')">
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="$t('itemTitle')" ref="item"> <van-dropdown-item :title="t('itemTitle')" ref="item">
<van-switch-cell v-model="switch1" :title="$t('switchTitle1')" /> <van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
<van-switch-cell v-model="switch2" :title="$t('switchTitle2')" /> <van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
<van-button type="info" block @click="onConfirm"> <van-button type="info" block @click="onConfirm">
{{ $t('confirm') }} {{ t('confirm') }}
</van-button> </van-button>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('customActiveColor')"> <demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#ee0a24"> <van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('expandDirection')"> <demo-block :title="t('expandDirection')">
<van-dropdown-menu direction="up"> <van-dropdown-menu direction="up">
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>
<demo-block :title="$t('disableMenu')"> <demo-block :title="t('disableMenu')">
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item v-model="value1" disabled :options="option1" /> <van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" /> <van-dropdown-item v-model="value2" disabled :options="option2" />
@ -97,11 +97,11 @@ export default {
computed: { computed: {
option1() { option1() {
return this.$t('option1'); return this.t('option1');
}, },
option2() { option2() {
return this.$t('option2'); return this.t('option2');
}, },
}, },

6
src/field/demo/Autosize.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<demo-block :title="$t('autosize')"> <demo-block :title="t('autosize')">
<van-field <van-field
v-model="value" v-model="value"
autosize autosize
rows="1" rows="1"
type="textarea" type="textarea"
:label="$t('message')" :label="t('message')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
/> />
</demo-block> </demo-block>
</template> </template>

4
src/field/demo/BasicUsage.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell-group> <van-cell-group>
<van-field v-model="value" :placeholder="$t('placeholder')" /> <van-field v-model="value" :placeholder="t('placeholder')" />
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
</template> </template>

22
src/field/demo/CustomType.vue
View File

@ -1,33 +1,33 @@
<template> <template>
<demo-block :title="$t('customType')"> <demo-block :title="t('customType')">
<van-field <van-field
v-model="text" v-model="text"
:label="$t('text')" :label="t('text')"
:placeholder="$t('textPlaceholder')" :placeholder="t('textPlaceholder')"
/> />
<van-field <van-field
v-model="phone" v-model="phone"
type="tel" type="tel"
:label="$t('phone')" :label="t('phone')"
:placeholder="$t('phonePlaceholder')" :placeholder="t('phonePlaceholder')"
/> />
<van-field <van-field
v-model="digit" v-model="digit"
type="digit" type="digit"
:label="$t('digit')" :label="t('digit')"
:placeholder="$t('digitPlaceholder')" :placeholder="t('digitPlaceholder')"
/> />
<van-field <van-field
v-model="number" v-model="number"
type="number" type="number"
:label="$t('number')" :label="t('number')"
:placeholder="$t('numberPlaceholder')" :placeholder="t('numberPlaceholder')"
/> />
<van-field <van-field
v-model="password" v-model="password"
type="password" type="password"
:label="$t('password')" :label="t('password')"
:placeholder="$t('passwordPlaceholder')" :placeholder="t('passwordPlaceholder')"
/> />
</demo-block> </demo-block>
</template> </template>

6
src/field/demo/Disabled.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-field :value="$t('inputReadonly')" :label="$t('text')" readonly /> <van-field :value="t('inputReadonly')" :label="t('text')" readonly />
<van-field :value="$t('inputDisabled')" :label="$t('text')" disabled /> <van-field :value="t('inputDisabled')" :label="t('text')" disabled />
</demo-block> </demo-block>
</template> </template>

12
src/field/demo/ErrorInfo.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<demo-block :title="$t('errorInfo')"> <demo-block :title="t('errorInfo')">
<van-field <van-field
v-model="username" v-model="username"
error error
required required
:label="$t('username')" :label="t('username')"
:placeholder="$t('usernamePlaceholder')" :placeholder="t('usernamePlaceholder')"
/> />
<van-field <van-field
v-model="phone" v-model="phone"
required required
:label="$t('phone')" :label="t('phone')"
:placeholder="$t('phonePlaceholder')" :placeholder="t('phonePlaceholder')"
:error-message="$t('phoneError')" :error-message="t('phoneError')"
/> />
</demo-block> </demo-block>
</template> </template>

6
src/field/demo/FormatValue.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<demo-block v-if="!isWeapp" :title="$t('formatValue')"> <demo-block v-if="!isWeapp" :title="t('formatValue')">
<van-field <van-field
v-model="formatValue" v-model="formatValue"
:label="$t('text')" :label="t('text')"
:formatter="formatter" :formatter="formatter"
:placeholder="$t('formatValue')" :placeholder="t('formatValue')"
/> />
</demo-block> </demo-block>
</template> </template>

6
src/field/demo/InputAlign.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<demo-block :title="$t('inputAlign')"> <demo-block :title="t('inputAlign')">
<van-field <van-field
v-model="value" v-model="value"
:label="$t('text')" :label="t('text')"
:placeholder="$t('alignPlaceHolder')" :placeholder="t('alignPlaceHolder')"
input-align="right" input-align="right"
/> />
</demo-block> </demo-block>

8
src/field/demo/InsertButton.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<demo-block :title="$t('insertButton')"> <demo-block :title="t('insertButton')">
<van-field <van-field
v-model="sms" v-model="sms"
center center
clearable clearable
:label="$t('sms')" :label="t('sms')"
:placeholder="$t('smsPlaceholder')" :placeholder="t('smsPlaceholder')"
> >
<template #button> <template #button>
<van-button size="small" type="primary"> <van-button size="small" type="primary">
{{ $t('sendSMS') }} {{ t('sendSMS') }}
</van-button> </van-button>
</template> </template>
</van-field> </van-field>

10
src/field/demo/ShowIcon.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<demo-block :title="$t('showIcon')"> <demo-block :title="t('showIcon')">
<van-field <van-field
v-model="icon1" v-model="icon1"
:label="$t('text')" :label="t('text')"
left-icon="smile-o" left-icon="smile-o"
right-icon="warning-o" right-icon="warning-o"
:placeholder="$t('showIcon')" :placeholder="t('showIcon')"
/> />
<van-field <van-field
v-model="icon2" v-model="icon2"
clearable clearable
:label="$t('text')" :label="t('text')"
left-icon="music-o" left-icon="music-o"
:placeholder="$t('showClearIcon')" :placeholder="t('showClearIcon')"
/> />
</demo-block> </demo-block>
</template> </template>

6
src/field/demo/ShowWordLimit.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<demo-block v-if="!isWeapp" :title="$t('showWordLimit')"> <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
<van-field <van-field
v-model="value" v-model="value"
autosize autosize
@ -7,8 +7,8 @@
rows="2" rows="2"
type="textarea" type="textarea"
maxlength="50" maxlength="50"
:label="$t('message')" :label="t('message')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
/> />
</demo-block> </demo-block>
</template> </template>

16
src/form/demo/BasicUsage.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-form @submit="onSubmit" @failed="onFailed"> <van-form @submit="onSubmit" @failed="onFailed">
<van-field <van-field
v-model="username" v-model="username"
name="username" name="username"
:label="$t('username')" :label="t('username')"
:rules="[{ required: true, message: $t('requireUsername') }]" :rules="[{ required: true, message: t('requireUsername') }]"
:placeholder="$t('username')" :placeholder="t('username')"
/> />
<van-field <van-field
v-model="password" v-model="password"
type="password" type="password"
name="password" name="password"
:label="$t('password')" :label="t('password')"
:rules="[{ required: true, message: $t('requirePassword') }]" :rules="[{ required: true, message: t('requirePassword') }]"
:placeholder="$t('password')" :placeholder="t('password')"
/> />
<div style="margin: 16px 16px 0;"> <div style="margin: 16px 16px 0;">
<van-button round block type="info" native-type="submit"> <van-button round block type="info" native-type="submit">
{{ $t('submit') }} {{ t('submit') }}
</van-button> </van-button>
</div> </div>
</van-form> </van-form>

28
src/form/demo/FieldType.vue
View File

@ -1,59 +1,59 @@
<template> <template>
<demo-block :title="$t('fieldType')"> <demo-block :title="t('fieldType')">
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field name="switch" :label="$t('switch')"> <van-field name="switch" :label="t('switch')">
<template #input> <template #input>
<van-switch v-model="switchChecked" size="20" /> <van-switch v-model="switchChecked" size="20" />
</template> </template>
</van-field> </van-field>
<van-field name="checkbox" :label="$t('checkbox')"> <van-field name="checkbox" :label="t('checkbox')">
<template #input> <template #input>
<van-checkbox v-model="checkbox" shape="square" /> <van-checkbox v-model="checkbox" shape="square" />
</template> </template>
</van-field> </van-field>
<van-field name="checkboxGroup" :label="$t('checkboxGroup')"> <van-field name="checkboxGroup" :label="t('checkboxGroup')">
<template #input> <template #input>
<van-checkbox-group v-model="checkboxGroup" direction="horizontal"> <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
<van-checkbox name="1" shape="square"> <van-checkbox name="1" shape="square">
{{ $t('checkbox') }} 1 {{ t('checkbox') }} 1
</van-checkbox> </van-checkbox>
<van-checkbox name="2" shape="square"> <van-checkbox name="2" shape="square">
{{ $t('checkbox') }} 2 {{ t('checkbox') }} 2
</van-checkbox> </van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</template> </template>
</van-field> </van-field>
<van-field name="radio" :label="$t('radio')"> <van-field name="radio" :label="t('radio')">
<template #input> <template #input>
<van-radio-group v-model="radio" direction="horizontal"> <van-radio-group v-model="radio" direction="horizontal">
<van-radio name="1">{{ $t('radio') }} 1</van-radio> <van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio> <van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</template> </template>
</van-field> </van-field>
<van-field name="stepper" :label="$t('stepper')"> <van-field name="stepper" :label="t('stepper')">
<template #input> <template #input>
<van-stepper v-model="stepper" /> <van-stepper v-model="stepper" />
</template> </template>
</van-field> </van-field>
<van-field name="rate" :label="$t('rate')"> <van-field name="rate" :label="t('rate')">
<template #input> <template #input>
<van-rate v-model="rate" /> <van-rate v-model="rate" />
</template> </template>
</van-field> </van-field>
<van-field name="slider" :label="$t('slider')"> <van-field name="slider" :label="t('slider')">
<template #input> <template #input>
<van-slider v-model="slider" /> <van-slider v-model="slider" />
</template> </template>
</van-field> </van-field>
<van-field name="uploader" :label="$t('uploader')"> <van-field name="uploader" :label="t('uploader')">
<template #input> <template #input>
<van-uploader v-model="uploader" max-count="2" /> <van-uploader v-model="uploader" max-count="2" />
</template> </template>
@ -66,7 +66,7 @@
<div style="margin: 16px 16px 0;"> <div style="margin: 16px 16px 0;">
<van-button round block type="info" native-type="submit"> <van-button round block type="info" native-type="submit">
{{ $t('submit') }} {{ t('submit') }}
</van-button> </van-button>
</div> </div>
</van-form> </van-form>

6
src/form/demo/FieldTypeArea.vue
View File

@ -6,13 +6,13 @@
name="area" name="area"
:value="value" :value="value"
:border="false" :border="false"
:label="$t('picker')" :label="t('picker')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
@click="showArea = true" @click="showArea = true"
/> />
<van-popup v-model="showArea" position="bottom"> <van-popup v-model="showArea" position="bottom">
<van-area <van-area
:area-list="$t('areaList')" :area-list="t('areaList')"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="onCancel" @cancel="onCancel"
/> />

4
src/form/demo/FieldTypeCalendar.vue
View File

@ -5,8 +5,8 @@
clickable clickable
name="calendar" name="calendar"
:value="value" :value="value"
:label="$t('calendar')" :label="t('calendar')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
@click="showCalendar = true" @click="showCalendar = true"
/> />
<van-calendar v-model="showCalendar" @confirm="onConfirm" /> <van-calendar v-model="showCalendar" @confirm="onConfirm" />

4
src/form/demo/FieldTypeDatetimePicker.vue
View File

@ -6,8 +6,8 @@
name="datetimePicker" name="datetimePicker"
:value="value" :value="value"
:border="false" :border="false"
:label="$t('label')" :label="t('label')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
@click="showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model="showPicker" position="bottom"> <van-popup v-model="showPicker" position="bottom">

6
src/form/demo/FieldTypePicker.vue
View File

@ -6,14 +6,14 @@
name="picker" name="picker"
:value="value" :value="value"
:border="false" :border="false"
:label="$t('picker')" :label="t('picker')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
@click="showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model="showPicker" position="bottom"> <van-popup v-model="showPicker" position="bottom">
<van-picker <van-picker
show-toolbar show-toolbar
:columns="$t('textColumns')" :columns="t('textColumns')"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="onCancel" @cancel="onCancel"
/> />

24
src/form/demo/ValidateRules.vue
View File

@ -1,30 +1,30 @@
<template> <template>
<demo-block :title="$t('title')"> <demo-block :title="t('title')">
<van-form validate-first @sumbit="onSubmit" @failed="onFailed"> <van-form validate-first @sumbit="onSubmit" @failed="onFailed">
<van-field <van-field
v-model="value1" v-model="value1"
name="pattern" name="pattern"
:label="$t('label')" :label="t('label')"
:rules="[{ pattern, message: $t('message') }]" :rules="[{ pattern, message: t('message') }]"
:placeholder="$t('pattern')" :placeholder="t('pattern')"
/> />
<van-field <van-field
v-model="value2" v-model="value2"
name="validator" name="validator"
:label="$t('label')" :label="t('label')"
:rules="[{ validator, message: $t('message') }]" :rules="[{ validator, message: t('message') }]"
:placeholder="$t('validator')" :placeholder="t('validator')"
/> />
<van-field <van-field
v-model="value3" v-model="value3"
name="asyncValidator" name="asyncValidator"
:label="$t('label')" :label="t('label')"
:rules="[{ validator: asyncValidator, message: $t('message') }]" :rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="$t('asyncValidator')" :placeholder="t('asyncValidator')"
/> />
<div style="margin: 16px 16px 0;"> <div style="margin: 16px 16px 0;">
<van-button round block type="info" native-type="submit"> <van-button round block type="info" native-type="submit">
{{ $t('submit') }} {{ t('submit') }}
</van-button> </van-button>
</div> </div>
</van-form> </van-form>
@ -72,7 +72,7 @@ export default {
asyncValidator(val) { asyncValidator(val) {
return new Promise(resolve => { return new Promise(resolve => {
this.$toast.loading(this.$t('validating')); this.$toast.loading(this.t('validating'));
setTimeout(() => { setTimeout(() => {
this.$toast.clear(); this.$toast.clear();

48
src/goods-action/demo/index.vue
View File

@ -1,71 +1,71 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-goods-action> <van-goods-action>
<van-goods-action-icon <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="$t('icon1')" :text="t('icon1')"
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-icon <van-goods-action-icon
icon="cart-o" icon="cart-o"
:text="$t('icon2')" :text="t('icon2')"
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-button <van-goods-action-button
type="warning" type="warning"
:text="$t('button1')" :text="t('button1')"
@click="onClickButton" @click="onClickButton"
/> />
<van-goods-action-button <van-goods-action-button
type="danger" type="danger"
:text="$t('button2')" :text="t('button2')"
@click="onClickButton" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
<demo-block :title="$t('iconBadge')"> <demo-block :title="t('iconBadge')">
<van-goods-action> <van-goods-action>
<van-goods-action-icon icon="chat-o" dot :text="$t('icon1')" /> <van-goods-action-icon icon="chat-o" dot :text="t('icon1')" />
<van-goods-action-icon icon="cart-o" badge="5" :text="$t('icon2')" /> <van-goods-action-icon icon="cart-o" badge="5" :text="t('icon2')" />
<van-goods-action-icon icon="shop-o" badge="12" :text="$t('icon3')" /> <van-goods-action-icon icon="shop-o" badge="12" :text="t('icon3')" />
<van-goods-action-button type="warning" :text="$t('button1')" /> <van-goods-action-button type="warning" :text="t('button1')" />
<van-goods-action-button type="danger" :text="$t('button2')" /> <van-goods-action-button type="danger" :text="t('button2')" />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('customIconColor')"> <demo-block v-if="!isWeapp" :title="t('customIconColor')">
<van-goods-action> <van-goods-action>
<van-goods-action-icon <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="$t('icon1')" :text="t('icon1')"
color="#07c160" color="#07c160"
/> />
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" /> <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-icon <van-goods-action-icon
icon="star" icon="star"
:text="$t('collected')" :text="t('collected')"
color="#ff5000" color="#ff5000"
/> />
<van-goods-action-button type="warning" :text="$t('button1')" /> <van-goods-action-button type="warning" :text="t('button1')" />
<van-goods-action-button type="danger" :text="$t('button2')" /> <van-goods-action-button type="danger" :text="t('button2')" />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
<demo-block :title="$t('customButtonColor')"> <demo-block :title="t('customButtonColor')">
<van-goods-action> <van-goods-action>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" /> <van-goods-action-icon icon="chat-o" :text="t('icon1')" />
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" /> <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-button <van-goods-action-button
color="#be99ff" color="#be99ff"
type="warning" type="warning"
:text="$t('button1')" :text="t('button1')"
/> />
<van-goods-action-button <van-goods-action-button
color="#7232dd" color="#7232dd"
type="danger" type="danger"
:text="$t('button2')" :text="t('button2')"
/> />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
@ -104,10 +104,10 @@ export default {
}, },
methods: { methods: {
onClickIcon() { onClickIcon() {
this.$toast(this.$t('clickIcon')); this.$toast(this.t('clickIcon'));
}, },
onClickButton() { onClickButton() {
this.$toast(this.$t('clickButton')); this.$toast(this.t('clickButton'));
}, },
}, },
}; };

30
src/grid/demo/index.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-grid> <van-grid>
<van-grid-item <van-grid-item
v-for="i in 4" v-for="i in 4"
:key="i" :key="i"
icon="photo-o" icon="photo-o"
:text="$t('text')" :text="t('text')"
/> />
</van-grid> </van-grid>
</demo-block> </demo-block>
<demo-block :title="$t('columnNum')"> <demo-block :title="t('columnNum')">
<van-grid :column-num="3"> <van-grid :column-num="3">
<van-grid-item <van-grid-item
v-for="i in 6" v-for="i in 6"
:key="i" :key="i"
icon="photo-o" icon="photo-o"
:text="$t('text')" :text="t('text')"
/> />
</van-grid> </van-grid>
</demo-block> </demo-block>
<demo-block :title="$t('customContent')"> <demo-block :title="t('customContent')">
<van-grid :border="false" :column-num="3"> <van-grid :border="false" :column-num="3">
<van-grid-item> <van-grid-item>
<van-image <van-image
@ -45,43 +45,43 @@
</van-grid> </van-grid>
</demo-block> </demo-block>
<demo-block :title="$t('square')"> <demo-block :title="t('square')">
<van-grid square> <van-grid square>
<van-grid-item <van-grid-item
v-for="i in 8" v-for="i in 8"
:key="i" :key="i"
icon="photo-o" icon="photo-o"
:text="$t('text')" :text="t('text')"
/> />
</van-grid> </van-grid>
</demo-block> </demo-block>
<demo-block :title="$t('gutter')"> <demo-block :title="t('gutter')">
<van-grid :gutter="10"> <van-grid :gutter="10">
<van-grid-item <van-grid-item
v-for="i in 8" v-for="i in 8"
:key="i" :key="i"
icon="photo-o" icon="photo-o"
:text="$t('text')" :text="t('text')"
/> />
</van-grid> </van-grid>
</demo-block> </demo-block>
<demo-block :title="$t('route')"> <demo-block :title="t('route')">
<van-grid clickable :column-num="2"> <van-grid clickable :column-num="2">
<van-grid-item icon="home-o" :text="$t('vueRoute')" to="/" /> <van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
<van-grid-item <van-grid-item
icon="search" icon="search"
:text="$t('urlRoute')" :text="t('urlRoute')"
url="/vant/mobile.html" url="/vant/mobile.html"
/> />
</van-grid> </van-grid>
</demo-block> </demo-block>
<demo-block :title="$t('showBadge')"> <demo-block :title="t('showBadge')">
<van-grid :column-num="2"> <van-grid :column-num="2">
<van-grid-item icon="home-o" :text="$t('text')" dot /> <van-grid-item icon="home-o" :text="t('text')" dot />
<van-grid-item icon="search" :text="$t('text')" badge="99+" /> <van-grid-item icon="search" :text="t('text')" badge="99+" />
</van-grid> </van-grid>
</demo-block> </demo-block>
</demo-section> </demo-section>

18
src/icon/demo/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<demo-section> <demo-section>
<van-tabs v-model="tab" sticky :color="BLUE"> <van-tabs v-model="tab" sticky :color="BLUE">
<van-tab :title="$t('demo')"> <van-tab :title="t('demo')">
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-col span="6" @click="copy(demoIcon)"> <van-col span="6" @click="copy(demoIcon)">
<van-icon :name="demoIcon" /> <van-icon :name="demoIcon" />
</van-col> </van-col>
@ -11,7 +11,7 @@
</van-col> </van-col>
</demo-block> </demo-block>
<demo-block :title="$t('badge')"> <demo-block :title="t('badge')">
<van-col span="6" @click="copy(demoIcon, { dot: true })"> <van-col span="6" @click="copy(demoIcon, { dot: true })">
<van-icon :name="demoIcon" dot /> <van-icon :name="demoIcon" dot />
</van-col> </van-col>
@ -23,7 +23,7 @@
</van-col> </van-col>
</demo-block> </demo-block>
<demo-block :title="$t('color')"> <demo-block :title="t('color')">
<van-col span="6" @click="copy(demoIcon, { color: BLUE })"> <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" /> <van-icon :name="demoIcon" :color="BLUE" />
</van-col> </van-col>
@ -32,7 +32,7 @@
</van-col> </van-col>
</demo-block> </demo-block>
<demo-block :title="$t('size')"> <demo-block :title="t('size')">
<van-col span="6" @click="copy(demoIcon, { size: '40' })"> <van-col span="6" @click="copy(demoIcon, { size: '40' })">
<van-icon :name="demoIcon" size="40" /> <van-icon :name="demoIcon" size="40" />
</van-col> </van-col>
@ -42,7 +42,7 @@
</demo-block> </demo-block>
</van-tab> </van-tab>
<van-tab :title="$t('basic')"> <van-tab :title="t('basic')">
<van-col <van-col
v-for="icon in icons.basic" v-for="icon in icons.basic"
:key="icon" :key="icon"
@ -54,7 +54,7 @@
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('outline')"> <van-tab :title="t('outline')">
<van-col <van-col
v-for="icon in icons.outline" v-for="icon in icons.outline"
:key="icon" :key="icon"
@ -66,7 +66,7 @@
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('filled')"> <van-tab :title="t('filled')">
<van-col <van-col
v-for="icon in icons.filled" v-for="icon in icons.filled"
:key="icon" :key="icon"
@ -168,7 +168,7 @@ export default {
type: 'success', type: 'success',
duration: 1500, duration: 1500,
className: 'demo-icon-notify', className: 'demo-icon-notify',
message: `${this.$t('copied')}：${tag}`, message: `${this.t('copied')}：${tag}`,
}); });
}, },
}, },

22
src/image-preview/demo/index.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-button type="primary" @click="showImagePreview"> <van-button type="primary" @click="showImagePreview">
{{ $t('button1') }} {{ t('button1') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('button2')"> <demo-block :title="t('button2')">
<van-button type="primary" @click="showImagePreview(1)"> <van-button type="primary" @click="showImagePreview(1)">
{{ $t('button2') }} {{ t('button2') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('button4')"> <demo-block :title="t('button4')">
<van-button type="primary" @click="showImagePreview(0, 0, true)"> <van-button type="primary" @click="showImagePreview(0, 0, true)">
{{ $t('button4') }} {{ t('button4') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('button3')"> <demo-block :title="t('button3')">
<van-button type="primary" @click="showImagePreview(0, 3000)"> <van-button type="primary" @click="showImagePreview(0, 3000)">
{{ $t('button3') }} {{ t('button3') }}
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('componentCall')"> <demo-block :title="t('componentCall')">
<van-button type="primary" @click="componentCall"> <van-button type="primary" @click="componentCall">
{{ $t('componentCall') }} {{ t('componentCall') }}
</van-button> </van-button>
<van-image-preview v-model="show" :images="images" @change="onChange"> <van-image-preview v-model="show" :images="images" @change="onChange">
<template #index>{{ $t('index', index) }}</template> <template #index>{{ t('index', index) }}</template>
</van-image-preview> </van-image-preview>
</demo-block> </demo-block>
</demo-section> </demo-section>

20
src/image/demo/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-row> <van-row>
<van-image width="100" height="100" :src="image" /> <van-image width="100" height="100" :src="image" />
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block :title="$t('fitMode')"> <demo-block :title="t('fitMode')">
<van-row gutter="20"> <van-row gutter="20">
<van-col v-for="fit in fits" span="8" :key="fit"> <van-col v-for="fit in fits" span="8" :key="fit">
<van-image :fit="fit" width="100%" height="27vw" :src="image" /> <van-image :fit="fit" width="100%" height="27vw" :src="image" />
@ -15,7 +15,7 @@
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block :title="$t('round')"> <demo-block :title="t('round')">
<van-row gutter="20"> <van-row gutter="20">
<van-col v-for="fit in fits" span="8" :key="fit"> <van-col v-for="fit in fits" span="8" :key="fit">
<van-image round :fit="fit" width="100%" height="27vw" :src="image" /> <van-image round :fit="fit" width="100%" height="27vw" :src="image" />
@ -24,11 +24,11 @@
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block :title="$t('loading')"> <demo-block :title="t('loading')">
<van-row gutter="20"> <van-row gutter="20">
<van-col span="8"> <van-col span="8">
<van-image width="100%" height="27vw" /> <van-image width="100%" height="27vw" />
<div class="text">{{ $t('defaultTip') }}</div> <div class="text">{{ t('defaultTip') }}</div>
</van-col> </van-col>
<van-col span="8"> <van-col span="8">
@ -37,23 +37,23 @@
<van-loading type="spinner" size="20" /> <van-loading type="spinner" size="20" />
</template> </template>
</van-image> </van-image>
<div class="text">{{ $t('customTip') }}</div> <div class="text">{{ t('customTip') }}</div>
</van-col> </van-col>
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block :title="$t('error')"> <demo-block :title="t('error')">
<van-row gutter="20"> <van-row gutter="20">
<van-col span="8"> <van-col span="8">
<van-image width="100%" height="27vw" src="x" /> <van-image width="100%" height="27vw" src="x" />
<div class="text">{{ $t('defaultTip') }}</div> <div class="text">{{ t('defaultTip') }}</div>
</van-col> </van-col>
<van-col span="8"> <van-col span="8">
<van-image width="100%" height="27vw" src="x"> <van-image width="100%" height="27vw" src="x">
<template #error>{{ $t('loadFail') }}</template> <template #error>{{ t('loadFail') }}</template>
</van-image> </van-image>
<div class="text">{{ $t('customTip') }}</div> <div class="text">{{ t('customTip') }}</div>
</van-col> </van-col>
</van-row> </van-row>
</demo-block> </demo-block>

18
src/index-bar/demo/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<demo-section> <demo-section>
<van-tabs v-model="activeTab" :color="BLUE"> <van-tabs v-model="activeTab" :color="BLUE">
<van-tab :title="$t('basicUsage')"> <van-tab :title="t('basicUsage')">
<van-index-bar> <van-index-bar>
<div v-for="index in indexList" :key="index"> <div v-for="index in indexList" :key="index">
<van-index-anchor :index="index" /> <van-index-anchor :index="index" />
<van-cell :title="$t('text')" /> <van-cell :title="t('text')" />
<van-cell :title="$t('text')" /> <van-cell :title="t('text')" />
<van-cell :title="$t('text')" /> <van-cell :title="t('text')" />
</div> </div>
</van-index-bar> </van-index-bar>
</van-tab> </van-tab>
<van-tab :title="$t('customIndexList')"> <van-tab :title="t('customIndexList')">
<van-index-bar :index-list="customIndexList"> <van-index-bar :index-list="customIndexList">
<div v-for="index in customIndexList" :key="index"> <div v-for="index in customIndexList" :key="index">
<van-index-anchor :index="index"> <van-index-anchor :index="index">
{{ $t('title') + index }} {{ t('title') + index }}
</van-index-anchor> </van-index-anchor>
<van-cell :title="$t('text')" /> <van-cell :title="t('text')" />
<van-cell :title="$t('text')" /> <van-cell :title="t('text')" />
<van-cell :title="$t('text')" /> <van-cell :title="t('text')" />
</div> </div>
</van-index-bar> </van-index-bar>
</van-tab> </van-tab>

6
src/lazyload/demo/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<img v-for="img in imageList" v-lazy="img" /> <img v-for="img in imageList" v-lazy="img" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<div v-for="img in backgroundImageList" v-lazy:background-image="img" /> <div v-for="img in backgroundImageList" v-lazy:background-image="img" />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<lazy-component> <lazy-component>
<img v-for="img in componentImageList" v-lazy="img" /> <img v-for="img in componentImageList" v-lazy="img" />
</lazy-component> </lazy-component>

12
src/list/demo/index.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<demo-section> <demo-section>
<van-tabs> <van-tabs>
<van-tab :title="$t('basicUsage')"> <van-tab :title="t('basicUsage')">
<van-list <van-list
v-model="list[0].loading" v-model="list[0].loading"
:finished="list[0].finished" :finished="list[0].finished"
:finished-text="$t('finishedText')" :finished-text="t('finishedText')"
@load="onLoad(0)" @load="onLoad(0)"
> >
<van-cell v-for="item in list[0].items" :key="item" :title="item" /> <van-cell v-for="item in list[0].items" :key="item" :title="item" />
</van-list> </van-list>
</van-tab> </van-tab>
<van-tab :title="$t('errorInfo')"> <van-tab :title="t('errorInfo')">
<van-list <van-list
v-model="list[1].loading" v-model="list[1].loading"
:finished="list[1].finished" :finished="list[1].finished"
:error.sync="list[1].error" :error.sync="list[1].error"
:error-text="$t('errorText')" :error-text="t('errorText')"
@load="onLoad(1)" @load="onLoad(1)"
> >
<van-cell v-for="item in list[1].items" :key="item" :title="item" /> <van-cell v-for="item in list[1].items" :key="item" :title="item" />
</van-list> </van-list>
</van-tab> </van-tab>
<van-tab :title="$t('pullRefresh')"> <van-tab :title="t('pullRefresh')">
<van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)"> <van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
<van-list <van-list
v-model="list[2].loading" v-model="list[2].loading"
:finished="list[2].finished" :finished="list[2].finished"
:finished-text="$t('finishedText')" :finished-text="t('finishedText')"
@load="onLoad(2)" @load="onLoad(2)"
> >
<van-cell v-for="item in list[2].items" :key="item" :title="item" /> <van-cell v-for="item in list[2].items" :key="item" :title="item" />

14
src/loading/demo/index.vue
View File

@ -1,29 +1,29 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('type')"> <demo-block :title="t('type')">
<van-loading /> <van-loading />
<van-loading type="spinner" /> <van-loading type="spinner" />
</demo-block> </demo-block>
<demo-block :title="$t('color')"> <demo-block :title="t('color')">
<van-loading color="#1989fa" /> <van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
</demo-block> </demo-block>
<demo-block :title="$t('size')"> <demo-block :title="t('size')">
<van-loading size="24" /> <van-loading size="24" />
<van-loading type="spinner" size="24" /> <van-loading type="spinner" size="24" />
</demo-block> </demo-block>
<demo-block :title="$t('text')"> <demo-block :title="t('text')">
<van-loading size="24px"> <van-loading size="24px">
{{ $t('loading') }} {{ t('loading') }}
</van-loading> </van-loading>
</demo-block> </demo-block>
<demo-block :title="$t('vertical')"> <demo-block :title="t('vertical')">
<van-loading size="24px" vertical> <van-loading size="24px" vertical>
{{ $t('loading') }} {{ t('loading') }}
</van-loading> </van-loading>
</demo-block> </demo-block>
</demo-section> </demo-section>

16
src/nav-bar/demo/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-nav-bar <van-nav-bar
:title="$t('title')" :title="t('title')"
:left-text="$t('back')" :left-text="t('back')"
:right-text="$t('button')" :right-text="t('button')"
left-arrow left-arrow
@click-left="onClickLeft" @click-left="onClickLeft"
@click-right="onClickRight" @click-right="onClickRight"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <demo-block :title="t('advancedUsage')">
<van-nav-bar :title="$t('title')" :left-text="$t('back')" left-arrow> <van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
<template #right> <template #right>
<van-icon name="search" /> <van-icon name="search" />
</template> </template>
@ -25,10 +25,10 @@
export default { export default {
methods: { methods: {
onClickLeft() { onClickLeft() {
this.$toast(this.$t('back')); this.$toast(this.t('back'));
}, },
onClickRight() { onClickRight() {
this.$toast(this.$t('button')); this.$toast(this.t('button'));
}, },
}, },
}; };

22
src/notice-bar/demo/index.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-notice-bar :text="$t('text')" left-icon="volume-o" /> <van-notice-bar :text="t('text')" left-icon="volume-o" />
</demo-block> </demo-block>
<demo-block :title="$t('unscrollable')"> <demo-block :title="t('unscrollable')">
<van-notice-bar :scrollable="false" :text="$t('text')" /> <van-notice-bar :scrollable="false" :text="t('text')" />
</demo-block> </demo-block>
<demo-block :title="$t('wrapable')"> <demo-block :title="t('wrapable')">
<van-notice-bar wrapable :scrollable="false" :text="$t('text')" /> <van-notice-bar wrapable :scrollable="false" :text="t('text')" />
</demo-block> </demo-block>
<demo-block :title="$t('mode')"> <demo-block :title="t('mode')">
<van-notice-bar mode="closeable" :text="$t('text')" /> <van-notice-bar mode="closeable" :text="t('text')" />
<van-notice-bar mode="link" :text="$t('text')" /> <van-notice-bar mode="link" :text="t('text')" />
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-notice-bar <van-notice-bar
:text="$t('text')" :text="t('text')"
color="#1989fa" color="#1989fa"
background="#ecf9ff" background="#ecf9ff"
left-icon="info-o" left-icon="info-o"

28
src/notify/demo/index.vue
View File

@ -1,44 +1,44 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-button type="danger" :text="$t('basicUsage')" @click="showNotify" /> <van-button type="danger" :text="t('basicUsage')" @click="showNotify" />
</demo-block> </demo-block>
<demo-block :title="$t('notifyType')"> <demo-block :title="t('notifyType')">
<div style="margin-bottom: 15px;"> <div style="margin-bottom: 15px;">
<van-button <van-button
type="info" type="info"
:text="$t('primary')" :text="t('primary')"
@click="showType('primary')" @click="showType('primary')"
/> />
<van-button <van-button
type="primary" type="primary"
:text="$t('success')" :text="t('success')"
@click="showType('success')" @click="showType('success')"
/> />
</div> </div>
<van-button <van-button
type="danger" type="danger"
:text="$t('danger')" :text="t('danger')"
@click="showType('danger')" @click="showType('danger')"
/> />
<van-button <van-button
type="warning" type="warning"
:text="$t('warning')" :text="t('warning')"
@click="showType('warning')" @click="showType('warning')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customNotify')"> <demo-block :title="t('customNotify')">
<van-button <van-button
type="primary" type="primary"
:text="$t('customColor')" :text="t('customColor')"
@click="showCustomColor" @click="showCustomColor"
/> />
<van-button <van-button
type="primary" type="primary"
:text="$t('customDuration')" :text="t('customDuration')"
@click="showCustomDuration" @click="showCustomDuration"
/> />
</demo-block> </demo-block>
@ -74,12 +74,12 @@ export default {
methods: { methods: {
showNotify() { showNotify() {
this.$notify(this.$t('content')); this.$notify(this.t('content'));
}, },
showCustomColor() { showCustomColor() {
this.$notify({ this.$notify({
message: this.$t('customColor'), message: this.t('customColor'),
color: '#ad0000', color: '#ad0000',
background: '#ffe1e1', background: '#ffe1e1',
}); });
@ -87,14 +87,14 @@ export default {
showCustomDuration() { showCustomDuration() {
this.$notify({ this.$notify({
message: this.$t('customDuration'), message: this.t('customDuration'),
duration: 1000, duration: 1000,
}); });
}, },
showType(type) { showType(type) {
this.$notify({ this.$notify({
message: this.$t('content'), message: this.t('content'),
type, type,
}); });
}, },

34
src/number-keyboard/demo/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('default')"> <demo-block :title="t('default')">
<van-button type="primary" @touchstart.stop="keyboard = 'default'"> <van-button type="primary" @touchstart.stop="keyboard = 'default'">
{{ $t('button1') }} {{ t('button1') }}
</van-button> </van-button>
<van-number-keyboard <van-number-keyboard
:show="keyboard === 'default'" :show="keyboard === 'default'"
:close-button-text="$t('close')" :close-button-text="t('close')"
extra-key="." extra-key="."
@blur="keyboard = ''" @blur="keyboard = ''"
@input="onInput" @input="onInput"
@ -15,14 +15,14 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('custom')"> <demo-block :title="t('custom')">
<van-button type="info" @touchstart.stop="keyboard = 'custom'"> <van-button type="info" @touchstart.stop="keyboard = 'custom'">
{{ $t('button2') }} {{ t('button2') }}
</van-button> </van-button>
<van-number-keyboard <van-number-keyboard
:show="keyboard === 'custom'" :show="keyboard === 'custom'"
:close-button-text="$t('close')" :close-button-text="t('close')"
theme="custom" theme="custom"
extra-key="." extra-key="."
@blur="keyboard = ''" @blur="keyboard = ''"
@ -31,12 +31,12 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('bindValue')"> <demo-block :title="t('bindValue')">
<van-field <van-field
readonly readonly
clickable clickable
:value="value" :value="value"
:placeholder="$t('clickToInput')" :placeholder="t('clickToInput')"
@touchstart.native.stop="keyboard = 'bindValue'" @touchstart.native.stop="keyboard = 'bindValue'"
/> />
@ -48,14 +48,14 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('extraKey')"> <demo-block :title="t('extraKey')">
<van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'"> <van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">
{{ $t('button3') }} {{ t('button3') }}
</van-button> </van-button>
<van-number-keyboard <van-number-keyboard
:show="keyboard === 'extraKey'" :show="keyboard === 'extraKey'"
:close-button-text="$t('close')" :close-button-text="t('close')"
extra-key="X" extra-key="X"
@blur="keyboard = ''" @blur="keyboard = ''"
@input="onInput" @input="onInput"
@ -63,15 +63,15 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title')"> <demo-block :title="t('title')">
<van-button plain type="info" @touchstart.stop="keyboard = 'title'"> <van-button plain type="info" @touchstart.stop="keyboard = 'title'">
{{ $t('button4') }} {{ t('button4') }}
</van-button> </van-button>
<van-number-keyboard <van-number-keyboard
:show="keyboard === 'title'" :show="keyboard === 'title'"
:close-button-text="$t('close')" :close-button-text="t('close')"
:title="$t('title')" :title="t('title')"
extra-key="." extra-key="."
@blur="keyboard = ''" @blur="keyboard = ''"
@input="onInput" @input="onInput"
@ -123,11 +123,11 @@ export default {
methods: { methods: {
onInput(value) { onInput(value) {
this.$toast(`${this.$t('input')}: ${value}`); this.$toast(`${this.t('input')}: ${value}`);
}, },
onDelete() { onDelete() {
this.$toast(this.$t('delete')); this.$toast(this.t('delete'));
}, },
}, },
}; };

8
src/overlay/demo/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-button <van-button
type="primary" type="primary"
:text="$t('showOverlay')" :text="t('showOverlay')"
style="margin-left: 16px;" style="margin-left: 16px;"
@click="show = true" @click="show = true"
/> />
@ -11,10 +11,10 @@
<van-overlay :show="show" @click="show = false" /> <van-overlay :show="show" @click="show = false" />
</demo-block> </demo-block>
<demo-block :title="$t('embeddedContent')"> <demo-block :title="t('embeddedContent')">
<van-button <van-button
type="primary" type="primary"
:text="$t('embeddedContent')" :text="t('embeddedContent')"
style="margin-left: 16px;" style="margin-left: 16px;"
@click="showEmbedded = true" @click="showEmbedded = true"
/> />

18
src/pagination/demo/index.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-pagination <van-pagination
v-model="currentPage1" v-model="currentPage1"
:total-items="24" :total-items="24"
:items-per-page="5" :items-per-page="5"
:prev-text="$t('prevText')" :prev-text="t('prevText')"
:next-text="$t('nextText')" :next-text="t('nextText')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-pagination <van-pagination
v-model="currentPage2" v-model="currentPage2"
:page-count="12" :page-count="12"
:prev-text="$t('prevText')" :prev-text="t('prevText')"
:next-text="$t('nextText')" :next-text="t('nextText')"
mode="simple" mode="simple"
size="small" size="small"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-pagination <van-pagination
force-ellipses force-ellipses
v-model="currentPage3" v-model="currentPage3"
:total-items="125" :total-items="125"
:show-page-size="3" :show-page-size="3"
:prev-text="$t('prevText')" :prev-text="t('prevText')"
:next-text="$t('nextText')" :next-text="t('nextText')"
/> />
</demo-block> </demo-block>
</demo-section> </demo-section>

16
src/panel/demo/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')"> <van-panel :title="t('title')" :desc="t('desc')" :status="t('status')">
<div>{{ $t('content') }}</div> <div>{{ t('content') }}</div>
</van-panel> </van-panel>
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <demo-block :title="t('advancedUsage')">
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')"> <van-panel :title="t('title')" :desc="t('desc')" :status="t('status')">
<div>{{ $t('content') }}</div> <div>{{ t('content') }}</div>
<template #footer> <template #footer>
<van-button size="small">{{ $t('button') }}</van-button> <van-button size="small">{{ t('button') }}</van-button>
<van-button size="small" type="danger"> <van-button size="small" type="danger">
{{ $t('button') }} {{ t('button') }}
</van-button> </van-button>
</template> </template>
</van-panel> </van-panel>

12
src/password-input/demo/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-password-input <van-password-input
:value="value1" :value="value1"
:info="$t('info')" :info="t('info')"
:focused="keyboard === 'value1'" :focused="keyboard === 'value1'"
@focus="keyboard = 'value1'" @focus="keyboard = 'value1'"
/> />
@ -16,7 +16,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customLength')"> <demo-block :title="t('customLength')">
<van-password-input <van-password-input
:value="value2" :value="value2"
:length="4" :length="4"
@ -26,7 +26,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('removeMask')"> <demo-block :title="t('removeMask')">
<van-password-input <van-password-input
:value="value3" :value="value3"
:mask="false" :mask="false"
@ -35,7 +35,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('hintError')"> <demo-block :title="t('hintError')">
<van-password-input <van-password-input
:value="value4" :value="value4"
:error-info="errorInfo" :error-info="errorInfo"
@ -81,7 +81,7 @@ export default {
const { keyboard } = this; const { keyboard } = this;
this[keyboard] = (this[keyboard] + key).slice(0, 6); this[keyboard] = (this[keyboard] + key).slice(0, 6);
if (this[keyboard].length === 6) { if (this[keyboard].length === 6) {
this.errorInfo = this.$t('errorInfo'); this.errorInfo = this.t('errorInfo');
} else { } else {
this.errorInfo = ''; this.errorInfo = '';
} }

52
src/picker/demo/index.vue
View File

@ -1,72 +1,72 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-picker :columns="$t('textColumns')" @change="onChange1" /> <van-picker :columns="t('textColumns')" @change="onChange1" />
</demo-block> </demo-block>
<demo-block :title="$t('defaultIndex')"> <demo-block :title="t('defaultIndex')">
<van-picker <van-picker
:columns="$t('textColumns')" :columns="t('textColumns')"
:default-index="2" :default-index="2"
@change="onChange1" @change="onChange1"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('showToolbar')"> <demo-block :title="t('showToolbar')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="$t('title')" :title="t('title')"
:columns="$t('textColumns')" :columns="t('textColumns')"
@cancel="onCancel" @cancel="onCancel"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('multipleColumns')"> <demo-block :title="t('multipleColumns')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="$t('title')" :title="t('title')"
:columns="$t('dateColumns')" :columns="t('dateColumns')"
@cancel="onCancel" @cancel="onCancel"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('cascade')"> <demo-block v-if="!isWeapp" :title="t('cascade')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="$t('title')" :title="t('title')"
:columns="$t('cascadeColumns')" :columns="t('cascadeColumns')"
@cancel="onCancel" @cancel="onCancel"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('disableOption')"> <demo-block :title="t('disableOption')">
<van-picker :columns="$t('disabledColumns')" /> <van-picker :columns="t('disabledColumns')" />
</demo-block> </demo-block>
<demo-block :title="$t('setColumnValues')"> <demo-block :title="t('setColumnValues')">
<van-picker :columns="columns" @change="onChange2" /> <van-picker :columns="columns" @change="onChange2" />
</demo-block> </demo-block>
<demo-block :title="$t('loadingStatus')"> <demo-block :title="t('loadingStatus')">
<van-picker loading :columns="columns" /> <van-picker loading :columns="columns" />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('withPopup')"> <demo-block v-if="!isWeapp" :title="t('withPopup')">
<van-field <van-field
readonly readonly
clickable clickable
:label="$t('city')" :label="t('city')"
:value="fieldValue" :value="fieldValue"
:placeholder="$t('chooseCity')" :placeholder="t('chooseCity')"
@click="onClickField" @click="onClickField"
/> />
<van-popup v-model="showPicker" position="bottom"> <van-popup v-model="showPicker" position="bottom">
<van-picker <van-picker
show-toolbar show-toolbar
:columns="$t('textColumns')" :columns="t('textColumns')"
@cancel="onCancel2" @cancel="onCancel2"
@confirm="onConfirm2" @confirm="onConfirm2"
/> />
@ -139,7 +139,7 @@ export default {
computed: { computed: {
columns() { columns() {
const column = this.$t('column3'); const column = this.t('column3');
return [ return [
{ {
values: Object.keys(column), values: Object.keys(column),
@ -156,19 +156,19 @@ export default {
methods: { methods: {
onChange1(picker, value, index) { onChange1(picker, value, index) {
this.$toast(this.$t('toastContent', value, index)); this.$toast(this.t('toastContent', value, index));
}, },
onChange2(picker, values) { onChange2(picker, values) {
picker.setColumnValues(1, this.$t('column3')[values[0]]); picker.setColumnValues(1, this.t('column3')[values[0]]);
}, },
onConfirm(value, index) { onConfirm(value, index) {
this.$toast(this.$t('toastContent', value, index)); this.$toast(this.t('toastContent', value, index));
}, },
onCancel() { onCancel() {
this.$toast(this.$t('cancel')); this.$toast(this.t('cancel'));
}, },
onClickField() { onClickField() {

40
src/popup/demo/index.vue
View File

@ -1,21 +1,17 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell :title="$t('buttonBasic')" is-link @click="showBasic = true" /> <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }"> <van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
{{ $t('content') }} {{ t('content') }}
</van-popup> </van-popup>
</demo-block> </demo-block>
<demo-block :title="$t('position')"> <demo-block :title="t('position')">
<van-cell :title="$t('buttonTop')" is-link @click="showTop = true" /> <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
<van-cell <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
:title="$t('buttonBottom')" <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
is-link <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
@click="showBottom = true"
/>
<van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
<van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
<van-popup v-model="showTop" position="top" :style="{ height: '30%' }" /> <van-popup v-model="showTop" position="top" :style="{ height: '30%' }" />
<van-popup <van-popup
@ -35,19 +31,15 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('closeIcon')"> <demo-block :title="t('closeIcon')">
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
<van-cell <van-cell
:title="$t('closeIcon')" :title="t('customCloseIcon')"
is-link
@click="showCloseIcon = true"
/>
<van-cell
:title="$t('customCloseIcon')"
is-link is-link
@click="showCustomCloseIcon = true" @click="showCustomCloseIcon = true"
/> />
<van-cell <van-cell
:title="$t('customIconPosition')" :title="t('customIconPosition')"
is-link is-link
@click="showCustomIconPosition = true" @click="showCustomIconPosition = true"
/> />
@ -74,9 +66,9 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('roundCorner')"> <demo-block :title="t('roundCorner')">
<van-cell <van-cell
:title="$t('roundCorner')" :title="t('roundCorner')"
is-link is-link
@click="showRoundCorner = true" @click="showRoundCorner = true"
/> />
@ -88,9 +80,9 @@
/> />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('getContainer')"> <demo-block v-if="!isWeapp" :title="t('getContainer')">
<van-cell <van-cell
:title="$t('getContainer')" :title="t('getContainer')"
is-link is-link
@click="showGetContainer = true" @click="showGetContainer = true"
/> />

14
src/progress/demo/index.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-progress :percentage="50" /> <van-progress :percentage="50" />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('strokeWidth')"> <demo-block v-if="!isWeapp" :title="t('strokeWidth')">
<van-progress :percentage="50" stroke-width="8" /> <van-progress :percentage="50" stroke-width="8" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-progress inactive :percentage="50" /> <van-progress inactive :percentage="50" />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-progress <van-progress
color="#f2826a" color="#f2826a"
:percentage="25" :percentage="25"
:pivot-text="$t('orange')" :pivot-text="t('orange')"
/> />
<van-progress color="#ee0a24" :percentage="50" :pivot-text="$t('red')" /> <van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
<van-progress <van-progress
:percentage="75" :percentage="75"
:pivot-text="$t('purple')" :pivot-text="t('purple')"
pivot-color="#7232dd" pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)" color="linear-gradient(to right, #be99ff, #7232dd)"
/> />

14
src/pull-refresh/demo/index.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<demo-section name="pull-refresh"> <demo-section name="pull-refresh">
<van-tabs> <van-tabs>
<van-tab :title="$t('basicUsage')"> <van-tab :title="t('basicUsage')">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
<p>{{ tips }}</p> <p>{{ tips }}</p>
</van-pull-refresh> </van-pull-refresh>
</van-tab> </van-tab>
<van-tab :title="$t('successTip')"> <van-tab :title="t('successTip')">
<van-pull-refresh <van-pull-refresh
v-model="isLoading" v-model="isLoading"
:success-text="$t('success')" :success-text="t('success')"
@refresh="onRefresh(false)" @refresh="onRefresh(false)"
> >
<p>{{ tips }}</p> <p>{{ tips }}</p>
</van-pull-refresh> </van-pull-refresh>
</van-tab> </van-tab>
<van-tab :title="$t('customTips')"> <van-tab :title="t('customTips')">
<van-pull-refresh <van-pull-refresh
v-model="isLoading" v-model="isLoading"
head-height="80" head-height="80"
@ -72,10 +72,10 @@ export default {
computed: { computed: {
tips() { tips() {
if (this.count) { if (this.count) {
return `${this.$t('text')}: ${this.count}`; return `${this.t('text')}: ${this.count}`;
} }
return this.$t('try'); return this.t('try');
}, },
}, },
@ -96,7 +96,7 @@ export default {
onRefresh(showToast) { onRefresh(showToast) {
setTimeout(() => { setTimeout(() => {
if (showToast) { if (showToast) {
this.$toast(this.$t('success')); this.$toast(this.t('success'));
} }
this.isLoading = false; this.isLoading = false;

54
src/radio/demo/index.vue
View File

@ -1,69 +1,69 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-radio-group v-model="radio1" class="demo-radio-group"> <van-radio-group v-model="radio1" class="demo-radio-group">
<van-radio name="1">{{ $t('radio') }} 1</van-radio> <van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio> <van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('horizontal')"> <demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-radio-group <van-radio-group
v-model="radioHorizontal" v-model="radioHorizontal"
class="demo-radio-group" class="demo-radio-group"
direction="horizontal" direction="horizontal"
> >
<van-radio name="1">{{ $t('radio') }} 1</van-radio> <van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio> <van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-radio-group v-model="radio2" class="demo-radio-group" disabled> <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
<van-radio name="1">{{ $t('radio') }} 1</van-radio> <van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio> <van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('customShape')"> <demo-block :title="t('customShape')">
<van-radio-group v-model="radioShape" class="demo-radio-group"> <van-radio-group v-model="radioShape" class="demo-radio-group">
<van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio> <van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
<van-radio name="2" shape="square">{{ $t('radio') }} 2</van-radio> <van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="t('customColor')">
<van-radio-group v-model="radio3" class="demo-radio-group"> <van-radio-group v-model="radio3" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160"> <van-radio name="1" checked-color="#07c160">
{{ $t('radio') }} 1 {{ t('radio') }} 1
</van-radio> </van-radio>
<van-radio name="2" checked-color="#07c160"> <van-radio name="2" checked-color="#07c160">
{{ $t('radio') }} 2 {{ t('radio') }} 2
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('customIconSize')"> <demo-block :title="t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group"> <van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160" icon-size="24px"> <van-radio name="1" checked-color="#07c160" icon-size="24px">
{{ $t('radio') }} 1 {{ t('radio') }} 1
</van-radio> </van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px"> <van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ $t('radio') }} 2 {{ t('radio') }} 2
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('customIcon')"> <demo-block :title="t('customIcon')">
<van-radio-group v-model="radio4" class="demo-radio-group"> <van-radio-group v-model="radio4" class="demo-radio-group">
<van-radio name="1"> <van-radio name="1">
{{ $t('radio') }} 1 {{ t('radio') }} 1
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" /> <img :src="checked ? icon.active : icon.inactive" />
</template> </template>
</van-radio> </van-radio>
<van-radio name="2"> <van-radio name="2">
{{ $t('radio') }} 2 {{ t('radio') }} 2
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" /> <img :src="checked ? icon.active : icon.inactive" />
</template> </template>
@ -71,20 +71,20 @@
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('disableLabel')"> <demo-block :title="t('disableLabel')">
<van-radio-group v-model="radioLabel" class="demo-radio-group"> <van-radio-group v-model="radioLabel" class="demo-radio-group">
<van-radio name="1" label-disabled>{{ $t('radio') }} 1</van-radio> <van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
<van-radio name="2" label-disabled>{{ $t('radio') }} 2</van-radio> <van-radio name="2" label-disabled>{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('withCell')"> <demo-block :title="t('withCell')">
<van-radio-group v-model="radio5"> <van-radio-group v-model="radio5">
<van-cell-group> <van-cell-group>
<van-cell clickable :title="$t('radio') + 1" @click="radio5 = '1'"> <van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
<van-radio name="1" slot="right-icon" /> <van-radio name="1" slot="right-icon" />
</van-cell> </van-cell>
<van-cell clickable :title="$t('radio') + 2" @click="radio5 = '2'"> <van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
<van-radio name="2" slot="right-icon" /> <van-radio name="2" slot="right-icon" />
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>

18
src/rate/demo/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-rate v-model="value1" /> <van-rate v-model="value1" />
</demo-block> </demo-block>
<demo-block :title="$t('customIcon')"> <demo-block :title="t('customIcon')">
<van-rate v-model="value2" icon="like" void-icon="like-o" /> <van-rate v-model="value2" icon="like" void-icon="like-o" />
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-rate <van-rate
v-model="value3" v-model="value3"
:size="25" :size="25"
@ -18,7 +18,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('halfStar')"> <demo-block :title="t('halfStar')">
<van-rate <van-rate
v-model="value4" v-model="value4"
:size="25" :size="25"
@ -28,19 +28,19 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customCount')"> <demo-block :title="t('customCount')">
<van-rate v-model="value5" :count="6" /> <van-rate v-model="value5" :count="6" />
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-rate v-model="value6" disabled /> <van-rate v-model="value6" disabled />
</demo-block> </demo-block>
<demo-block :title="$t('readonly')"> <demo-block :title="t('readonly')">
<van-rate v-model="value6" readonly /> <van-rate v-model="value6" readonly />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('changeEvent')"> <demo-block v-if="!isWeapp" :title="t('changeEvent')">
<van-rate v-model="value7" @change="onChange" /> <van-rate v-model="value7" @change="onChange" />
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -86,7 +86,7 @@ export default {
methods: { methods: {
onChange(value) { onChange(value) {
this.value7 = value; this.value7 = value;
this.$toast(this.$t('toastContent', value)); this.$toast(this.t('toastContent', value));
}, },
}, },
}; };

30
src/search/demo/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-search v-model="value1" :placeholder="$t('placeholder')" /> <van-search v-model="value1" :placeholder="t('placeholder')" />
</demo-block> </demo-block>
<demo-block :title="$t('listenToEvents')"> <demo-block :title="t('listenToEvents')">
<form action="/"> <form action="/">
<van-search <van-search
v-model="value5" v-model="value5"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
show-action show-action
@search="onSearch" @search="onSearch"
@cancel="onCancel" @cancel="onCancel"
@ -16,37 +16,37 @@
</form> </form>
</demo-block> </demo-block>
<demo-block :title="$t('inputAlign')"> <demo-block :title="t('inputAlign')">
<van-search <van-search
v-model="value4" v-model="value4"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
input-align="center" input-align="center"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-search v-model="value3" :placeholder="$t('placeholder')" disabled /> <van-search v-model="value3" :placeholder="t('placeholder')" disabled />
</demo-block> </demo-block>
<demo-block :title="$t('background')"> <demo-block :title="t('background')">
<van-search <van-search
v-model="value2" v-model="value2"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
shape="round" shape="round"
background="#4fc08d" background="#4fc08d"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customButton')"> <demo-block :title="t('customButton')">
<van-search <van-search
v-model="value6" v-model="value6"
show-action show-action
:label="$t('label')" :label="t('label')"
:placeholder="$t('placeholder')" :placeholder="t('placeholder')"
@search="onSearch" @search="onSearch"
> >
<template #action> <template #action>
<div @click="onSearch">{{ $t('search') }}</div> <div @click="onSearch">{{ t('search') }}</div>
</template> </template>
</van-search> </van-search>
</demo-block> </demo-block>
@ -93,7 +93,7 @@ export default {
}, },
onCancel() { onCancel() {
this.$toast(this.$t('cancel')); this.$toast(this.t('cancel'));
}, },
}, },
}; };

34
src/sidebar/demo/index.vue
View File

@ -2,38 +2,38 @@
<demo-section> <demo-section>
<van-grid :column-num="2" :border="false"> <van-grid :column-num="2" :border="false">
<van-grid-item> <van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('basicUsage') }}</h3> <h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
<van-sidebar v-model="activeKey1"> <van-sidebar v-model="activeKey1">
<van-sidebar-item :title="$t('title')" /> <van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="$t('title')" /> <van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="$t('title')" /> <van-sidebar-item :title="t('title')" />
</van-sidebar> </van-sidebar>
</van-grid-item> </van-grid-item>
<van-grid-item> <van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('showBadge') }}</h3> <h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
<van-sidebar v-model="activeKey2"> <van-sidebar v-model="activeKey2">
<van-sidebar-item :title="$t('title')" dot /> <van-sidebar-item :title="t('title')" dot />
<van-sidebar-item :title="$t('title')" badge="5" /> <van-sidebar-item :title="t('title')" badge="5" />
<van-sidebar-item :title="$t('title')" badge="99+" /> <van-sidebar-item :title="t('title')" badge="99+" />
</van-sidebar> </van-sidebar>
</van-grid-item> </van-grid-item>
<van-grid-item> <van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('disabled') }}</h3> <h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
<van-sidebar v-model="activeKey3"> <van-sidebar v-model="activeKey3">
<van-sidebar-item :title="$t('title')" /> <van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="$t('title')" disabled /> <van-sidebar-item :title="t('title')" disabled />
<van-sidebar-item :title="$t('title')" /> <van-sidebar-item :title="t('title')" />
</van-sidebar> </van-sidebar>
</van-grid-item> </van-grid-item>
<van-grid-item> <van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('changeEvent') }}</h3> <h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
<van-sidebar v-model="activeKey4" @change="onChange"> <van-sidebar v-model="activeKey4" @change="onChange">
<van-sidebar-item :title="$t('title') + 1" /> <van-sidebar-item :title="t('title') + 1" />
<van-sidebar-item :title="$t('title') + 2" /> <van-sidebar-item :title="t('title') + 2" />
<van-sidebar-item :title="$t('title') + 3" /> <van-sidebar-item :title="t('title') + 3" />
</van-sidebar> </van-sidebar>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
@ -71,7 +71,7 @@ export default {
onChange(index) { onChange(index) {
this.$notify({ this.$notify({
type: 'primary', type: 'primary',
message: `${this.$t('selectTip')} ${this.$t('title')}${index + 1}`, message: `${this.t('selectTip')} ${this.t('title')}${index + 1}`,
}); });
}, },
}, },

10
src/skeleton/demo/index.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-skeleton title :row="3" /> <van-skeleton title :row="3" />
</demo-block> </demo-block>
<demo-block :title="$t('showAvatar')"> <demo-block :title="t('showAvatar')">
<van-skeleton title avatar :row="3" /> <van-skeleton title avatar :row="3" />
</demo-block> </demo-block>
<demo-block :title="$t('showChildren')"> <demo-block :title="t('showChildren')">
<van-switch v-model="show" size="24px" /> <van-switch v-model="show" size="24px" />
<van-skeleton title avatar :row="3" :loading="!show"> <van-skeleton title avatar :row="3" :loading="!show">
<div class="demo-preview"> <div class="demo-preview">
<img src="https://img.yzcdn.cn/vant/logo.png" /> <img src="https://img.yzcdn.cn/vant/logo.png" />
<div class="demo-content"> <div class="demo-content">
<h3>{{ $t('title') }}</h3> <h3>{{ t('title') }}</h3>
<p>{{ $t('desc') }}</p> <p>{{ t('desc') }}</p>
</div> </div>
</div> </div>
</van-skeleton> </van-skeleton>

24
src/sku/demo/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<demo-section> <demo-section>
<!-- 基础用法 --> <!-- 基础用法 -->
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<div class="sku-container"> <div class="sku-container">
<van-sku <van-sku
v-model="showBase" v-model="showBase"
@ -24,13 +24,13 @@
@add-cart="onAddCartClicked" @add-cart="onAddCartClicked"
/> />
<van-button block type="primary" @click="showBase = true"> <van-button block type="primary" @click="showBase = true">
{{ $t('basicUsage') }} {{ t('basicUsage') }}
</van-button> </van-button>
</div> </div>
</demo-block> </demo-block>
<!-- 自定义步进器 --> <!-- 自定义步进器 -->
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<div class="sku-container"> <div class="sku-container">
<van-sku <van-sku
v-model="showStepper" v-model="showStepper"
@ -50,13 +50,13 @@
@add-cart="onAddCartClicked" @add-cart="onAddCartClicked"
/> />
<van-button block type="primary" @click="showStepper = true"> <van-button block type="primary" @click="showStepper = true">
{{ $t('title2') }} {{ t('title2') }}
</van-button> </van-button>
</div> </div>
</demo-block> </demo-block>
<!-- 隐藏售罄sku --> <!-- 隐藏售罄sku -->
<demo-block :title="$t('hideSoldoutSku')"> <demo-block :title="t('hideSoldoutSku')">
<div class="sku-container"> <div class="sku-container">
<van-sku <van-sku
v-model="showSoldout" v-model="showSoldout"
@ -77,16 +77,16 @@
@add-cart="onAddCartClicked" @add-cart="onAddCartClicked"
/> />
<van-button block type="primary" @click="showSoldout = true"> <van-button block type="primary" @click="showSoldout = true">
{{ $t('hideSoldoutSku') }} {{ t('hideSoldoutSku') }}
</van-button> </van-button>
</div> </div>
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <demo-block :title="t('advancedUsage')">
<div class="sku-container"> <div class="sku-container">
<van-sku <van-sku
v-model="showCustom" v-model="showCustom"
:stepper-title="$t('stepperTitle')" :stepper-title="t('stepperTitle')"
:sku="skuData.sku" :sku="skuData.sku"
:goods="skuData.goods_info" :goods="skuData.goods_info"
:goods-id="skuData.goods_id" :goods-id="skuData.goods_id"
@ -111,7 +111,7 @@
</template> </template>
<template #sku-actions-top> <template #sku-actions-top>
<div class="van-sku-header-item text-center"> <div class="van-sku-header-item text-center">
{{ $t('actionsTop') }} {{ t('actionsTop') }}
</div> </div>
</template> </template>
<template #sku-actions="{ skuEventBus }"> <template #sku-actions="{ skuEventBus }">
@ -122,7 +122,7 @@
type="warning" type="warning"
@click="onPointClicked" @click="onPointClicked"
> >
{{ $t('button1') }} {{ t('button1') }}
</van-button> </van-button>
<van-button <van-button
square square
@ -130,13 +130,13 @@
type="danger" type="danger"
@click="skuEventBus.$emit('sku:buy')" @click="skuEventBus.$emit('sku:buy')"
> >
{{ $t('button2') }} {{ t('button2') }}
</van-button> </van-button>
</div> </div>
</template> </template>
</van-sku> </van-sku>
<van-button block type="primary" @click="showCustom = true"> <van-button block type="primary" @click="showCustom = true">
{{ $t('advancedUsage') }} {{ t('advancedUsage') }}
</van-button> </van-button>
</div> </div>
</demo-block> </demo-block>

16
src/slider/demo/index.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="t('title1')">
<van-slider v-model="value1" @change="onChange" /> <van-slider v-model="value1" @change="onChange" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-slider v-model="value2" :min="-50" :max="50" @change="onChange" /> <van-slider v-model="value2" :min="-50" :max="50" @change="onChange" />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-slider v-model="value3" disabled /> <van-slider v-model="value3" disabled />
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="t('title4')">
<van-slider v-model="value4" :step="10" @change="onChange" /> <van-slider v-model="value4" :step="10" @change="onChange" />
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-slider <van-slider
v-model="value5" v-model="value5"
bar-height="4px" bar-height="4px"
@ -25,7 +25,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customButton')"> <demo-block :title="t('customButton')">
<van-slider v-model="value6" active-color="#ee0a24"> <van-slider v-model="value6" active-color="#ee0a24">
<template #button> <template #button>
<div class="custom-button">{{ value6 }}</div> <div class="custom-button">{{ value6 }}</div>
@ -33,7 +33,7 @@
</van-slider> </van-slider>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('vertical')"> <demo-block v-if="!isWeapp" :title="t('vertical')">
<div :style="{ height: '120px', paddingLeft: '30px' }"> <div :style="{ height: '120px', paddingLeft: '30px' }">
<van-slider v-model="value7" vertical @change="onChange" /> <van-slider v-model="value7" vertical @change="onChange" />
</div> </div>
@ -80,7 +80,7 @@ export default {
methods: { methods: {
onChange(value) { onChange(value) {
this.$toast(this.$t('text') + value); this.$toast(this.t('text') + value);
}, },
}, },
}; };

18
src/stepper/demo/index.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<demo-section> <demo-section>
<van-cell center :title="$t('basicUsage')"> <van-cell center :title="t('basicUsage')">
<van-stepper v-model="stepper1" /> <van-stepper v-model="stepper1" />
</van-cell> </van-cell>
<van-cell center :title="$t('step')"> <van-cell center :title="t('step')">
<van-stepper v-model="stepper2" step="2" /> <van-stepper v-model="stepper2" step="2" />
</van-cell> </van-cell>
<van-cell center :title="$t('range')"> <van-cell center :title="t('range')">
<van-stepper v-model="stepper3" :min="5" :max="8" /> <van-stepper v-model="stepper3" :min="5" :max="8" />
</van-cell> </van-cell>
<van-cell center :title="$t('integer')"> <van-cell center :title="t('integer')">
<van-stepper v-model="stepper4" integer /> <van-stepper v-model="stepper4" integer />
</van-cell> </van-cell>
<van-cell center :title="$t('disabled')"> <van-cell center :title="t('disabled')">
<van-stepper v-model="stepper5" disabled /> <van-stepper v-model="stepper5" disabled />
</van-cell> </van-cell>
<van-cell center :title="$t('disableInput')"> <van-cell center :title="t('disableInput')">
<van-stepper v-model="disabledInput" disable-input /> <van-stepper v-model="disabledInput" disable-input />
</van-cell> </van-cell>
<van-cell center :title="$t('decimalLength')"> <van-cell center :title="t('decimalLength')">
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" /> <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
</van-cell> </van-cell>
<van-cell center :title="$t('customSize')"> <van-cell center :title="t('customSize')">
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" /> <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
</van-cell> </van-cell>
<van-cell center :title="$t('asyncChange')"> <van-cell center :title="t('asyncChange')">
<van-stepper :value="stepper6" async-change @change="onChange" /> <van-stepper :value="stepper6" async-change @change="onChange" />
</van-cell> </van-cell>
</demo-section> </demo-section>

30
src/steps/demo/index.vue
View File

@ -1,42 +1,42 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-steps :active="active"> <van-steps :active="active">
<van-step>{{ $t('step1') }}</van-step> <van-step>{{ t('step1') }}</van-step>
<van-step>{{ $t('step2') }}</van-step> <van-step>{{ t('step2') }}</van-step>
<van-step>{{ $t('step3') }}</van-step> <van-step>{{ t('step3') }}</van-step>
<van-step>{{ $t('step4') }}</van-step> <van-step>{{ t('step4') }}</van-step>
</van-steps> </van-steps>
<van-button @click="nextStep">{{ $t('nextStep') }}</van-button> <van-button @click="nextStep">{{ t('nextStep') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('customStyle')"> <demo-block :title="t('customStyle')">
<van-steps <van-steps
:active="active" :active="active"
active-icon="success" active-icon="success"
inactive-icon="arrow" inactive-icon="arrow"
active-color="#38f" active-color="#38f"
> >
<van-step>{{ $t('step1') }}</van-step> <van-step>{{ t('step1') }}</van-step>
<van-step>{{ $t('step2') }}</van-step> <van-step>{{ t('step2') }}</van-step>
<van-step>{{ $t('step3') }}</van-step> <van-step>{{ t('step3') }}</van-step>
<van-step>{{ $t('step4') }}</van-step> <van-step>{{ t('step4') }}</van-step>
</van-steps> </van-steps>
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-steps :active="0" direction="vertical"> <van-steps :active="0" direction="vertical">
<van-step> <van-step>
<h3>{{ $t('status1') }}</h3> <h3>{{ t('status1') }}</h3>
<p>2016-07-12 12:40</p> <p>2016-07-12 12:40</p>
</van-step> </van-step>
<van-step> <van-step>
<h3>{{ $t('status2') }}</h3> <h3>{{ t('status2') }}</h3>
<p>2016-07-11 10:00</p> <p>2016-07-11 10:00</p>
</van-step> </van-step>
<van-step> <van-step>
<h3>{{ $t('status3') }}</h3> <h3>{{ t('status3') }}</h3>
<p>2016-07-10 09:30</p> <p>2016-07-10 09:30</p>
</van-step> </van-step>
</van-steps> </van-steps>

12
src/sticky/demo/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-sticky> <van-sticky>
<van-button type="primary" style="margin-left: 15px;"> <van-button type="primary" style="margin-left: 15px;">
{{ $t('basicUsage') }} {{ t('basicUsage') }}
</van-button> </van-button>
</van-sticky> </van-sticky>
</demo-block> </demo-block>
<demo-block :title="$t('offsetTop')"> <demo-block :title="t('offsetTop')">
<van-sticky :offset-top="50"> <van-sticky :offset-top="50">
<van-button type="info" style="margin-left: 115px;"> <van-button type="info" style="margin-left: 115px;">
{{ $t('offsetTop') }} {{ t('offsetTop') }}
</van-button> </van-button>
</van-sticky> </van-sticky>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('setContainer')"> <demo-block v-if="!isWeapp" :title="t('setContainer')">
<div ref="container" style="height: 150px; background-color: #fff;"> <div ref="container" style="height: 150px; background-color: #fff;">
<van-sticky :container="container"> <van-sticky :container="container">
<van-button type="warning" style="margin-left: 215px;"> <van-button type="warning" style="margin-left: 215px;">
{{ $t('setContainer') }} {{ t('setContainer') }}
</van-button> </van-button>
</van-sticky> </van-sticky>
</div> </div>

10
src/style/demo/index.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('ellipsis')"> <demo-block :title="t('ellipsis')">
<div class="van-ellipsis">{{ $t('text1') }}</div> <div class="van-ellipsis">{{ t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ $t('text2') }}</div> <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
</demo-block> </demo-block>
<demo-block :title="$t('hairline')"> <demo-block :title="t('hairline')">
<div class="van-hairline--top" /> <div class="van-hairline--top" />
</demo-block> </demo-block>
<demo-block :title="$t('animation')"> <demo-block :title="t('animation')">
<van-cell is-link title="Fade" @click="animate('van-fade')" /> <van-cell is-link title="Fade" @click="animate('van-fade')" />
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" /> <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" /> <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />

28
src/submit-bar/demo/index.vue
View File

@ -1,44 +1,44 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-submit-bar <van-submit-bar
:price="3050" :price="3050"
:button-text="$t('submit')" :button-text="t('submit')"
@submit="onClickButton" @submit="onClickButton"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-submit-bar <van-submit-bar
disabled disabled
:price="3050" :price="3050"
:button-text="$t('submit')" :button-text="t('submit')"
:tip="$t('tip1')" :tip="t('tip1')"
tip-icon="info-o" tip-icon="info-o"
@submit="onClickButton" @submit="onClickButton"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('loadingStatus')"> <demo-block :title="t('loadingStatus')">
<van-submit-bar <van-submit-bar
loading loading
:price="3050" :price="3050"
:button-text="$t('submit')" :button-text="t('submit')"
@submit="onClickButton" @submit="onClickButton"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <demo-block :title="t('advancedUsage')">
<van-submit-bar <van-submit-bar
:price="3050" :price="3050"
:button-text="$t('submit')" :button-text="t('submit')"
@submit="onClickButton" @submit="onClickButton"
> >
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox> <van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
<template #tip> <template #tip>
{{ $t('tip2') }} {{ t('tip2') }}
<span class="edit-address" @click="onClickLink"> <span class="edit-address" @click="onClickLink">
{{ $t('tip3') }} {{ t('tip3') }}
</span> </span>
</template> </template>
</van-submit-bar> </van-submit-bar>
@ -77,10 +77,10 @@ export default {
methods: { methods: {
onClickButton() { onClickButton() {
this.$toast(this.$t('clickButton')); this.$toast(this.t('clickButton'));
}, },
onClickLink() { onClickLink() {
this.$toast(this.$t('clickLink')); this.$toast(this.t('clickLink'));
}, },
}, },
}; };

36
src/swipe-cell/demo/index.vue
View File

@ -1,30 +1,26 @@
<template> <template>
<div> <div>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-swipe-cell> <van-swipe-cell>
<template #left> <template #left>
<van-button square type="primary" :text="$t('select')" /> <van-button square type="primary" :text="t('select')" />
</template> </template>
<van-cell <van-cell :border="false" :title="t('title')" :value="t('content')" />
:border="false"
:title="$t('title')"
:value="$t('content')"
/>
<template #right> <template #right>
<van-button square type="danger" :text="$t('delete')" /> <van-button square type="danger" :text="t('delete')" />
<van-button square type="primary" :text="$t('collect')" /> <van-button square type="primary" :text="t('collect')" />
</template> </template>
</van-swipe-cell> </van-swipe-cell>
</demo-block> </demo-block>
<demo-block :title="$t('customContent')"> <demo-block :title="t('customContent')">
<van-swipe-cell> <van-swipe-cell>
<van-card <van-card
num="2" num="2"
price="2.00" price="2.00"
:desc="$t('desc')" :desc="t('desc')"
:title="$t('cardTitle')" :title="t('cardTitle')"
:thumb="imageURL" :thumb="imageURL"
/> />
<template #right> <template #right>
@ -32,24 +28,20 @@
square square
type="danger" type="danger"
class="delete-button" class="delete-button"
:text="$t('delete')" :text="t('delete')"
/> />
</template> </template>
</van-swipe-cell> </van-swipe-cell>
</demo-block> </demo-block>
<demo-block :title="$t('beforeClose')"> <demo-block :title="t('beforeClose')">
<van-swipe-cell :before-close="beforeClose"> <van-swipe-cell :before-close="beforeClose">
<template #left> <template #left>
<van-button square type="primary" :text="$t('select')" /> <van-button square type="primary" :text="t('select')" />
</template> </template>
<van-cell <van-cell :border="false" :title="t('title')" :value="t('content')" />
:border="false"
:title="$t('title')"
:value="$t('content')"
/>
<template #right> <template #right>
<van-button square type="danger" :text="$t('delete')" /> <van-button square type="danger" :text="t('delete')" />
</template> </template>
</van-swipe-cell> </van-swipe-cell>
</demo-block> </demo-block>
@ -99,7 +91,7 @@ export default {
case 'right': case 'right':
this.$dialog this.$dialog
.confirm({ .confirm({
message: this.$t('confirm'), message: this.t('confirm'),
}) })
.then(() => { .then(() => {
instance.close(); instance.close();

14
src/swipe/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-swipe :autoplay="3000" indicator-color="white"> <van-swipe :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item> <van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item> <van-swipe-item>2</van-swipe-item>
@ -9,7 +9,7 @@
</van-swipe> </van-swipe>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-swipe :autoplay="3000"> <van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index"> <van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" /> <img v-lazy="image" />
@ -17,7 +17,7 @@
</van-swipe> </van-swipe>
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-swipe indicator-color="white" @change="onChange1"> <van-swipe indicator-color="white" @change="onChange1">
<van-swipe-item>1</van-swipe-item> <van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item> <van-swipe-item>2</van-swipe-item>
@ -26,7 +26,7 @@
</van-swipe> </van-swipe>
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="t('title4')">
<van-swipe <van-swipe
vertical vertical
:autoplay="3000" :autoplay="3000"
@ -41,7 +41,7 @@
</van-swipe> </van-swipe>
</demo-block> </demo-block>
<demo-block :title="$t('title5')"> <demo-block :title="t('title5')">
<van-swipe :width="300" :loop="false" indicator-color="white"> <van-swipe :width="300" :loop="false" indicator-color="white">
<van-swipe-item>1</van-swipe-item> <van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item> <van-swipe-item>2</van-swipe-item>
@ -50,7 +50,7 @@
</van-swipe> </van-swipe>
</demo-block> </demo-block>
<demo-block :title="$t('title6')"> <demo-block :title="t('title6')">
<van-swipe @change="onChange2"> <van-swipe @change="onChange2">
<van-swipe-item>1</van-swipe-item> <van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item> <van-swipe-item>2</van-swipe-item>
@ -100,7 +100,7 @@ export default {
methods: { methods: {
onChange1(index) { onChange1(index) {
this.$toast(this.$t('message') + index); this.$toast(this.t('message') + index);
}, },
onChange2(index) { onChange2(index) {

12
src/switch-cell/demo/index.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell-group> <van-cell-group>
<van-switch-cell v-model="checked" :title="$t('title')" /> <van-switch-cell v-model="checked" :title="t('title')" />
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-cell-group> <van-cell-group>
<van-switch-cell v-model="checked" disabled :title="$t('title')" /> <van-switch-cell v-model="checked" disabled :title="t('title')" />
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
<demo-block :title="$t('loadingStatus')"> <demo-block :title="t('loadingStatus')">
<van-cell-group> <van-cell-group>
<van-switch-cell v-model="checked" loading :title="$t('title')" /> <van-switch-cell v-model="checked" loading :title="t('title')" />
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
</demo-section> </demo-section>

20
src/switch/demo/index.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-switch v-model="checked" /> <van-switch v-model="checked" />
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-switch v-model="checked" disabled /> <van-switch v-model="checked" disabled />
</demo-block> </demo-block>
<demo-block :title="$t('loadingStatus')"> <demo-block :title="t('loadingStatus')">
<van-switch v-model="checked" loading /> <van-switch v-model="checked" loading />
</demo-block> </demo-block>
<demo-block :title="$t('customSize')"> <demo-block :title="t('customSize')">
<van-switch v-model="checked2" size="24px" /> <van-switch v-model="checked2" size="24px" />
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="t('customColor')">
<van-switch <van-switch
v-model="checked3" v-model="checked3"
active-color="#07c160" active-color="#07c160"
@ -24,12 +24,12 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('asyncControl')"> <demo-block :title="t('asyncControl')">
<van-switch :value="checked4" @input="onInput" /> <van-switch :value="checked4" @input="onInput" />
</demo-block> </demo-block>
<demo-block :title="$t('withCell')"> <demo-block :title="t('withCell')">
<van-cell center :title="$t('title')"> <van-cell center :title="t('title')">
<van-switch v-model="checked5" slot="right-icon" size="24" /> <van-switch v-model="checked5" slot="right-icon" size="24" />
</van-cell> </van-cell>
</demo-block> </demo-block>
@ -74,8 +74,8 @@ export default {
onInput(checked) { onInput(checked) {
this.$dialog this.$dialog
.confirm({ .confirm({
title: this.$t('title'), title: this.t('title'),
message: this.$t('message'), message: this.t('message'),
}) })
.then(() => { .then(() => {
this.checked4 = checked; this.checked4 = checked;

78
src/tab/demo/index.vue
View File

@ -1,103 +1,95 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-tabs v-model="active"> <van-tabs v-model="active">
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index"> <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('matchByName')"> <demo-block :title="t('matchByName')">
<van-tabs v-model="activeName"> <van-tabs v-model="activeName">
<van-tab name="a" :title="$t('tab') + 1"> <van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
{{ $t('content') }} 1 <van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
</van-tab> <van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
<van-tab name="b" :title="$t('tab') + 2">
{{ $t('content') }} 2
</van-tab>
<van-tab name="c" :title="$t('tab') + 3">
{{ $t('content') }} 3
</van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-tabs> <van-tabs>
<van-tab v-for="index in 8" :title="$t('tab') + index" :key="index"> <van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-tabs @disabled="onClickDisabled"> <van-tabs @disabled="onClickDisabled">
<van-tab <van-tab
v-for="index in 3" v-for="index in 3"
:title="$t('tab') + index" :title="t('tab') + index"
:disabled="index === 2" :disabled="index === 2"
:key="index" :key="index"
> >
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="t('title4')">
<van-tabs type="card"> <van-tabs type="card">
<van-tab v-for="index in 3" :title="$t('tab') + index" :key="index"> <van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title5')"> <demo-block :title="t('title5')">
<van-tabs @click="onClick"> <van-tabs @click="onClick">
<van-tab v-for="index in 2" :title="$t('tab') + index" :key="index"> <van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title6')"> <demo-block :title="t('title6')">
<van-tabs :active="active" sticky> <van-tabs :active="active" sticky>
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index"> <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('title7')"> <demo-block v-if="!isWeapp" :title="t('title7')">
<van-tabs :active="active"> <van-tabs :active="active">
<van-tab v-for="index in 2" :key="index"> <van-tab v-for="index in 2" :key="index">
<template #title> <template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
<van-icon name="more-o" />{{ $t('tab') }} {{ t('content') }} {{ index }}
</template>
{{ $t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title8')"> <demo-block :title="t('title8')">
<van-tabs animated> <van-tabs animated>
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index"> <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block :title="$t('title9')"> <demo-block :title="t('title9')">
<van-tabs :active="active" swipeable> <van-tabs :active="active" swipeable>
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index"> <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('title10')"> <demo-block v-if="!isWeapp" :title="t('title10')">
<van-tabs scrollspy sticky> <van-tabs scrollspy sticky>
<van-tab :title="$t('tab') + index" v-for="index in 8" :key="index"> <van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
{{ $t('content') }} {{ index }} {{ t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
@ -148,7 +140,7 @@ export default {
methods: { methods: {
onClickDisabled(index, title) { onClickDisabled(index, title) {
this.$toast(title + this.$t('disabled')); this.$toast(title + this.t('disabled'));
}, },
onClick(index, title) { onClick(index, title) {

60
src/tabbar/demo/index.vue
View File

@ -1,76 +1,76 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
<demo-block :title="$t('matchByName')"> <demo-block :title="t('matchByName')">
<van-tabbar v-model="activeName"> <van-tabbar v-model="activeName">
<van-tabbar-item name="home" icon="home-o"> <van-tabbar-item name="home" icon="home-o">
{{ $t('tab') }} {{ t('tab') }}
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item name="search" icon="search"> <van-tabbar-item name="search" icon="search">
{{ $t('tab') }} {{ t('tab') }}
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o"> <van-tabbar-item name="friends" icon="friends-o">
{{ $t('tab') }} {{ t('tab') }}
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o"> <van-tabbar-item name="setting" icon="setting-o">
{{ $t('tab') }} {{ t('tab') }}
</van-tabbar-item> </van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
<demo-block :title="$t('badge')"> <demo-block :title="t('badge')">
<van-tabbar v-model="active2"> <van-tabbar v-model="active2">
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search" dot>{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o" badge="5"> <van-tabbar-item icon="friends-o" badge="5">
{{ $t('tab') }} {{ t('tab') }}
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="20"> <van-tabbar-item icon="setting-o" badge="20">
{{ $t('tab') }} {{ t('tab') }}
</van-tabbar-item> </van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
<demo-block :title="$t('customIcon')"> <demo-block :title="t('customIcon')">
<van-tabbar v-model="active3"> <van-tabbar v-model="active3">
<van-tabbar-item badge="3"> <van-tabbar-item badge="3">
<span>{{ $t('custom') }}</span> <span>{{ t('custom') }}</span>
<template #icon="props"> <template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" /> <img :src="props.active ? icon.active : icon.inactive" />
</template> </template>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="t('customColor')">
<van-tabbar <van-tabbar
v-model="active4" v-model="active4"
active-color="#07c160" active-color="#07c160"
inactive-color="#000" inactive-color="#000"
> >
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
<demo-block :title="$t('switchEvent')"> <demo-block :title="t('switchEvent')">
<van-tabbar v-model="active5" @change="onChange"> <van-tabbar v-model="active5" @change="onChange">
<van-tabbar-item icon="home-o">{{ $t('tab') + 1 }}</van-tabbar-item> <van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') + 2 }}</van-tabbar-item> <van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item> <van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</van-tabbar-item> <van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -116,7 +116,7 @@ export default {
onChange(index) { onChange(index) {
this.$notify({ this.$notify({
type: 'primary', type: 'primary',
message: `${this.$t('selectTip')} ${this.$t('tab')}${index + 1}`, message: `${this.t('selectTip')} ${this.t('tab')}${index + 1}`,
}); });
}, },
}, },

74
src/tag/demo/index.vue
View File

@ -1,52 +1,52 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-tag>{{ $t('tag') }}</van-tag> <van-tag>{{ t('tag') }}</van-tag>
<van-tag type="primary">{{ $t('tag') }}</van-tag> <van-tag type="primary">{{ t('tag') }}</van-tag>
<van-tag type="success">{{ $t('tag') }}</van-tag> <van-tag type="success">{{ t('tag') }}</van-tag>
<van-tag type="danger">{{ $t('tag') }}</van-tag> <van-tag type="danger">{{ t('tag') }}</van-tag>
<van-tag type="warning">{{ $t('tag') }}</van-tag> <van-tag type="warning">{{ t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('round')"> <demo-block :title="t('round')">
<van-tag round>{{ $t('tag') }}</van-tag> <van-tag round>{{ t('tag') }}</van-tag>
<van-tag round type="primary">{{ $t('tag') }}</van-tag> <van-tag round type="primary">{{ t('tag') }}</van-tag>
<van-tag round type="success">{{ $t('tag') }}</van-tag> <van-tag round type="success">{{ t('tag') }}</van-tag>
<van-tag round type="danger">{{ $t('tag') }}</van-tag> <van-tag round type="danger">{{ t('tag') }}</van-tag>
<van-tag round type="warning">{{ $t('tag') }}</van-tag> <van-tag round type="warning">{{ t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('mark')"> <demo-block :title="t('mark')">
<van-tag mark>{{ $t('tag') }}</van-tag> <van-tag mark>{{ t('tag') }}</van-tag>
<van-tag mark type="primary">{{ $t('tag') }}</van-tag> <van-tag mark type="primary">{{ t('tag') }}</van-tag>
<van-tag mark type="success">{{ $t('tag') }}</van-tag> <van-tag mark type="success">{{ t('tag') }}</van-tag>
<van-tag mark type="danger">{{ $t('tag') }}</van-tag> <van-tag mark type="danger">{{ t('tag') }}</van-tag>
<van-tag mark type="warning">{{ $t('tag') }}</van-tag> <van-tag mark type="warning">{{ t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('plain')"> <demo-block :title="t('plain')">
<van-tag plain>{{ $t('tag') }}</van-tag> <van-tag plain>{{ t('tag') }}</van-tag>
<van-tag plain type="primary">{{ $t('tag') }}</van-tag> <van-tag plain type="primary">{{ t('tag') }}</van-tag>
<van-tag plain type="success">{{ $t('tag') }}</van-tag> <van-tag plain type="success">{{ t('tag') }}</van-tag>
<van-tag plain type="danger">{{ $t('tag') }}</van-tag> <van-tag plain type="danger">{{ t('tag') }}</van-tag>
<van-tag plain type="warning">{{ $t('tag') }}</van-tag> <van-tag plain type="warning">{{ t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="t('customColor')">
<van-tag color="#f2826a">{{ $t('tag') }}</van-tag> <van-tag color="#f2826a">{{ t('tag') }}</van-tag>
<van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag> <van-tag color="#f2826a" plain>{{ t('tag') }}</van-tag>
<van-tag color="#7232dd">{{ $t('tag') }}</van-tag> <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
<van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag> <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">{{ $t('tag') }}</van-tag> <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('customSize')"> <demo-block :title="t('customSize')">
<van-tag type="success">{{ $t('tag') }}</van-tag> <van-tag type="success">{{ t('tag') }}</van-tag>
<van-tag type="success" size="medium">{{ $t('tag') }}</van-tag> <van-tag type="success" size="medium">{{ t('tag') }}</van-tag>
<van-tag type="success" size="large">{{ $t('tag') }}</van-tag> <van-tag type="success" size="large">{{ t('tag') }}</van-tag>
</demo-block> </demo-block>
<demo-block :title="$t('closeable')"> <demo-block :title="t('closeable')">
<van-tag <van-tag
v-if="show.primary" v-if="show.primary"
size="medium" size="medium"
@ -54,7 +54,7 @@
type="primary" type="primary"
@close="close('primary')" @close="close('primary')"
> >
{{ $t('tag') }} {{ t('tag') }}
</van-tag> </van-tag>
<van-tag <van-tag
v-if="show.success" v-if="show.success"
@ -63,7 +63,7 @@
type="success" type="success"
@close="close('success')" @close="close('success')"
> >
{{ $t('tag') }} {{ t('tag') }}
</van-tag> </van-tag>
</demo-block> </demo-block>
</demo-section> </demo-section>

46
src/toast/demo/index.vue
View File

@ -1,53 +1,53 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="t('title1')">
<van-button <van-button
type="primary" type="primary"
:text="$t('title1')" :text="t('title1')"
@click="$toast($t('text'))" @click="$toast(t('text'))"
/> />
<van-button <van-button
type="primary" type="primary"
:text="$t('longTextButton')" :text="t('longTextButton')"
@click="$toast($t('longText'))" @click="$toast(t('longText'))"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="t('title2')">
<van-button <van-button
type="primary" type="primary"
:text="$t('title2')" :text="t('title2')"
@click="showLoadingToast()" @click="showLoadingToast()"
/> />
<van-button <van-button
type="primary" type="primary"
:text="$t('loadingType')" :text="t('loadingType')"
@click="showLoadingToast('spinner')" @click="showLoadingToast('spinner')"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="t('title3')">
<van-button type="info" :text="$t('success')" @click="showSuccessToast" /> <van-button type="info" :text="t('success')" @click="showSuccessToast" />
<van-button type="danger" :text="$t('fail')" @click="showFailToast" /> <van-button type="danger" :text="t('fail')" @click="showFailToast" />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('customIcon')"> <demo-block v-if="!isWeapp" :title="t('customIcon')">
<van-button <van-button
type="primary" type="primary"
:text="$t('customIcon')" :text="t('customIcon')"
@click="showIconToast" @click="showIconToast"
/> />
<van-button <van-button
type="primary" type="primary"
:text="$t('customImage')" :text="t('customImage')"
@click="showImageToast" @click="showImageToast"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('updateMessage')"> <demo-block :title="t('updateMessage')">
<van-button <van-button
type="primary" type="primary"
:text="$t('updateMessage')" :text="t('updateMessage')"
@click="showCustomizedToast" @click="showCustomizedToast"
/> />
</demo-block> </demo-block>
@ -98,29 +98,29 @@ export default {
showLoadingToast(loadingType) { showLoadingToast(loadingType) {
this.$toast.loading({ this.$toast.loading({
forbidClick: true, forbidClick: true,
message: this.$t('loading'), message: this.t('loading'),
loadingType, loadingType,
}); });
}, },
showSuccessToast() { showSuccessToast() {
this.$toast.success(this.$t('text2')); this.$toast.success(this.t('text2'));
}, },
showFailToast() { showFailToast() {
this.$toast.fail(this.$t('text3')); this.$toast.fail(this.t('text3'));
}, },
showIconToast() { showIconToast() {
this.$toast({ this.$toast({
message: this.$t('customIcon'), message: this.t('customIcon'),
icon: 'like-o', icon: 'like-o',
}); });
}, },
showImageToast() { showImageToast() {
this.$toast({ this.$toast({
message: this.$t('customImage'), message: this.t('customImage'),
icon: 'https://img.yzcdn.cn/vant/logo.png', icon: 'https://img.yzcdn.cn/vant/logo.png',
}); });
}, },
@ -129,14 +129,14 @@ export default {
const toast = this.$toast.loading({ const toast = this.$toast.loading({
duration: 0, duration: 0,
forbidClick: true, forbidClick: true,
message: this.$t('text4', 3), message: this.t('text4', 3),
}); });
let second = 3; let second = 3;
const timer = setInterval(() => { const timer = setInterval(() => {
second--; second--;
if (second) { if (second) {
toast.message = this.$t('text4', second); toast.message = this.t('text4', second);
} else { } else {
clearInterval(timer); clearInterval(timer);
this.$toast.clear(); this.$toast.clear();

14
src/tree-select/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('radioMode')"> <demo-block :title="t('radioMode')">
<van-tree-select <van-tree-select
:items="items" :items="items"
:active-id.sync="activeId" :active-id.sync="activeId"
@ -8,7 +8,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('multipleMode')"> <demo-block :title="t('multipleMode')">
<van-tree-select <van-tree-select
:items="items" :items="items"
:active-id.sync="activeIds" :active-id.sync="activeIds"
@ -16,7 +16,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customContent')"> <demo-block :title="t('customContent')">
<van-tree-select <van-tree-select
height="55vw" height="55vw"
:items="simpleItems" :items="simpleItems"
@ -35,7 +35,7 @@
</van-tree-select> </van-tree-select>
</demo-block> </demo-block>
<demo-block :title="$t('showBadge')"> <demo-block :title="t('showBadge')">
<van-tree-select <van-tree-select
height="55vw" height="55vw"
:items="badgeItems" :items="badgeItems"
@ -85,15 +85,15 @@ export default {
computed: { computed: {
items() { items() {
return this.$t('data'); return this.t('data');
}, },
simpleItems() { simpleItems() {
return this.$t('dataSimple'); return this.t('dataSimple');
}, },
badgeItems() { badgeItems() {
const data = deepClone(this.$t('data')).slice(0, 2); const data = deepClone(this.t('data')).slice(0, 2);
data[0].dot = true; data[0].dot = true;
data[1].badge = 5; data[1].badge = 5;

26
src/uploader/demo/index.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-uploader :after-read="afterRead" /> <van-uploader :after-read="afterRead" />
</demo-block> </demo-block>
<demo-block :title="$t('preview')"> <demo-block :title="t('preview')">
<van-uploader v-model="fileList" multiple accept="*" /> <van-uploader v-model="fileList" multiple accept="*" />
</demo-block> </demo-block>
<demo-block :title="$t('disabled')"> <demo-block :title="t('disabled')">
<van-uploader :after-read="afterRead" disabled /> <van-uploader :after-read="afterRead" disabled />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="$t('status')"> <demo-block v-if="!isWeapp" :title="t('status')">
<van-uploader v-model="statusFileList" :after-read="afterReadFailed" /> <van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
</demo-block> </demo-block>
<demo-block :title="$t('maxCount')"> <demo-block :title="t('maxCount')">
<van-uploader v-model="fileList2" multiple :max-count="2" /> <van-uploader v-model="fileList2" multiple :max-count="2" />
</demo-block> </demo-block>
<demo-block :title="$t('uploadStyle')"> <demo-block :title="t('uploadStyle')">
<van-uploader> <van-uploader>
<van-button type="primary" icon="photo"> <van-button type="primary" icon="photo">
{{ this.$t('upload') }} {{ this.t('upload') }}
</van-button> </van-button>
</van-uploader> </van-uploader>
</demo-block> </demo-block>
<demo-block :title="$t('beforeRead')"> <demo-block :title="t('beforeRead')">
<van-uploader v-model="fileList3" :before-read="beforeRead" /> <van-uploader v-model="fileList3" :before-read="beforeRead" />
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -80,12 +80,12 @@ export default {
{ {
url: 'https://img.yzcdn.cn/vant/leaf.jpg', url: 'https://img.yzcdn.cn/vant/leaf.jpg',
status: 'uploading', status: 'uploading',
message: this.$t('uploading'), message: this.t('uploading'),
}, },
{ {
url: 'https://img.yzcdn.cn/vant/tree.jpg', url: 'https://img.yzcdn.cn/vant/tree.jpg',
status: 'failed', status: 'failed',
message: this.$t('failed'), message: this.t('failed'),
} }
); );
}, },
@ -93,7 +93,7 @@ export default {
methods: { methods: {
beforeRead(file) { beforeRead(file) {
if (file.type !== 'image/jpeg') { if (file.type !== 'image/jpeg') {
this.$toast(this.$t('invalidType')); this.$toast(this.t('invalidType'));
return false; return false;
} }
@ -106,11 +106,11 @@ export default {
afterReadFailed(item) { afterReadFailed(item) {
item.status = 'uploading'; item.status = 'uploading';
item.message = this.$t('uploading'); item.message = this.t('uploading');
setTimeout(() => { setTimeout(() => {
item.status = 'failed'; item.status = 'failed';
item.message = this.$t('failed'); item.message = this.t('failed');
}, 1000); }, 1000);
}, },
}, },