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
Vue.mixin({
computed: {
$t() {
t() {
const { name } = this.$options;
const { lang = 'zh-CN' } = (this.$route && this.$route.meta) || {};
const prefix = name ? camelize(name) + '.' : '';

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

@ -1,25 +1,25 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" />
<demo-block :title="t('basicUsage')">
<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('showDescription')"
:title="t('showDescription')"
@click="show.description = true"
/>
</demo-block>
<demo-block :title="$t('optionStatus')">
<demo-block :title="t('optionStatus')">
<van-cell
is-link
:title="$t('optionStatus')"
:title="t('optionStatus')"
@click="show.status = true"
/>
</demo-block>
<demo-block :title="$t('customPanel')">
<van-cell is-link :title="$t('customPanel')" @click="show.title = true" />
<demo-block :title="t('customPanel')">
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
</demo-block>
<van-action-sheet
@ -32,14 +32,14 @@
v-model="show.status"
close-on-click-action
:actions="statusActions"
:cancel-text="$t('cancel')"
:cancel-text="t('cancel')"
/>
<van-action-sheet
v-model="show.cancel"
:actions="simpleActions"
close-on-click-action
:cancel-text="$t('cancel')"
:cancel-text="t('cancel')"
@cancel="onCancel"
/>
@ -47,11 +47,11 @@
v-model="show.description"
:actions="simpleActions"
close-on-click-action
:description="$t('description')"
:description="t('description')"
/>
<van-action-sheet v-model="show.title" :title="$t('title')">
<div class="demo-action-sheet-content">{{ $t('content') }}</div>
<van-action-sheet v-model="show.title" :title="t('title')">
<div class="demo-action-sheet-content">{{ t('content') }}</div>
</van-action-sheet>
</demo-section>
</template>
@ -98,17 +98,17 @@ export default {
computed: {
simpleActions() {
return [
{ name: this.$t('option') },
{ name: this.$t('option') },
{ name: this.$t('option'), subname: this.$t('subname') },
{ name: this.t('option') },
{ name: this.t('option') },
{ name: this.t('option'), subname: this.t('subname') },
];
},
statusActions() {
return [
{ name: this.$t('option'), color: GREEN },
{ name: this.t('option'), color: GREEN },
{ 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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-address-edit
:area-list="areaList"
show-postal
@ -8,7 +8,7 @@
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="$t('areaColumnsPlaceholder')"
:area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
@ -65,15 +65,15 @@ export default {
methods: {
onSave() {
this.$toast(this.$t('save'));
this.$toast(this.t('save'));
},
onDelete() {
this.$toast(this.$t('delete'));
this.$toast(this.t('delete'));
},
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-address-list
v-model="chosenAddressId"
:list="$t('list')"
:disabled-list="$t('disabledList')"
:disabled-text="$t('disabledText')"
:default-tag-text="$t('defaultTagText')"
:list="t('list')"
:disabled-list="t('disabledList')"
:disabled-text="t('disabledText')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
/>
@ -85,11 +85,11 @@ export default {
methods: {
onAdd() {
this.$toast(this.$t('add'));
this.$toast(this.t('add'));
},
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-area :area-list="$t('areaList')" />
<demo-block :title="t('basicUsage')">
<van-area :area-list="t('areaList')" />
</demo-block>
<demo-block :title="$t('title2')">
<van-area :area-list="$t('areaList')" :value="value" />
<demo-block :title="t('title2')">
<van-area :area-list="t('areaList')" :value="value" />
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="t('title3')">
<van-area
:area-list="$t('areaList')"
:area-list="t('areaList')"
:columns-num="2"
:title="$t('title')"
:title="t('title')"
/>
</demo-block>
<demo-block :title="$t('title4')">
<demo-block :title="t('title4')">
<van-area
:area-list="$t('areaList')"
:columns-placeholder="$t('columnsPlaceholder')"
:title="$t('title')"
:area-list="t('areaList')"
:columns-placeholder="t('columnsPlaceholder')"
:title="t('title')"
/>
</demo-block>
</demo-section>

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

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

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

@ -1,91 +1,91 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-cell
is-link
:title="$t('selectSingle')"
:title="t('selectSingle')"
:value="formatFullDate(date.selectSingle)"
@click="show('single', 'selectSingle')"
/>
<van-cell
is-link
:title="$t('selectMultiple')"
:title="t('selectMultiple')"
:value="formatMultiple(date.selectMultiple)"
@click="show('multiple', 'selectMultiple')"
/>
<van-cell
is-link
:title="$t('selectRange')"
:title="t('selectRange')"
:value="formatRange(date.selectRange)"
@click="show('range', 'selectRange')"
/>
</demo-block>
<demo-block :title="$t('quickSelect')">
<demo-block :title="t('quickSelect')">
<van-cell
is-link
:title="$t('selectSingle')"
:title="t('selectSingle')"
:value="formatFullDate(date.quickSelect1)"
@click="show('single', 'quickSelect1')"
/>
<van-cell
is-link
:title="$t('selectRange')"
:title="t('selectRange')"
:value="formatRange(date.quickSelect2)"
@click="show('range', 'quickSelect2')"
/>
</demo-block>
<demo-block :title="$t('customCalendar')">
<demo-block :title="t('customCalendar')">
<van-cell
is-link
:title="$t('customColor')"
:title="t('customColor')"
:value="formatRange(date.customColor)"
@click="show('range', 'customColor')"
/>
<van-cell
is-link
:title="$t('customRange')"
:title="t('customRange')"
:value="formatFullDate(date.customRange)"
@click="show('single', 'customRange')"
/>
<van-cell
is-link
:title="$t('customConfirm')"
:title="t('customConfirm')"
:value="formatRange(date.customConfirm)"
@click="show('range', 'customConfirm')"
/>
<van-cell
is-link
:title="$t('customDayText')"
:title="t('customDayText')"
:value="formatRange(date.customDayText)"
@click="show('range', 'customDayText')"
/>
<van-cell
is-link
:title="$t('customPosition')"
:title="t('customPosition')"
:value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')"
/>
<van-cell
is-link
:title="$t('maxRange')"
:title="t('maxRange')"
:value="formatRange(date.maxRange)"
@click="show('range', 'maxRange')"
/>
</demo-block>
<demo-block :title="$t('tiledDisplay')">
<demo-block :title="t('tiledDisplay')">
<van-calendar
:title="$t('calendar')"
:title="t('calendar')"
:poppable="false"
:show-confirm="false"
:min-date="tiledMinDate"
@ -226,8 +226,8 @@ export default {
this.color = GREEN;
break;
case 'customConfirm':
this.confirmText = this.$t('confirmText');
this.confirmDisabledText = this.$t('confirmDisabledText');
this.confirmText = this.t('confirmText');
this.confirmDisabledText = this.t('confirmDisabledText');
break;
case 'customRange':
this.minDate = new Date(2010, 0, 1);
@ -254,18 +254,18 @@ export default {
if (month === 5) {
if (date === 1) {
day.topInfo = this.$t('laborDay');
day.topInfo = this.t('laborDay');
} else if (date === 4) {
day.topInfo = this.$t('youthDay');
day.topInfo = this.t('youthDay');
} else if (date === 11) {
day.text = this.$t('today');
day.text = this.t('today');
}
}
if (day.type === 'start') {
day.bottomInfo = this.$t('in');
day.bottomInfo = this.t('in');
} else if (day.type === 'end') {
day.bottomInfo = this.$t('out');
day.bottomInfo = this.t('out');
}
return day;
@ -285,7 +285,7 @@ export default {
formatMultiple(dates) {
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-card
num="2"
price="2.00"
:desc="$t('desc')"
:title="$t('title')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="$t('discountInfo')">
<demo-block :title="t('discountInfo')">
<van-card
num="2"
price="2.00"
origin-price="10.00"
:tag="$t('tag')"
:desc="$t('desc')"
:title="$t('title')"
:tag="t('tag')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="$t('customContent')">
<demo-block :title="t('customContent')">
<van-card
num="2"
price="2.00"
:desc="$t('desc')"
:title="$t('title')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
>
<template #tags>
@ -44,10 +44,10 @@
<template #footer>
<div>
<van-button round size="mini">
{{ $t('button') }}
{{ t('button') }}
</van-button>
<van-button round size="mini">
{{ $t('button') }}
{{ t('button') }}
</van-button>
</div>
</template>

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
@ -21,7 +21,7 @@
</van-row>
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="t('title2')">
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
@ -29,7 +29,7 @@
</van-row>
</demo-block>
<demo-block v-if="!isWeapp" :title="$t('title3')">
<demo-block v-if="!isWeapp" :title="t('title3')">
<van-row type="flex">
<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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-collapse v-model="active1">
<van-collapse-item :title="$t('title') + 1">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 2">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 3" disabled>
{{ $t('text') }}
<van-collapse-item :title="t('title') + 3" disabled>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="$t('accordion')">
<demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion>
<van-collapse-item :title="$t('title') + 1">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 2">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 3">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="$t('titleSlot')">
<demo-block :title="t('titleSlot')">
<van-collapse v-model="active3">
<van-collapse-item>
<template #title>
{{ $t('title') + 1 }}<van-icon name="question-o" />
{{ t('title') + 1 }}<van-icon name="question-o" />
</template>
{{ $t('text') }}
{{ t('text') }}
</van-collapse-item>
<van-collapse-item
:title="$t('title') + 2"
:value="$t('content')"
:title="t('title') + 2"
:value="t('content')"
icon="shop-o"
>
{{ $t('text') }}
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,8 +1,8 @@
<template>
<demo-section>
<van-tabs v-model="tab" sticky :color="BLUE">
<van-tab :title="$t('demo')">
<demo-block :title="$t('basicUsage')">
<van-tab :title="t('demo')">
<demo-block :title="t('basicUsage')">
<van-col span="6" @click="copy(demoIcon)">
<van-icon :name="demoIcon" />
</van-col>
@ -11,7 +11,7 @@
</van-col>
</demo-block>
<demo-block :title="$t('badge')">
<demo-block :title="t('badge')">
<van-col span="6" @click="copy(demoIcon, { dot: true })">
<van-icon :name="demoIcon" dot />
</van-col>
@ -23,7 +23,7 @@
</van-col>
</demo-block>
<demo-block :title="$t('color')">
<demo-block :title="t('color')">
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" />
</van-col>
@ -32,7 +32,7 @@
</van-col>
</demo-block>
<demo-block :title="$t('size')">
<demo-block :title="t('size')">
<van-col span="6" @click="copy(demoIcon, { size: '40' })">
<van-icon :name="demoIcon" size="40" />
</van-col>
@ -42,7 +42,7 @@
</demo-block>
</van-tab>
<van-tab :title="$t('basic')">
<van-tab :title="t('basic')">
<van-col
v-for="icon in icons.basic"
:key="icon"
@ -54,7 +54,7 @@
</van-col>
</van-tab>
<van-tab :title="$t('outline')">
<van-tab :title="t('outline')">
<van-col
v-for="icon in icons.outline"
:key="icon"
@ -66,7 +66,7 @@
</van-col>
</van-tab>
<van-tab :title="$t('filled')">
<van-tab :title="t('filled')">
<van-col
v-for="icon in icons.filled"
:key="icon"
@ -168,7 +168,7 @@ export default {
type: 'success',
duration: 1500,
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-button type="primary" @click="showImagePreview">
{{ $t('button1') }}
{{ t('button1') }}
</van-button>
</demo-block>
<demo-block :title="$t('button2')">
<demo-block :title="t('button2')">
<van-button type="primary" @click="showImagePreview(1)">
{{ $t('button2') }}
{{ t('button2') }}
</van-button>
</demo-block>
<demo-block :title="$t('button4')">
<demo-block :title="t('button4')">
<van-button type="primary" @click="showImagePreview(0, 0, true)">
{{ $t('button4') }}
{{ t('button4') }}
</van-button>
</demo-block>
<demo-block :title="$t('button3')">
<demo-block :title="t('button3')">
<van-button type="primary" @click="showImagePreview(0, 3000)">
{{ $t('button3') }}
{{ t('button3') }}
</van-button>
</demo-block>
<demo-block :title="$t('componentCall')">
<demo-block :title="t('componentCall')">
<van-button type="primary" @click="componentCall">
{{ $t('componentCall') }}
{{ t('componentCall') }}
</van-button>
<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>
</demo-block>
</demo-section>

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

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

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

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

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

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

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

@ -1,35 +1,35 @@
<template>
<demo-section>
<van-tabs>
<van-tab :title="$t('basicUsage')">
<van-tab :title="t('basicUsage')">
<van-list
v-model="list[0].loading"
:finished="list[0].finished"
:finished-text="$t('finishedText')"
:finished-text="t('finishedText')"
@load="onLoad(0)"
>
<van-cell v-for="item in list[0].items" :key="item" :title="item" />
</van-list>
</van-tab>
<van-tab :title="$t('errorInfo')">
<van-tab :title="t('errorInfo')">
<van-list
v-model="list[1].loading"
:finished="list[1].finished"
:error.sync="list[1].error"
:error-text="$t('errorText')"
:error-text="t('errorText')"
@load="onLoad(1)"
>
<van-cell v-for="item in list[1].items" :key="item" :title="item" />
</van-list>
</van-tab>
<van-tab :title="$t('pullRefresh')">
<van-tab :title="t('pullRefresh')">
<van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
<van-list
v-model="list[2].loading"
:finished="list[2].finished"
:finished-text="$t('finishedText')"
:finished-text="t('finishedText')"
@load="onLoad(2)"
>
<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>
<demo-section>
<demo-block :title="$t('type')">
<demo-block :title="t('type')">
<van-loading />
<van-loading type="spinner" />
</demo-block>
<demo-block :title="$t('color')">
<demo-block :title="t('color')">
<van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
</demo-block>
<demo-block :title="$t('size')">
<demo-block :title="t('size')">
<van-loading size="24" />
<van-loading type="spinner" size="24" />
</demo-block>
<demo-block :title="$t('text')">
<demo-block :title="t('text')">
<van-loading size="24px">
{{ $t('loading') }}
{{ t('loading') }}
</van-loading>
</demo-block>
<demo-block :title="$t('vertical')">
<demo-block :title="t('vertical')">
<van-loading size="24px" vertical>
{{ $t('loading') }}
{{ t('loading') }}
</van-loading>
</demo-block>
</demo-section>

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

@ -1,18 +1,18 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-nav-bar
:title="$t('title')"
:left-text="$t('back')"
:right-text="$t('button')"
:title="t('title')"
:left-text="t('back')"
:right-text="t('button')"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
</demo-block>
<demo-block :title="$t('advancedUsage')">
<van-nav-bar :title="$t('title')" :left-text="$t('back')" left-arrow>
<demo-block :title="t('advancedUsage')">
<van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
<template #right>
<van-icon name="search" />
</template>
@ -25,10 +25,10 @@
export default {
methods: {
onClickLeft() {
this.$toast(this.$t('back'));
this.$toast(this.t('back'));
},
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-notice-bar :text="$t('text')" left-icon="volume-o" />
<demo-block :title="t('basicUsage')">
<van-notice-bar :text="t('text')" left-icon="volume-o" />
</demo-block>
<demo-block :title="$t('unscrollable')">
<van-notice-bar :scrollable="false" :text="$t('text')" />
<demo-block :title="t('unscrollable')">
<van-notice-bar :scrollable="false" :text="t('text')" />
</demo-block>
<demo-block :title="$t('wrapable')">
<van-notice-bar wrapable :scrollable="false" :text="$t('text')" />
<demo-block :title="t('wrapable')">
<van-notice-bar wrapable :scrollable="false" :text="t('text')" />
</demo-block>
<demo-block :title="$t('mode')">
<van-notice-bar mode="closeable" :text="$t('text')" />
<van-notice-bar mode="link" :text="$t('text')" />
<demo-block :title="t('mode')">
<van-notice-bar mode="closeable" :text="t('text')" />
<van-notice-bar mode="link" :text="t('text')" />
</demo-block>
<demo-block :title="$t('customStyle')">
<demo-block :title="t('customStyle')">
<van-notice-bar
:text="$t('text')"
:text="t('text')"
color="#1989fa"
background="#ecf9ff"
left-icon="info-o"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,27 +1,27 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-progress :percentage="50" />
</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" />
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="t('title2')">
<van-progress inactive :percentage="50" />
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="t('title3')">
<van-progress
color="#f2826a"
: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
:percentage="75"
:pivot-text="$t('purple')"
:pivot-text="t('purple')"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>

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

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

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

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

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

@ -1,14 +1,14 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-rate v-model="value1" />
</demo-block>
<demo-block :title="$t('customIcon')">
<demo-block :title="t('customIcon')">
<van-rate v-model="value2" icon="like" void-icon="like-o" />
</demo-block>
<demo-block :title="$t('customStyle')">
<demo-block :title="t('customStyle')">
<van-rate
v-model="value3"
:size="25"
@ -18,7 +18,7 @@
/>
</demo-block>
<demo-block :title="$t('halfStar')">
<demo-block :title="t('halfStar')">
<van-rate
v-model="value4"
:size="25"
@ -28,19 +28,19 @@
/>
</demo-block>
<demo-block :title="$t('customCount')">
<demo-block :title="t('customCount')">
<van-rate v-model="value5" :count="6" />
</demo-block>
<demo-block :title="$t('disabled')">
<demo-block :title="t('disabled')">
<van-rate v-model="value6" disabled />
</demo-block>
<demo-block :title="$t('readonly')">
<demo-block :title="t('readonly')">
<van-rate v-model="value6" readonly />
</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" />
</demo-block>
</demo-section>
@ -86,7 +86,7 @@ export default {
methods: {
onChange(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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-search v-model="value1" :placeholder="$t('placeholder')" />
<demo-block :title="t('basicUsage')">
<van-search v-model="value1" :placeholder="t('placeholder')" />
</demo-block>
<demo-block :title="$t('listenToEvents')">
<demo-block :title="t('listenToEvents')">
<form action="/">
<van-search
v-model="value5"
:placeholder="$t('placeholder')"
:placeholder="t('placeholder')"
show-action
@search="onSearch"
@cancel="onCancel"
@ -16,37 +16,37 @@
</form>
</demo-block>
<demo-block :title="$t('inputAlign')">
<demo-block :title="t('inputAlign')">
<van-search
v-model="value4"
:placeholder="$t('placeholder')"
:placeholder="t('placeholder')"
input-align="center"
/>
</demo-block>
<demo-block :title="$t('disabled')">
<van-search v-model="value3" :placeholder="$t('placeholder')" disabled />
<demo-block :title="t('disabled')">
<van-search v-model="value3" :placeholder="t('placeholder')" disabled />
</demo-block>
<demo-block :title="$t('background')">
<demo-block :title="t('background')">
<van-search
v-model="value2"
:placeholder="$t('placeholder')"
:placeholder="t('placeholder')"
shape="round"
background="#4fc08d"
/>
</demo-block>
<demo-block :title="$t('customButton')">
<demo-block :title="t('customButton')">
<van-search
v-model="value6"
show-action
:label="$t('label')"
:placeholder="$t('placeholder')"
:label="t('label')"
:placeholder="t('placeholder')"
@search="onSearch"
>
<template #action>
<div @click="onSearch">{{ $t('search') }}</div>
<div @click="onSearch">{{ t('search') }}</div>
</template>
</van-search>
</demo-block>
@ -93,7 +93,7 @@ export default {
},
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>
<van-grid :column-num="2" :border="false">
<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-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-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-item :title="$t('title')" dot />
<van-sidebar-item :title="$t('title')" badge="5" />
<van-sidebar-item :title="$t('title')" badge="99+" />
<van-sidebar-item :title="t('title')" dot />
<van-sidebar-item :title="t('title')" badge="5" />
<van-sidebar-item :title="t('title')" badge="99+" />
</van-sidebar>
</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-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" disabled />
<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')" />
</van-sidebar>
</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-item :title="$t('title') + 1" />
<van-sidebar-item :title="$t('title') + 2" />
<van-sidebar-item :title="$t('title') + 3" />
<van-sidebar-item :title="t('title') + 1" />
<van-sidebar-item :title="t('title') + 2" />
<van-sidebar-item :title="t('title') + 3" />
</van-sidebar>
</van-grid-item>
</van-grid>
@ -71,7 +71,7 @@ export default {
onChange(index) {
this.$notify({
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-skeleton title :row="3" />
</demo-block>
<demo-block :title="$t('showAvatar')">
<demo-block :title="t('showAvatar')">
<van-skeleton title avatar :row="3" />
</demo-block>
<demo-block :title="$t('showChildren')">
<demo-block :title="t('showChildren')">
<van-switch v-model="show" size="24px" />
<van-skeleton title avatar :row="3" :loading="!show">
<div class="demo-preview">
<img src="https://img.yzcdn.cn/vant/logo.png" />
<div class="demo-content">
<h3>{{ $t('title') }}</h3>
<p>{{ $t('desc') }}</p>
<h3>{{ t('title') }}</h3>
<p>{{ t('desc') }}</p>
</div>
</div>
</van-skeleton>

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

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

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

@ -1,22 +1,22 @@
<template>
<demo-section>
<demo-block :title="$t('title1')">
<demo-block :title="t('title1')">
<van-slider v-model="value1" @change="onChange" />
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="t('title2')">
<van-slider v-model="value2" :min="-50" :max="50" @change="onChange" />
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="t('title3')">
<van-slider v-model="value3" disabled />
</demo-block>
<demo-block :title="$t('title4')">
<demo-block :title="t('title4')">
<van-slider v-model="value4" :step="10" @change="onChange" />
</demo-block>
<demo-block :title="$t('customStyle')">
<demo-block :title="t('customStyle')">
<van-slider
v-model="value5"
bar-height="4px"
@ -25,7 +25,7 @@
/>
</demo-block>
<demo-block :title="$t('customButton')">
<demo-block :title="t('customButton')">
<van-slider v-model="value6" active-color="#ee0a24">
<template #button>
<div class="custom-button">{{ value6 }}</div>
@ -33,7 +33,7 @@
</van-slider>
</demo-block>
<demo-block v-if="!isWeapp" :title="$t('vertical')">
<demo-block v-if="!isWeapp" :title="t('vertical')">
<div :style="{ height: '120px', paddingLeft: '30px' }">
<van-slider v-model="value7" vertical @change="onChange" />
</div>
@ -80,7 +80,7 @@ export default {
methods: {
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>
<demo-section>
<van-cell center :title="$t('basicUsage')">
<van-cell center :title="t('basicUsage')">
<van-stepper v-model="stepper1" />
</van-cell>
<van-cell center :title="$t('step')">
<van-cell center :title="t('step')">
<van-stepper v-model="stepper2" step="2" />
</van-cell>
<van-cell center :title="$t('range')">
<van-cell center :title="t('range')">
<van-stepper v-model="stepper3" :min="5" :max="8" />
</van-cell>
<van-cell center :title="$t('integer')">
<van-cell center :title="t('integer')">
<van-stepper v-model="stepper4" integer />
</van-cell>
<van-cell center :title="$t('disabled')">
<van-cell center :title="t('disabled')">
<van-stepper v-model="stepper5" disabled />
</van-cell>
<van-cell center :title="$t('disableInput')">
<van-cell center :title="t('disableInput')">
<van-stepper v-model="disabledInput" disable-input />
</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-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-cell>
<van-cell center :title="$t('asyncChange')">
<van-cell center :title="t('asyncChange')">
<van-stepper :value="stepper6" async-change @change="onChange" />
</van-cell>
</demo-section>

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

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

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

@ -1,26 +1,26 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-sticky>
<van-button type="primary" style="margin-left: 15px;">
{{ $t('basicUsage') }}
{{ t('basicUsage') }}
</van-button>
</van-sticky>
</demo-block>
<demo-block :title="$t('offsetTop')">
<demo-block :title="t('offsetTop')">
<van-sticky :offset-top="50">
<van-button type="info" style="margin-left: 115px;">
{{ $t('offsetTop') }}
{{ t('offsetTop') }}
</van-button>
</van-sticky>
</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;">
<van-sticky :container="container">
<van-button type="warning" style="margin-left: 215px;">
{{ $t('setContainer') }}
{{ t('setContainer') }}
</van-button>
</van-sticky>
</div>

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

@ -1,15 +1,15 @@
<template>
<demo-section>
<demo-block :title="$t('ellipsis')">
<div class="van-ellipsis">{{ $t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ $t('text2') }}</div>
<demo-block :title="t('ellipsis')">
<div class="van-ellipsis">{{ t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
</demo-block>
<demo-block :title="$t('hairline')">
<demo-block :title="t('hairline')">
<div class="van-hairline--top" />
</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="Slide Up" @click="animate('van-slide-up')" />
<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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-submit-bar
:price="3050"
:button-text="$t('submit')"
:button-text="t('submit')"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="$t('disabled')">
<demo-block :title="t('disabled')">
<van-submit-bar
disabled
:price="3050"
:button-text="$t('submit')"
:tip="$t('tip1')"
:button-text="t('submit')"
:tip="t('tip1')"
tip-icon="info-o"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="$t('loadingStatus')">
<demo-block :title="t('loadingStatus')">
<van-submit-bar
loading
:price="3050"
:button-text="$t('submit')"
:button-text="t('submit')"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="$t('advancedUsage')">
<demo-block :title="t('advancedUsage')">
<van-submit-bar
:price="3050"
:button-text="$t('submit')"
:button-text="t('submit')"
@submit="onClickButton"
>
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
<van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
<template #tip>
{{ $t('tip2') }}
{{ t('tip2') }}
<span class="edit-address" @click="onClickLink">
{{ $t('tip3') }}
{{ t('tip3') }}
</span>
</template>
</van-submit-bar>
@ -77,10 +77,10 @@ export default {
methods: {
onClickButton() {
this.$toast(this.$t('clickButton'));
this.$toast(this.t('clickButton'));
},
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>
<div>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-swipe-cell>
<template #left>
<van-button square type="primary" :text="$t('select')" />
<van-button square type="primary" :text="t('select')" />
</template>
<van-cell
:border="false"
:title="$t('title')"
:value="$t('content')"
/>
<van-cell :border="false" :title="t('title')" :value="t('content')" />
<template #right>
<van-button square type="danger" :text="$t('delete')" />
<van-button square type="primary" :text="$t('collect')" />
<van-button square type="danger" :text="t('delete')" />
<van-button square type="primary" :text="t('collect')" />
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="$t('customContent')">
<demo-block :title="t('customContent')">
<van-swipe-cell>
<van-card
num="2"
price="2.00"
:desc="$t('desc')"
:title="$t('cardTitle')"
:desc="t('desc')"
:title="t('cardTitle')"
:thumb="imageURL"
/>
<template #right>
@ -32,24 +28,20 @@
square
type="danger"
class="delete-button"
:text="$t('delete')"
:text="t('delete')"
/>
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="$t('beforeClose')">
<demo-block :title="t('beforeClose')">
<van-swipe-cell :before-close="beforeClose">
<template #left>
<van-button square type="primary" :text="$t('select')" />
<van-button square type="primary" :text="t('select')" />
</template>
<van-cell
:border="false"
:title="$t('title')"
:value="$t('content')"
/>
<van-cell :border="false" :title="t('title')" :value="t('content')" />
<template #right>
<van-button square type="danger" :text="$t('delete')" />
<van-button square type="danger" :text="t('delete')" />
</template>
</van-swipe-cell>
</demo-block>
@ -99,7 +91,7 @@ export default {
case 'right':
this.$dialog
.confirm({
message: this.$t('confirm'),
message: this.t('confirm'),
})
.then(() => {
instance.close();

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

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

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

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

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

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

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

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

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

@ -1,76 +1,76 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-tabbar v-model="active">
<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="friends-o">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-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="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('matchByName')">
<demo-block :title="t('matchByName')">
<van-tabbar v-model="activeName">
<van-tabbar-item name="home" icon="home-o">
{{ $t('tab') }}
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="search" icon="search">
{{ $t('tab') }}
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">
{{ $t('tab') }}
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">
{{ $t('tab') }}
{{ t('tab') }}
</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('badge')">
<demo-block :title="t('badge')">
<van-tabbar v-model="active2">
<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="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o" badge="5">
{{ $t('tab') }}
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="20">
{{ $t('tab') }}
{{ t('tab') }}
</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('customIcon')">
<demo-block :title="t('customIcon')">
<van-tabbar v-model="active3">
<van-tabbar-item badge="3">
<span>{{ $t('custom') }}</span>
<span>{{ t('custom') }}</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</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="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('customColor')">
<demo-block :title="t('customColor')">
<van-tabbar
v-model="active4"
active-color="#07c160"
inactive-color="#000"
>
<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="friends-o">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-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="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('switchEvent')">
<demo-block :title="t('switchEvent')">
<van-tabbar v-model="active5" @change="onChange">
<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="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</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="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
</van-tabbar>
</demo-block>
</demo-section>
@ -116,7 +116,7 @@ export default {
onChange(index) {
this.$notify({
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>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-tag>{{ $t('tag') }}</van-tag>
<van-tag type="primary">{{ $t('tag') }}</van-tag>
<van-tag type="success">{{ $t('tag') }}</van-tag>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
<van-tag type="warning">{{ $t('tag') }}</van-tag>
<demo-block :title="t('basicUsage')">
<van-tag>{{ t('tag') }}</van-tag>
<van-tag type="primary">{{ t('tag') }}</van-tag>
<van-tag type="success">{{ t('tag') }}</van-tag>
<van-tag type="danger">{{ t('tag') }}</van-tag>
<van-tag type="warning">{{ t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('round')">
<van-tag round>{{ $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="danger">{{ $t('tag') }}</van-tag>
<van-tag round type="warning">{{ $t('tag') }}</van-tag>
<demo-block :title="t('round')">
<van-tag round>{{ 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="danger">{{ t('tag') }}</van-tag>
<van-tag round type="warning">{{ t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('mark')">
<van-tag mark>{{ $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="danger">{{ $t('tag') }}</van-tag>
<van-tag mark type="warning">{{ $t('tag') }}</van-tag>
<demo-block :title="t('mark')">
<van-tag mark>{{ 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="danger">{{ t('tag') }}</van-tag>
<van-tag mark type="warning">{{ t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('plain')">
<van-tag plain>{{ $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="danger">{{ $t('tag') }}</van-tag>
<van-tag plain type="warning">{{ $t('tag') }}</van-tag>
<demo-block :title="t('plain')">
<van-tag plain>{{ 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="danger">{{ t('tag') }}</van-tag>
<van-tag plain type="warning">{{ t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('customColor')">
<van-tag color="#f2826a">{{ $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" plain>{{ $t('tag') }}</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">{{ $t('tag') }}</van-tag>
<demo-block :title="t('customColor')">
<van-tag color="#f2826a">{{ 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" plain>{{ t('tag') }}</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('customSize')">
<van-tag type="success">{{ $t('tag') }}</van-tag>
<van-tag type="success" size="medium">{{ $t('tag') }}</van-tag>
<van-tag type="success" size="large">{{ $t('tag') }}</van-tag>
<demo-block :title="t('customSize')">
<van-tag type="success">{{ t('tag') }}</van-tag>
<van-tag type="success" size="medium">{{ t('tag') }}</van-tag>
<van-tag type="success" size="large">{{ t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('closeable')">
<demo-block :title="t('closeable')">
<van-tag
v-if="show.primary"
size="medium"
@ -54,7 +54,7 @@
type="primary"
@close="close('primary')"
>
{{ $t('tag') }}
{{ t('tag') }}
</van-tag>
<van-tag
v-if="show.success"
@ -63,7 +63,7 @@
type="success"
@close="close('success')"
>
{{ $t('tag') }}
{{ t('tag') }}
</van-tag>
</demo-block>
</demo-section>

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

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

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

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

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

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