blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

refactor: demo using script setup (#9235)

Browse Source
This commit is contained in:
neverland 2021-08-11 10:55:10 +08:00 committed by GitHub
parent 010238b63c
commit 4c41908ac1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
86 changed files with 4277 additions and 5151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/action-bar/demo/index.vue
View File

@ -1,3 +1,41 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
icon1: '客服',
icon2: '购物车',
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
iconBadge: '徽标提示',
collected: '已收藏',
clickIcon: '点击图标',
clickButton: '点击按钮',
customIconColor: '自定义图标颜色',
customButtonColor: '自定义按钮颜色',
},
'en-US': {
icon1: 'Icon1',
icon2: 'Icon2',
icon3: 'Icon3',
button1: 'Button',
button2: 'Button',
iconBadge: 'Icon Badge',
collected: 'Collected',
clickIcon: 'Click Icon',
clickButton: 'Click Button',
customIconColor: 'Custom Icon Color',
customButtonColor: 'Custom Button Color',
},
};
const t = useTranslate(i18n);
const onClickIcon = () => Toast(t('clickIcon'));
const onClickButton = () => Toast(t('clickButton'));
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-action-bar> <van-action-bar>
@ -62,53 +100,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
icon1: '客服',
icon2: '购物车',
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
iconBadge: '徽标提示',
collected: '已收藏',
clickIcon: '点击图标',
clickButton: '点击按钮',
customIconColor: '自定义图标颜色',
customButtonColor: '自定义按钮颜色',
},
'en-US': {
icon1: 'Icon1',
icon2: 'Icon2',
icon3: 'Icon3',
button1: 'Button',
button2: 'Button',
iconBadge: 'Icon Badge',
collected: 'Collected',
clickIcon: 'Click Icon',
clickButton: 'Click Button',
customIconColor: 'Custom Icon Color',
customButtonColor: 'Custom Button Color',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const onClickIcon = () => Toast(t('clickIcon'));
const onClickButton = () => Toast(t('clickButton'));
return {
t,
onClickIcon,
onClickButton,
};
},
};
</script>
<style lang="less"> <style lang="less">
.demo-action-bar { .demo-action-bar {
.van-action-bar { .van-action-bar {

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

@ -1,3 +1,75 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ActionSheetAction } from '..';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
option1: '选项一',
option2: '选项二',
option3: '选项三',
subname: '描述信息',
showCancel: '展示取消按钮',
buttonText: '弹出菜单',
customPanel: '自定义面板',
description: '这是一段描述信息',
optionStatus: '选项状态',
coloredOption: '着色选项',
disabledOption: '禁用选项',
showDescription: '展示描述信息',
},
'en-US': {
option1: 'Option 1',
option2: 'Option 2',
option3: 'Option 3',
subname: 'Description',
showCancel: 'Show Cancel Button',
buttonText: 'Show ActionSheet',
customPanel: 'Custom Panel',
description: 'Description',
optionStatus: 'Option Status',
coloredOption: 'Colored Option',
disabledOption: 'Disabled Option',
showDescription: 'Show Description',
},
};
const t = useTranslate(i18n);
const show = reactive({
basic: false,
cancel: false,
title: false,
status: false,
description: false,
});
const simpleActions = computed<ActionSheetAction[]>(() => [
{ name: t('option1') },
{ name: t('option2') },
{ name: t('option3') },
]);
const statusActions = computed<ActionSheetAction[]>(() => [
{ name: t('coloredOption'), color: '#ee0a24' },
{ name: t('disabledOption'), disabled: true },
{ loading: true },
]);
const actionsWithDescription = computed<ActionSheetAction[]>(() => [
{ name: t('option1') },
{ name: t('option2') },
{ name: t('option3'), subname: t('subname') },
]);
const onSelect = (item: ActionSheetAction) => {
show.basic = false;
Toast(item.name);
};
const onCancel = () => Toast(t('cancel'));
</script>
<template> <template>
<demo-block card :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" /> <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
@ -51,94 +123,6 @@
</van-action-sheet> </van-action-sheet>
</template> </template>
<script lang="ts">
import { computed, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ActionSheetAction } from '..';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
option1: '选项一',
option2: '选项二',
option3: '选项三',
subname: '描述信息',
showCancel: '展示取消按钮',
buttonText: '弹出菜单',
customPanel: '自定义面板',
description: '这是一段描述信息',
optionStatus: '选项状态',
coloredOption: '着色选项',
disabledOption: '禁用选项',
showDescription: '展示描述信息',
},
'en-US': {
option1: 'Option 1',
option2: 'Option 2',
option3: 'Option 3',
subname: 'Description',
showCancel: 'Show Cancel Button',
buttonText: 'Show ActionSheet',
customPanel: 'Custom Panel',
description: 'Description',
optionStatus: 'Option Status',
coloredOption: 'Colored Option',
disabledOption: 'Disabled Option',
showDescription: 'Show Description',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
show: {
basic: false,
cancel: false,
title: false,
status: false,
description: false,
},
});
const simpleActions = computed<ActionSheetAction[]>(() => [
{ name: t('option1') },
{ name: t('option2') },
{ name: t('option3') },
]);
const statusActions = computed<ActionSheetAction[]>(() => [
{ name: t('coloredOption'), color: '#ee0a24' },
{ name: t('disabledOption'), disabled: true },
{ loading: true },
]);
const actionsWithDescription = computed<ActionSheetAction[]>(() => [
{ name: t('option1') },
{ name: t('option2') },
{ name: t('option3'), subname: t('subname') },
]);
const onSelect = (item: ActionSheetAction) => {
state.show.basic = false;
Toast(item.name);
};
const onCancel = () => Toast(t('cancel'));
return {
...toRefs(state),
t,
onSelect,
onCancel,
simpleActions,
statusActions,
actionsWithDescription,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,21 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')">
<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { areaList } from '@vant/area-data'; import { areaList } from '@vant/area-data';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
@ -56,29 +39,33 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const searchResult = ref([]);
const t = useTranslate(i18n);
const searchResult = ref([]);
const onSave = () => Toast(t('save')); const onSave = () => Toast(t('save'));
const onDelete = () => Toast(t('delete')); const onDelete = () => Toast(t('delete'));
const onChangeDetail = (val: string) => { const onChangeDetail = (val: string) => {
searchResult.value = val ? t('searchResult') : []; searchResult.value = val ? t('searchResult') : [];
};
return {
t,
onSave,
onDelete,
areaList,
searchResult,
onChangeDetail,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
</demo-block>
</template>
<style lang="less"> <style lang="less">
.demo-address-edit { .demo-address-edit {
.van-doc-demo-block__title { .van-doc-demo-block__title {

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

@ -1,18 +1,4 @@
<template> <script setup lang="ts">
<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')"
@add="onAdd"
@edit="onEdit"
/>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast'; import { Toast } from '../../toast';
@ -78,27 +64,30 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const chosenAddressId = ref('1');
const t = useTranslate(i18n); const onAdd = () => {
const chosenAddressId = ref('1'); Toast(t('add'));
const onAdd = () => { };
Toast(t('add')); const onEdit = (item: unknown, index: number) => {
}; Toast(`${t('edit')}:${index}`);
const onEdit = (item: unknown, index: number) => {
Toast(`${t('edit')}:${index}`);
};
return {
t,
onAdd,
onEdit,
chosenAddressId,
};
},
}; };
</script> </script>
<template>
<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')"
@add="onAdd"
@edit="onEdit"
/>
</demo-block>
</template>
<style lang="less"> <style lang="less">
.demo-address-list { .demo-address-list {
.van-doc-demo-block__title { .van-doc-demo-block__title {

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

@ -1,26 +1,4 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')">
<van-area :title="t('title')" :area-list="t('areaList')" />
</demo-block>
<demo-block card :title="t('title2')">
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
</demo-block>
<demo-block card :title="t('title3')">
<van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
</demo-block>
<demo-block card :title="t('title4')">
<van-area
:title="t('title')"
:area-list="t('areaList')"
:columns-placeholder="t('columnsPlaceholder')"
/>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { areaList } from '@vant/area-data'; import { areaList } from '@vant/area-data';
import { areaListEn } from './area-en'; import { areaListEn } from './area-en';
@ -43,15 +21,28 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const value = ref('330302');
const t = useTranslate(i18n);
const value = ref('330302');
return {
t,
value,
};
},
};
</script> </script>
<template>
<demo-block card :title="t('basicUsage')">
<van-area :title="t('title')" :area-list="t('areaList')" />
</demo-block>
<demo-block card :title="t('title2')">
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
</demo-block>
<demo-block card :title="t('title3')">
<van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
</demo-block>
<demo-block card :title="t('title4')">
<van-area
:title="t('title')"
:area-list="t('areaList')"
:columns-placeholder="t('columnsPlaceholder')"
/>
</demo-block>
</template>

47
src/badge/demo/index.vue
View File

@ -1,3 +1,24 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
max: '最大值',
standalone: '独立展示',
customColor: '自定义颜色',
customContent: '自定义徽标内容',
},
'en-US': {
max: 'Max',
standalone: 'Standalone',
customColor: 'Custom Color',
customContent: 'Custom Content',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-badge content="5"> <van-badge content="5">
@ -65,32 +86,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
max: '最大值',
standalone: '独立展示',
customColor: '自定义颜色',
customContent: '自定义徽标内容',
},
'en-US': {
max: 'Max',
standalone: 'Standalone',
customColor: 'Custom Color',
customContent: 'Custom Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,70 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
type: '按钮类型',
size: '按钮尺寸',
icon: '图标按钮',
loading: '加载状态',
shape: '按钮形状',
default: '默认按钮',
primary: '主要按钮',
success: '成功按钮',
danger: '危险按钮',
warning: '警告按钮',
large: '大号按钮',
normal: '普通按钮',
small: '小型按钮',
mini: '迷你按钮',
plain: '朴素按钮',
square: '方形按钮',
round: '圆形按钮',
hairline: '细边框',
hairlineButton: '细边框按钮',
loadingText: '加载中...',
router: '页面导航',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
customColor: '自定义颜色',
pure: '单色按钮',
gradient: '渐变色按钮',
blockElement: '块级元素',
},
'en-US': {
type: 'Type',
size: 'Size',
icon: 'Icon',
loading: 'Loading',
shape: 'Shape',
default: 'Default',
primary: 'Primary',
success: 'Success',
danger: 'Danger',
warning: 'Warning',
large: 'Large',
normal: 'Normal',
small: 'Small',
mini: 'Mini',
plain: 'Plain',
square: 'Square',
round: 'Round',
hairline: 'Hairline',
hairlineButton: 'Hairline',
loadingText: 'Loading...',
router: 'Router',
urlRoute: 'URL',
vueRoute: 'Vue Router',
customColor: 'Custom Color',
pure: 'Pure',
gradient: 'Gradient',
blockElement: 'Block Element',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('type')"> <demo-block :title="t('type')">
<div class="demo-button-row"> <div class="demo-button-row">
@ -72,78 +139,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
type: '按钮类型',
size: '按钮尺寸',
icon: '图标按钮',
loading: '加载状态',
shape: '按钮形状',
default: '默认按钮',
primary: '主要按钮',
success: '成功按钮',
danger: '危险按钮',
warning: '警告按钮',
large: '大号按钮',
normal: '普通按钮',
small: '小型按钮',
mini: '迷你按钮',
plain: '朴素按钮',
square: '方形按钮',
round: '圆形按钮',
hairline: '细边框',
hairlineButton: '细边框按钮',
loadingText: '加载中...',
router: '页面导航',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
customColor: '自定义颜色',
pure: '单色按钮',
gradient: '渐变色按钮',
blockElement: '块级元素',
},
'en-US': {
type: 'Type',
size: 'Size',
icon: 'Icon',
loading: 'Loading',
shape: 'Shape',
default: 'Default',
primary: 'Primary',
success: 'Success',
danger: 'Danger',
warning: 'Warning',
large: 'Large',
normal: 'Normal',
small: 'Small',
mini: 'Mini',
plain: 'Plain',
square: 'Square',
round: 'Round',
hairline: 'Hairline',
hairlineButton: 'Hairline',
loadingText: 'Loading...',
router: 'Router',
urlRoute: 'URL',
vueRoute: 'Vue Router',
customColor: 'Custom Color',
pure: 'Pure',
gradient: 'Gradient',
blockElement: 'Block Element',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,126 +1,5 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')"> import { reactive } from 'vue';
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(date.selectSingle)"
@click="show('single', 'selectSingle')"
/>
<van-cell
is-link
:title="t('selectMultiple')"
:value="formatMultiple(date.selectMultiple)"
@click="show('multiple', 'selectMultiple')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.selectRange)"
@click="show('range', 'selectRange')"
/>
</demo-block>
<demo-block card :title="t('quickSelect')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(date.quickSelect1)"
@click="show('single', 'quickSelect1')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.quickSelect2)"
@click="show('range', 'quickSelect2')"
/>
</demo-block>
<demo-block card :title="t('customCalendar')">
<van-cell
is-link
:title="t('customColor')"
:value="formatRange(date.customColor)"
@click="show('range', 'customColor')"
/>
<van-cell
is-link
:title="t('customRange')"
:value="formatFullDate(date.customRange)"
@click="show('single', 'customRange')"
/>
<van-cell
is-link
:title="t('customConfirm')"
:value="formatRange(date.customConfirm)"
@click="show('range', 'customConfirm')"
/>
<van-cell
is-link
:title="t('customDayText')"
:value="formatRange(date.customDayText)"
@click="show('range', 'customDayText')"
/>
<van-cell
is-link
:title="t('customPosition')"
:value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')"
/>
<van-cell
is-link
:title="t('maxRange')"
:value="formatRange(date.maxRange)"
@click="show('range', 'maxRange')"
/>
<van-cell
v-if="!isWeapp"
is-link
:title="t('firstDayOfWeek')"
@click="show('single', 'firstDayOfWeek')"
/>
</demo-block>
<demo-block card :title="t('tiledDisplay')">
<van-calendar
:title="t('calendar')"
:poppable="false"
:show-confirm="false"
:min-date="tiledMinDate"
:max-date="tiledMaxDate"
:default-date="tiledMinDate"
:style="{ height: '500px' }"
/>
</demo-block>
<van-calendar
v-model:show="showCalendar"
:type="type"
:color="color"
:round="round"
:position="position"
:min-date="minDate"
:max-date="maxDate"
:max-range="maxRange"
:formatter="formatter"
:show-confirm="showConfirm"
:confirm-text="confirmText"
:confirm-disabled-text="confirmDisabledText"
:first-day-of-week="firstDayOfWeek"
@confirm="onConfirm"
/>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import type { CalendarDayItem } from '../types'; import type { CalendarDayItem } from '../types';
@ -175,161 +54,267 @@ const i18n = {
}, },
}; };
export default defineComponent({ const t = useTranslate(i18n);
setup() { const state = reactive<Record<string, any>>({
const t = useTranslate(i18n); date: {
const state = reactive<Record<string, any>>({ maxRange: [],
date: { selectSingle: null,
maxRange: [], selectRange: [],
selectSingle: null, selectMultiple: [],
selectRange: [], quickSelect1: null,
selectMultiple: [], quickSelect2: [],
quickSelect1: null, customColor: [],
quickSelect2: [], customConfirm: [],
customColor: [], customRange: null,
customConfirm: [], customDayText: [],
customRange: null, customPosition: null,
customDayText: [],
customPosition: null,
},
type: 'single',
round: true,
color: undefined,
minDate: undefined,
maxDate: undefined,
maxRange: undefined,
position: undefined,
formatter: undefined,
showConfirm: false,
showCalendar: false,
tiledMinDate: new Date(2012, 0, 10),
tiledMaxDate: new Date(2012, 2, 20),
confirmText: undefined,
confirmDisabledText: undefined,
firstDayOfWeek: 0,
});
const resetSettings = () => {
state.round = true;
state.color = undefined;
state.minDate = undefined;
state.maxDate = undefined;
state.maxRange = undefined;
state.position = undefined;
state.formatter = undefined;
state.showConfirm = true;
state.confirmText = undefined;
state.confirmDisabledText = undefined;
state.firstDayOfWeek = 0;
};
const dayFormatter = (day: CalendarDayItem) => {
if (!day.date) {
return day;
}
const month = day.date.getMonth() + 1;
const date = day.date.getDate();
if (month === 5) {
if (date === 1) {
day.topInfo = t('laborDay');
} else if (date === 4) {
day.topInfo = t('youthDay');
} else if (date === 11) {
day.text = t('today');
}
}
if (day.type === 'start') {
day.bottomInfo = t('in');
} else if (day.type === 'end') {
day.bottomInfo = t('out');
}
return day;
};
const show = (type: string, id: string) => {
resetSettings();
state.id = id;
state.type = type;
state.showCalendar = true;
switch (id) {
case 'quickSelect1':
case 'quickSelect2':
state.showConfirm = false;
break;
case 'customColor':
state.color = '#1989fa';
break;
case 'customConfirm':
state.confirmText = t('confirmText');
state.confirmDisabledText = t('confirmDisabledText');
break;
case 'customRange':
state.minDate = new Date(2010, 0, 1);
state.maxDate = new Date(2010, 0, 31);
break;
case 'customDayText':
state.minDate = new Date(2010, 4, 1);
state.maxDate = new Date(2010, 4, 31);
state.formatter = dayFormatter;
break;
case 'customPosition':
state.round = false;
state.position = 'right';
break;
case 'maxRange':
state.maxRange = 3;
break;
case 'firstDayOfWeek':
state.firstDayOfWeek = 1;
break;
}
};
const formatDate = (date: Date) => {
if (date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
}
};
const formatFullDate = (date: Date) => {
if (date) {
return `${date.getFullYear()}/${formatDate(date)}`;
}
};
const formatMultiple = (dates: Date[]) => {
if (dates.length) {
return t('selectCount', dates.length);
}
};
const formatRange = (dateRange: Date[]) => {
if (dateRange.length) {
const [start, end] = dateRange;
return `${formatDate(start)} - ${formatDate(end)}`;
}
};
const onConfirm = (date: Date | Date[]) => {
state.showCalendar = false;
state.date[state.id] = date;
};
return {
...toRefs(state),
t,
show,
onConfirm,
formatDate,
formatRange,
formatFullDate,
formatMultiple,
};
}, },
type: 'single',
round: true,
color: undefined,
minDate: undefined,
maxDate: undefined,
maxRange: undefined,
position: undefined,
formatter: undefined,
showConfirm: false,
showCalendar: false,
tiledMinDate: new Date(2012, 0, 10),
tiledMaxDate: new Date(2012, 2, 20),
confirmText: undefined,
confirmDisabledText: undefined,
firstDayOfWeek: 0,
}); });
const resetSettings = () => {
state.round = true;
state.color = undefined;
state.minDate = undefined;
state.maxDate = undefined;
state.maxRange = undefined;
state.position = undefined;
state.formatter = undefined;
state.showConfirm = true;
state.confirmText = undefined;
state.confirmDisabledText = undefined;
state.firstDayOfWeek = 0;
};
const dayFormatter = (day: CalendarDayItem) => {
if (!day.date) {
return day;
}
const month = day.date.getMonth() + 1;
const date = day.date.getDate();
if (month === 5) {
if (date === 1) {
day.topInfo = t('laborDay');
} else if (date === 4) {
day.topInfo = t('youthDay');
} else if (date === 11) {
day.text = t('today');
}
}
if (day.type === 'start') {
day.bottomInfo = t('in');
} else if (day.type === 'end') {
day.bottomInfo = t('out');
}
return day;
};
const show = (type: string, id: string) => {
resetSettings();
state.id = id;
state.type = type;
state.showCalendar = true;
switch (id) {
case 'quickSelect1':
case 'quickSelect2':
state.showConfirm = false;
break;
case 'customColor':
state.color = '#1989fa';
break;
case 'customConfirm':
state.confirmText = t('confirmText');
state.confirmDisabledText = t('confirmDisabledText');
break;
case 'customRange':
state.minDate = new Date(2010, 0, 1);
state.maxDate = new Date(2010, 0, 31);
break;
case 'customDayText':
state.minDate = new Date(2010, 4, 1);
state.maxDate = new Date(2010, 4, 31);
state.formatter = dayFormatter;
break;
case 'customPosition':
state.round = false;
state.position = 'right';
break;
case 'maxRange':
state.maxRange = 3;
break;
case 'firstDayOfWeek':
state.firstDayOfWeek = 1;
break;
}
};
const formatDate = (date: Date) => {
if (date) {
return `${state.date.getMonth() + 1}/${state.date.getDate()}`;
}
};
const formatFullDate = (date: Date) => {
if (date) {
return `${state.date.getFullYear()}/${formatDate(date)}`;
}
};
const formatMultiple = (dates: Date[]) => {
if (dates.length) {
return t('selectCount', dates.length);
}
};
const formatRange = (dateRange: Date[]) => {
if (dateRange.length) {
const [start, end] = dateRange;
return `${formatDate(start)} - ${formatDate(end)}`;
}
};
const onConfirm = (date: Date | Date[]) => {
state.showCalendar = false;
state.date[state.id] = date;
};
</script> </script>
<template>
<demo-block card :title="t('basicUsage')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(state.date.selectSingle)"
@click="show('single', 'selectSingle')"
/>
<van-cell
is-link
:title="t('selectMultiple')"
:value="formatMultiple(state.date.selectMultiple)"
@click="show('multiple', 'selectMultiple')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(state.date.selectRange)"
@click="show('range', 'selectRange')"
/>
</demo-block>
<demo-block card :title="t('quickSelect')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(state.date.quickSelect1)"
@click="show('single', 'quickSelect1')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(state.date.quickSelect2)"
@click="show('range', 'quickSelect2')"
/>
</demo-block>
<demo-block card :title="t('customCalendar')">
<van-cell
is-link
:title="t('customColor')"
:value="formatRange(state.date.customColor)"
@click="show('range', 'customColor')"
/>
<van-cell
is-link
:title="t('customRange')"
:value="formatFullDate(state.date.customRange)"
@click="show('single', 'customRange')"
/>
<van-cell
is-link
:title="t('customConfirm')"
:value="formatRange(state.date.customConfirm)"
@click="show('range', 'customConfirm')"
/>
<van-cell
is-link
:title="t('customDayText')"
:value="formatRange(state.date.customDayText)"
@click="show('range', 'customDayText')"
/>
<van-cell
is-link
:title="t('customPosition')"
:value="formatFullDate(state.date.customPosition)"
@click="show('single', 'customPosition')"
/>
<van-cell
is-link
:title="t('maxRange')"
:value="formatRange(state.date.maxRange)"
@click="show('range', 'maxRange')"
/>
<van-cell
v-if="!isWeapp"
is-link
:title="t('firstDayOfWeek')"
@click="show('single', 'firstDayOfWeek')"
/>
</demo-block>
<demo-block card :title="t('tiledDisplay')">
<van-calendar
:title="t('calendar')"
:poppable="false"
:show-confirm="false"
:min-date="state.tiledMinDate"
:max-date="state.tiledMaxDate"
:default-date="state.tiledMinDate"
:style="{ height: '500px' }"
/>
</demo-block>
<van-calendar
v-model:show="state.showCalendar"
:type="state.type"
:color="state.color"
:round="state.round"
:position="state.position"
:min-date="state.minDate"
:max-date="state.maxDate"
:max-range="state.maxRange"
:formatter="state.formatter"
:show-confirm="state.showConfirm"
:confirm-text="state.confirmText"
:first-day-of-week="state.firstDayOfWeek"
:confirm-disabled-text="state.confirmDisabledText"
@confirm="onConfirm"
/>
</template>

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

@ -1,3 +1,22 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title: '商品名称',
discountInfo: '营销信息',
customContent: '自定义内容',
},
'en-US': {
discountInfo: 'Discount Info',
customContent: 'Custom Content',
},
};
const t = useTranslate(i18n);
const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-card <van-card
@ -52,33 +71,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title: '商品名称',
discountInfo: '营销信息',
customContent: '自定义内容',
},
'en-US': {
discountInfo: 'Discount Info',
customContent: 'Custom Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return {
t,
imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

363
src/cascader/demo/index.vue
View File

@ -1,106 +1,5 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')"> import { computed, reactive } from 'vue';
<van-field
v-model="base.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="base.show = true"
/>
<van-popup v-model:show="base.show" round teleport="body" position="bottom">
<van-cascader
v-model="base.value"
:title="t('selectArea')"
:options="t('options')"
@close="base.show = false"
@finish="onFinish('base', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customColor')">
<van-field
v-model="customColor.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customColor.show = true"
/>
<van-popup
v-model:show="customColor.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="customColor.value"
:title="t('selectArea')"
:options="t('options')"
active-color="#1989fa"
@close="customColor.show = false"
@finish="onFinish('customColor', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('asyncOptions')">
<van-field
v-model="async.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="async.show = true"
/>
<van-popup
v-model:show="async.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="async.value"
:title="t('selectArea')"
:options="async.options"
@close="async.show = false"
@change="loadDynamicOptions"
@finish="onFinish('async', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customFieldNames')">
<van-field
v-model="customFieldNames.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customFieldNames.show = true"
/>
<van-popup
v-model:show="customFieldNames.show"
round
teleport="body"
position="bottom"
safe-area-inset-bottom
>
<van-cascader
v-model="customFieldNames.value"
:title="t('selectArea')"
:options="customFieldOptions"
:field-names="fieldNames"
@close="customFieldNames.show = false"
@finish="onFinish('customFieldNames', $event)"
/>
</van-popup>
</demo-block>
</template>
<script lang="ts">
import { computed, reactive, toRefs } from 'vue';
import { CascaderOption } from '..'; import { CascaderOption } from '..';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { deepClone } from '../../utils/deep-clone'; import { deepClone } from '../../utils/deep-clone';
@ -155,95 +54,183 @@ type StateItem = {
options?: CascaderOption[]; options?: CascaderOption[];
}; };
export default { const t = useTranslate(i18n);
setup() { const baseState = reactive<StateItem>({
const t = useTranslate(i18n); show: false,
const state = reactive<Record<string, StateItem>>({ value: '',
base: { result: '',
show: false, });
value: '', const customColorState = reactive<StateItem>({
result: '', show: false,
}, value: null,
customColor: { result: '',
show: false, });
value: null, const asyncState = reactive<StateItem>({
result: '', show: false,
}, value: null,
async: { result: '',
show: false, options: t('asyncOptions1'),
value: null, });
result: '', const customFieldState = reactive<StateItem>({
options: t('asyncOptions1'), show: false,
}, value: null,
customFieldNames: { result: '',
show: false, });
value: null,
result: '',
},
});
const fieldNames = { const fieldNames = {
text: 'name', text: 'name',
value: 'code', value: 'code',
children: 'items', children: 'items',
}; };
const customFieldOptions = computed(() => { const customFieldOptions = computed(() => {
const options = deepClone(t('options')); const options = deepClone(t('options'));
const adjustFieldName = (item: CascaderOption) => { const adjustFieldName = (item: CascaderOption) => {
if ('text' in item) { if ('text' in item) {
item.name = item.text; item.name = item.text;
delete item.text; delete item.text;
} }
if ('value' in item) { if ('value' in item) {
item.code = item.value; item.code = item.value;
delete item.value; delete item.value;
} }
if ('children' in item) { if ('children' in item) {
item.items = item.children; item.items = item.children;
delete item.children; delete item.children;
item.items.forEach(adjustFieldName); item.items.forEach(adjustFieldName);
} }
}; };
options.forEach(adjustFieldName); options.forEach(adjustFieldName);
return options; return options;
}); });
const loadDynamicOptions = ({ value }: CascaderOption) => { const loadDynamicOptions = ({ value }: CascaderOption) => {
if (value === '330000') { if (value === '330000') {
setTimeout(() => { setTimeout(() => {
state.async.options![0].children = t('asyncOptions2'); asyncState.options![0].children = t('asyncOptions2');
}, 500); }, 500);
} }
}; };
const onFinish = ( const onFinish = (
type: string, state: StateItem,
{ {
value, value,
selectedOptions, selectedOptions,
}: { value: number | string; selectedOptions: CascaderOption[] } }: { value: number | string; selectedOptions: CascaderOption[] }
) => { ) => {
const result = selectedOptions const result = selectedOptions
.map((option) => option.text || option.name) .map((option) => option.text || option.name)
.join('/'); .join('/');
state[type] = { state.show = false;
...state[type], state.value = value;
show: false, state.result = result;
value,
result,
};
};
return {
...toRefs(state),
t,
onFinish,
fieldNames,
customFieldOptions,
loadDynamicOptions,
};
},
}; };
</script> </script>
<template>
<demo-block card :title="t('basicUsage')">
<van-field
v-model="baseState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="baseState.show = true"
/>
<van-popup
v-model:show="baseState.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="baseState.value"
:title="t('selectArea')"
:options="t('options')"
@close="baseState.show = false"
@finish="onFinish(baseState, $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customColor')">
<van-field
v-model="customColorState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customColorState.show = true"
/>
<van-popup
v-model:show="customColorState.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="customColorState.value"
:title="t('selectArea')"
:options="t('options')"
active-color="#1989fa"
@close="customColorState.show = false"
@finish="onFinish(customColorState, $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('asyncOptions')">
<van-field
v-model="asyncState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="asyncState.show = true"
/>
<van-popup
v-model:show="asyncState.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="asyncState.value"
:title="t('selectArea')"
:options="asyncState.options"
@close="asyncState.show = false"
@change="loadDynamicOptions"
@finish="onFinish(asyncState, $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customFieldNames')">
<van-field
v-model="customFieldState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customFieldState.show = true"
/>
<van-popup
v-model:show="customFieldState.show"
round
teleport="body"
position="bottom"
safe-area-inset-bottom
>
<van-cascader
v-model="customFieldState.value"
:title="t('selectArea')"
:options="customFieldOptions"
:field-names="fieldNames"
@close="customFieldState.show = false"
@finish="onFinish(customFieldState, $event)"
/>
</van-popup>
</demo-block>
</template>

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

@ -1,3 +1,42 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
cell: '单元格',
group: '分组',
router: '页面导航',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
useSlots: '使用插槽',
showIcon: '展示图标',
showArrow: '展示箭头',
largeSize: '单元格大小',
valueOnly: '只设置 value',
groupTitle: '分组标题',
insetGrouped: '卡片风格',
verticalCenter: '垂直居中',
},
'en-US': {
cell: 'Cell title',
group: 'Group',
router: 'Router',
urlRoute: 'URL',
vueRoute: 'Vue Router',
useSlots: 'Use Slots',
showIcon: 'Left Icon',
showArrow: 'Link',
largeSize: 'Size',
valueOnly: 'Value only',
groupTitle: 'Group Title',
insetGrouped: 'Inset Grouped',
verticalCenter: 'Vertical center',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell-group> <van-cell-group>
@ -81,50 +120,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
cell: '单元格',
group: '分组',
router: '页面导航',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
useSlots: '使用插槽',
showIcon: '展示图标',
showArrow: '展示箭头',
largeSize: '单元格大小',
valueOnly: '只设置 value',
groupTitle: '分组标题',
insetGrouped: '卡片风格',
verticalCenter: '垂直居中',
},
'en-US': {
cell: 'Cell title',
group: 'Group',
router: 'Router',
urlRoute: 'URL',
vueRoute: 'Vue Router',
useSlots: 'Use Slots',
showIcon: 'Left Icon',
showArrow: 'Link',
largeSize: 'Size',
valueOnly: 'Value only',
groupTitle: 'Group Title',
insetGrouped: 'Inset Grouped',
verticalCenter: 'Vertical center',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
.demo-cell { .demo-cell {
.custom-title { .custom-title {

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

@ -1,113 +1,8 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')"> import { ref, reactive } from 'vue';
<van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
</demo-block>
<demo-block :title="t('disabled')">
<van-checkbox :model-value="false" disabled>
{{ t('checkbox') }}
</van-checkbox>
<van-checkbox :model-value="true" disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square">
{{ t('customShape') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#ee0a24">
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="24px">
{{ t('customIconSize') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ t('customIcon') }}
<template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
</demo-block>
<demo-block :title="t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<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-group>
</demo-block>
<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-group>
</demo-block>
<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-group>
</demo-block>
<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-group>
<div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll">
{{ t('checkAll') }}
</van-button>
<van-button type="primary" @click="toggleAll">
{{ t('inverse') }}
</van-button>
</div>
</demo-block>
<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}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>
</template>
<script lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { useRefs } from '../../composables/use-refs'; import { useRefs } from '../../composables/use-refs';
import { ComponentInstance } from 'src/utils'; import { ComponentInstance } from '../../utils';
const i18n = { const i18n = {
'zh-CN': { 'zh-CN': {
@ -142,54 +37,146 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); checkbox1: true,
const state = reactive({ checkbox2: true,
checkbox1: true, checkbox3: true,
checkbox2: true, checkboxShape: true,
checkbox3: true, checkboxLabel: true,
checkboxShape: true, checboxIcon: true,
checkboxLabel: true, list: ['a', 'b'],
checboxIcon: true, result: ['a', 'b'],
list: ['a', 'b'], result2: [],
result: ['a', 'b'], result3: [],
result2: [], checkAllResult: [],
result3: [], horizontalResult: [],
checkAllResult: [], });
horizontalResult: [],
});
const group = ref<ComponentInstance>(); const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
const [refs, setRefs] = useRefs<ComponentInstance>(); const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
const toggle = (index: number) => { const group = ref<ComponentInstance>();
refs.value[index].toggle(); const [refs, setRefs] = useRefs<ComponentInstance>();
};
const checkAll = () => { const toggle = (index: number) => {
group.value?.toggleAll(true); refs.value[index].toggle();
}; };
const toggleAll = () => { const checkAll = () => {
group.value?.toggleAll(); group.value?.toggleAll(true);
}; };
return { const toggleAll = () => {
...toRefs(state), group.value?.toggleAll();
t,
group,
toggle,
setRefs,
checkAll,
toggleAll,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-checkbox v-model="state.checkbox1">{{ t('checkbox') }}</van-checkbox>
</demo-block>
<demo-block :title="t('disabled')">
<van-checkbox :model-value="false" disabled>
{{ t('checkbox') }}
</van-checkbox>
<van-checkbox :model-value="true" disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customShape')">
<van-checkbox v-model="state.checkboxShape" shape="square">
{{ t('customShape') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customColor')">
<van-checkbox v-model="state.checkbox2" checked-color="#ee0a24">
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIconSize')">
<van-checkbox v-model="state.checboxIcon" icon-size="24px">
{{ t('customIconSize') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIcon')">
<van-checkbox v-model="state.checkbox3">
{{ t('customIcon') }}
<template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
</demo-block>
<demo-block :title="t('disableLabel')">
<van-checkbox v-model="state.checkboxLabel" label-disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('title3')">
<van-checkbox-group v-model="state.result">
<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')">
<van-checkbox-group v-model="state.horizontalResult" direction="horizontal">
<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')">
<van-checkbox-group v-model="state.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-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('toggleAll')">
<van-checkbox-group v-model="state.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-group>
<div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll">
{{ t('checkAll') }}
</van-button>
<van-button type="primary" @click="toggleAll">
{{ t('inverse') }}
</van-button>
</div>
</demo-block>
<demo-block :title="t('title5')">
<van-checkbox-group v-model="state.result3">
<van-cell-group>
<van-cell
v-for="(item, index) in state.list"
clickable
:key="index"
:title="`${t('checkbox')} ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>
</template>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,74 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')"> import { reactive } from 'vue';
<van-circle
v-model:current-rate="currentRate1"
:rate="rate"
:speed="100"
:text="currentRate1.toFixed(0) + '%'"
/>
</demo-block>
<demo-block :title="t('customStyle')">
<van-circle
v-model:current-rate="currentRate3"
:rate="rate"
:speed="100"
:stroke-width="60"
:text="t('customWidth')"
/>
<van-circle
v-model:current-rate="currentRate3"
color="#ee0a24"
:rate="rate"
layer-color="#ebedf0"
:speed="100"
:text="t('customColor')"
/>
<van-circle
v-model:current-rate="currentRate2"
:rate="rate"
:speed="100"
:color="gradientColor"
:text="t('gradient')"
/>
<van-circle
v-model:current-rate="currentRate4"
color="#07c160"
:rate="rate"
:speed="100"
:clockwise="false"
:text="t('counterClockwise')"
style="margin-top: 15px"
/>
<van-circle
v-model:current-rate="currentRate4"
color="#7232dd"
:rate="rate"
:speed="100"
size="120px"
:clockwise="false"
: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('decrease')"
type="danger"
size="small"
@click="reduce"
/>
</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const format = (rate: number) => Math.min(Math.max(rate, 0), 100); const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
@ -92,41 +23,98 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); rate: 70,
const state = reactive({ currentRate1: 70,
rate: 70, currentRate2: 70,
currentRate1: 70, currentRate3: 70,
currentRate2: 70, currentRate4: 70,
currentRate3: 70, });
currentRate4: 70,
});
const gradientColor = { const gradientColor = {
'0%': '#3fecff', '0%': '#3fecff',
'100%': '#6149f6', '100%': '#6149f6',
}; };
const add = () => { const add = () => {
state.rate = format(state.rate + 20); state.rate = format(state.rate + 20);
}; };
const reduce = () => { const reduce = () => {
state.rate = format(state.rate - 20); state.rate = format(state.rate - 20);
};
return {
...toRefs(state),
t,
add,
reduce,
gradientColor,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-circle
v-model:current-rate="state.currentRate1"
:rate="state.rate"
:speed="100"
:text="state.currentRate1.toFixed(0) + '%'"
/>
</demo-block>
<demo-block :title="t('customStyle')">
<van-circle
v-model:current-rate="state.currentRate3"
:rate="state.rate"
:speed="100"
:stroke-width="60"
:text="t('customWidth')"
/>
<van-circle
v-model:current-rate="state.currentRate3"
color="#ee0a24"
:rate="state.rate"
layer-color="#ebedf0"
:speed="100"
:text="t('customColor')"
/>
<van-circle
v-model:current-rate="state.currentRate2"
:rate="state.rate"
:speed="100"
:color="gradientColor"
:text="t('gradient')"
/>
<van-circle
v-model:current-rate="state.currentRate4"
color="#07c160"
:rate="state.rate"
:speed="100"
:clockwise="false"
:text="t('counterClockwise')"
style="margin-top: 15px"
/>
<van-circle
v-model:current-rate="state.currentRate4"
color="#7232dd"
:rate="state.rate"
:speed="100"
size="120px"
:clockwise="false"
: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('decrease')"
type="danger"
size="small"
@click="reduce"
/>
</div>
</template>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,20 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '在列元素之间增加间距',
justify: '对齐方式',
},
'en-US': {
title2: 'Column Spacing',
justify: 'Justify Content',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-row> <van-row>
@ -51,28 +68,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '在列元素之间增加间距',
justify: '对齐方式',
},
'en-US': {
title2: 'Column Spacing',
justify: 'Justify Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,6 +1,32 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
accordion: '手风琴',
titleSlot: '自定义标题内容',
text: '代码是写出来给人看的，附带能在机器上运行',
},
'en-US': {
accordion: 'Accordion',
titleSlot: 'Custom title',
text: 'Content',
},
};
const t = useTranslate(i18n);
const state = reactive({
active1: [0],
active2: 0,
active3: [],
active4: [],
});
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-collapse v-model="active1"> <van-collapse v-model="state.active1">
<van-collapse-item :title="t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
@ -14,7 +40,7 @@
</demo-block> </demo-block>
<demo-block :title="t('accordion')"> <demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion> <van-collapse v-model="state.active2" accordion>
<van-collapse-item :title="t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
@ -28,7 +54,7 @@
</demo-block> </demo-block>
<demo-block :title="t('disabled')"> <demo-block :title="t('disabled')">
<van-collapse v-model="active3"> <van-collapse v-model="state.active3">
<van-collapse-item :title="t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ t('text') }} {{ t('text') }}
</van-collapse-item> </van-collapse-item>
@ -42,7 +68,7 @@
</demo-block> </demo-block>
<demo-block :title="t('titleSlot')"> <demo-block :title="t('titleSlot')">
<van-collapse v-model="active4"> <van-collapse v-model="state.active4">
<van-collapse-item> <van-collapse-item>
<template #title> <template #title>
{{ t('title') + 1 }}<van-icon name="question-o" /> {{ t('title') + 1 }}<van-icon name="question-o" />
@ -60,41 +86,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
accordion: '手风琴',
titleSlot: '自定义标题内容',
text: '代码是写出来给人看的，附带能在机器上运行',
},
'en-US': {
accordion: 'Accordion',
titleSlot: 'Custom title',
text: 'Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
active1: [0],
active2: 0,
active3: [],
active4: [],
});
return {
...toRefs(state),
t,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

138
src/config-provider/demo/index.vue
View File

@ -1,54 +1,6 @@
<template> <script setup lang="ts">
<demo-block :title="t('defaultTheme')">
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="slider" />
</template>
</van-field>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
<demo-block :title="t('customTheme')">
<van-config-provider :theme-vars="themeVars">
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="slider" />
</template>
</van-field>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</van-config-provider>
</demo-block>
</template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { reactive, toRefs } from '@vue/reactivity'; import { reactive } from '@vue/reactivity';
const i18n = { const i18n = {
'zh-CN': { 'zh-CN': {
@ -69,34 +21,72 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); rate: 4,
const state = reactive({ slider: 50,
rate: 4, switchChecked: true,
slider: 50, });
switchChecked: true,
});
const themeVars = { const themeVars = {
rateIconFullColor: '#07c160', rateIconFullColor: '#07c160',
sliderBarHeight: '4px', sliderBarHeight: '4px',
sliderButtonWidth: '20px', sliderButtonWidth: '20px',
sliderButtonHeight: '20px', sliderButtonHeight: '20px',
sliderActiveBackgroundColor: '#07c160', sliderActiveBackgroundColor: '#07c160',
buttonPrimaryBorderColor: '#07c160', buttonPrimaryBorderColor: '#07c160',
buttonPrimaryBackgroundColor: '#07c160', buttonPrimaryBackgroundColor: '#07c160',
};
return {
t,
themeVars,
...toRefs(state),
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('defaultTheme')">
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="state.rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="state.slider" />
</template>
</van-field>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
<demo-block :title="t('customTheme')">
<van-config-provider :theme-vars="themeVars">
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="state.rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="state.slider" />
</template>
</van-field>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</van-config-provider>
</demo-block>
</template>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,36 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
add: '新增',
edit: '编辑',
name: '张三',
addContact: '添加联系人',
editContact: '编辑联系人',
},
'en-US': {
add: 'Add',
edit: 'Edit',
name: 'John Snow',
addContact: 'Add Contact',
editContact: 'Edit Contact',
},
};
const t = useTranslate(i18n);
const currentContact = computed(() => ({
name: t('name'),
tel: '13000000000',
}));
const onAdd = () => Toast(t('add'));
const onEdit = () => Toast(t('edit'));
</script>
<template> <template>
<demo-block :title="t('addContact')"> <demo-block :title="t('addContact')">
<van-contact-card type="add" @click="onAdd" /> <van-contact-card type="add" @click="onAdd" />
@ -21,47 +54,3 @@
/> />
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { computed } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
add: '新增',
edit: '编辑',
name: '张三',
addContact: '添加联系人',
editContact: '编辑联系人',
},
'en-US': {
add: 'Add',
edit: 'Edit',
name: 'John Snow',
addContact: 'Add Contact',
editContact: 'Edit Contact',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const currentContact = computed(() => ({
name: t('name'),
tel: '13000000000',
}));
const onAdd = () => Toast(t('add'));
const onEdit = () => Toast(t('edit'));
return {
t,
onAdd,
onEdit,
currentContact,
};
},
};
</script>

47
src/contact-edit/demo/index.vue
View File

@ -1,17 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')">
<van-contact-edit
is-edit
show-set-default
:contact-info="editingContact"
:set-default-label="t('defaultLabel')"
@save="onSave"
@delete="onDelete"
/>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast'; import { Toast } from '../../toast';
@ -25,24 +12,26 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const editingContact = ref({});
const t = useTranslate(i18n);
const editingContact = ref({});
const onSave = () => Toast(t('save')); const onSave = () => Toast(t('save'));
const onDelete = () => Toast(t('delete')); const onDelete = () => Toast(t('delete'));
return {
t,
onSave,
onDelete,
editingContact,
};
},
};
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-contact-edit
is-edit
show-set-default
:contact-info="editingContact"
:set-default-label="t('defaultLabel')"
@save="onSave"
@delete="onDelete"
/>
</demo-block>
</template>
<style lang="less"> <style lang="less">
.demo-contact-edit { .demo-contact-edit {
.van-doc-demo-block__title { .van-doc-demo-block__title {

60
src/contact-list/demo/index.vue
View File

@ -1,17 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')">
<van-contact-list
v-model="chosenContactId"
:list="t('list')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast'; import { Toast } from '../../toast';
@ -57,32 +44,33 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const chosenContactId = ref('1');
const t = useTranslate(i18n);
const chosenContactId = ref('1');
const onAdd = () => { const onAdd = () => {
Toast(t('add')); Toast(t('add'));
}; };
const onEdit = (contact: { id: string }) => { const onEdit = (contact: { id: string }) => {
Toast(t('edit') + contact.id); Toast(t('edit') + contact.id);
}; };
const onSelect = (contact: { id: string }) => { const onSelect = (contact: { id: string }) => {
Toast(t('select') + contact.id); Toast(t('select') + contact.id);
};
return {
t,
onAdd,
onEdit,
onSelect,
chosenContactId,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-contact-list
v-model="chosenContactId"
:list="t('list')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</demo-block>
</template>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,50 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ComponentInstance } from '../../utils';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
reset: '重置',
pause: '暂停',
start: '开始',
finished: '倒计时结束',
millisecond: '毫秒级渲染',
customStyle: '自定义样式',
customFormat: '自定义格式',
manualControl: '手动控制',
formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
},
'en-US': {
reset: 'Reset',
pause: 'Pause',
start: 'Start',
finished: 'Finished',
millisecond: 'Millisecond',
customStyle: 'Custom Style',
customFormat: 'Custom Format',
manualControl: 'Manual Control',
formatWithDay: 'DD Day, HH:mm:ss',
},
};
const t = useTranslate(i18n);
const time = ref(30 * 60 * 60 * 1000);
const countDown = ref<ComponentInstance>();
const start = () => {
countDown.value?.start();
};
const pause = () => {
countDown.value?.pause();
};
const reset = () => {
countDown.value?.reset();
};
const onFinish = () => Toast(t('finished'));
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-count-down :time="time" /> <van-count-down :time="time" />
@ -40,67 +87,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ComponentInstance } from '../../utils';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
reset: '重置',
pause: '暂停',
start: '开始',
finished: '倒计时结束',
millisecond: '毫秒级渲染',
customStyle: '自定义样式',
customFormat: '自定义格式',
manualControl: '手动控制',
formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
},
'en-US': {
reset: 'Reset',
pause: 'Pause',
start: 'Start',
finished: 'Finished',
millisecond: 'Millisecond',
customStyle: 'Custom Style',
customFormat: 'Custom Format',
manualControl: 'Manual Control',
formatWithDay: 'DD Day, HH:mm:ss',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const time = ref(30 * 60 * 60 * 1000);
const countDown = ref<ComponentInstance>();
const start = () => {
countDown.value?.start();
};
const pause = () => {
countDown.value?.pause();
};
const reset = () => {
countDown.value?.reset();
};
const onFinish = () => Toast(t('finished'));
return {
t,
time,
start,
pause,
reset,
onFinish,
countDown,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,30 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')"> import { computed, reactive } from 'vue';
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<van-popup
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px"
>
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
</demo-block>
</template>
<script lang="ts">
import { computed, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { CouponInfo } from '../../coupon'; import { CouponInfo } from '../../coupon';
import { Toast } from '../../toast'; import { Toast } from '../../toast';
@ -51,82 +26,94 @@ const i18n = {
const getRandomId = (max = 999999) => const getRandomId = (max = 999999) =>
String(Math.floor(Math.random() * max) + 1); String(Math.floor(Math.random() * max) + 1);
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); showList: false,
const state = reactive({ chosenCoupon: -1,
showList: false, exchangedCoupons: [] as CouponInfo[],
chosenCoupon: -1, });
exchangedCoupons: [] as CouponInfo[],
});
const coupon = computed(() => ({ const coupon = computed(() => ({
id: 1, id: 1,
condition: '无使用门槛\n最多优惠12元', condition: '无使用门槛\n最多优惠12元',
reason: '', reason: '',
value: 150, value: 150,
name: t('coupon.name'), name: t('coupon.name'),
description: t('coupon.description'), description: t('coupon.description'),
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
unitDesc: '元', unitDesc: '元',
})); }));
const discountCoupon = computed(() => ({ const discountCoupon = computed(() => ({
...coupon.value, ...coupon.value,
id: 2, id: 2,
value: 12, value: 12,
valueDesc: '8.8', valueDesc: '8.8',
unitDesc: '折', unitDesc: '折',
})); }));
const disabledCoupon = computed(() => ({ const disabledCoupon = computed(() => ({
...coupon.value, ...coupon.value,
id: 3, id: 3,
reason: t('coupon.reason'), reason: t('coupon.reason'),
})); }));
const disabledDiscountCoupon = computed(() => ({ const disabledDiscountCoupon = computed(() => ({
...discountCoupon.value, ...discountCoupon.value,
valueDesc: '1', valueDesc: '1',
unitDesc: '折', unitDesc: '折',
id: 4, id: 4,
reason: t('coupon.reason'), reason: t('coupon.reason'),
})); }));
const coupons = computed(() => [ const coupons = computed(() => [
coupon.value, coupon.value,
discountCoupon.value, discountCoupon.value,
...state.exchangedCoupons, ...state.exchangedCoupons,
]); ]);
const disabledCoupons = computed(() => [ const disabledCoupons = computed(() => [
disabledCoupon.value, disabledCoupon.value,
disabledDiscountCoupon.value, disabledDiscountCoupon.value,
]); ]);
const onChange = (index: number) => { const onChange = (index: number) => {
state.showList = false; state.showList = false;
state.chosenCoupon = index; state.chosenCoupon = index;
}; };
const onExchange = () => { const onExchange = () => {
Toast(t('exchange')); Toast(t('exchange'));
state.exchangedCoupons.push({ state.exchangedCoupons.push({
...coupon.value, ...coupon.value,
id: getRandomId(), id: getRandomId(),
}); });
};
return {
...toRefs(state),
t,
coupons,
onChange,
onExchange,
disabledCoupons,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="state.chosenCoupon"
@click="state.showList = true"
/>
<van-popup
v-model:show="state.showList"
round
position="bottom"
style="height: 90%; padding-top: 4px"
>
<van-coupon-list
:coupons="coupons"
:chosen-coupon="state.chosenCoupon"
:disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
</demo-block>
</template>

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

@ -1,3 +1,72 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
day: '日',
year: '年',
month: '月',
timeType: '选择时间',
dateType: '选择年月日',
datetimeType: '选择完整时间',
datehourType: '选择年月日小时',
monthDayType: '选择月日',
yearMonthType: '选择年月',
optionFilter: '选项过滤器',
sortColumns: '自定义列排序',
},
'en-US': {
day: ' Day',
year: ' Year',
month: ' Month',
timeType: 'Choose Time',
dateType: 'Choose Date',
datetimeType: 'Choose DateTime',
datehourType: 'Choose DateHour',
monthDayType: 'Choose Month-Day',
yearMonthType: 'Choose Year-Month',
optionFilter: 'Option Filter',
sortColumns: 'Columns Order',
},
};
const t = useTranslate(i18n);
const value = reactive({
date: new Date(2021, 0, 17),
time: '12:00',
datetime: new Date(2020, 0, 1),
datehour: new Date(2020, 0, 1),
monthDay: new Date(2020, 0, 1),
yearMonth: new Date(2020, 0, 1),
optionFilter: '12:00',
sortColumnsDate: new Date(2020, 0, 1),
});
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 10, 1);
const filter = (type: string, values: string[]) => {
if (type === 'minute') {
return values.filter((value) => Number(value) % 5 === 0);
}
return values;
};
const formatter = (type: string, value: string) => {
if (type === 'year') {
return value + t('year');
}
if (type === 'month') {
return value + t('month');
}
if (type === 'day') {
return value + t('day');
}
return value;
};
</script>
<template> <template>
<demo-block card :title="t('dateType')"> <demo-block card :title="t('dateType')">
<van-datetime-picker <van-datetime-picker
@ -22,7 +91,7 @@
<demo-block v-if="!isWeapp" card :title="t('monthDayType')"> <demo-block v-if="!isWeapp" card :title="t('monthDayType')">
<van-datetime-picker <van-datetime-picker
v-model="value.monthDayType" v-model="value.monthDay"
type="month-day" type="month-day"
:title="t('monthDayType')" :title="t('monthDayType')"
:min-date="minDate" :min-date="minDate"
@ -82,82 +151,3 @@
/> />
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
day: '日',
year: '年',
month: '月',
timeType: '选择时间',
dateType: '选择年月日',
datetimeType: '选择完整时间',
datehourType: '选择年月日小时',
monthDayType: '选择月日',
yearMonthType: '选择年月',
optionFilter: '选项过滤器',
sortColumns: '自定义列排序',
},
'en-US': {
day: ' Day',
year: ' Year',
month: ' Month',
timeType: 'Choose Time',
dateType: 'Choose Date',
datetimeType: 'Choose DateTime',
datehourType: 'Choose DateHour',
monthDayType: 'Choose Month-Day',
yearMonthType: 'Choose Year-Month',
optionFilter: 'Option Filter',
sortColumns: 'Columns Order',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const value = reactive({
date: new Date(2021, 0, 17),
time: '12:00',
datetime: new Date(2020, 0, 1),
datehour: new Date(2020, 0, 1),
monthDay: new Date(2020, 0, 1),
yearMonth: new Date(2020, 0, 1),
optionFilter: '12:00',
sortColumnsDate: new Date(2020, 0, 1),
});
const filter = (type: string, values: string[]) => {
if (type === 'minute') {
return values.filter((value) => Number(value) % 5 === 0);
}
return values;
};
const formatter = (type: string, value: string) => {
if (type === 'year') {
return value + t('year');
}
if (type === 'month') {
return value + t('month');
}
if (type === 'day') {
return value + t('day');
}
return value;
};
return {
t,
value,
filter,
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
};
},
};
</script>

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

@ -1,3 +1,82 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Dialog } from '..';
import type { DialogAction } from '../Dialog';
const i18n = {
'zh-CN': {
alert1: '提示弹窗',
alert2: '提示弹窗（无标题）',
confirm: '确认弹窗',
beforeClose: '异步关闭',
roundButton: '圆角按钮样式',
componentCall: '组件调用',
content: '代码是写出来给人看的，附带能在机器上运行',
},
'en-US': {
alert1: 'Alert',
alert2: 'Alert without title',
confirm: 'Confirm dialog',
beforeClose: 'Before Close',
roundButton: 'Round Button Style',
componentCall: 'Component Call',
},
};
const t = useTranslate(i18n);
const show = ref(false);
const image = 'https://img.yzcdn.cn/vant/apple-3.jpg';
const onClickAlert = () => {
Dialog.alert({
title: t('title'),
message: t('content'),
});
};
const onClickAlert2 = () => {
Dialog.alert({
message: t('content'),
});
};
const onClickRound = () => {
Dialog.alert({
theme: 'round-button',
title: t('title'),
message: t('content'),
});
};
const onClickRound2 = () => {
Dialog.alert({
theme: 'round-button',
message: t('content'),
});
};
const onClickConfirm = () => {
Dialog.confirm({
title: t('title'),
message: t('content'),
});
};
const onClickBeforeClose = () => {
const beforeClose = (action: DialogAction) =>
new Promise<boolean>((resolve) => {
setTimeout(() => resolve(action === 'confirm'), 1000);
});
Dialog.confirm({
title: t('title'),
message: t('content'),
beforeClose,
});
};
</script>
<template> <template>
<demo-block card :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('alert1')" @click="onClickAlert" /> <van-cell is-link :title="t('alert1')" @click="onClickAlert" />
@ -27,100 +106,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Dialog } from '..';
import type { DialogAction } from '../Dialog';
const i18n = {
'zh-CN': {
alert1: '提示弹窗',
alert2: '提示弹窗（无标题）',
confirm: '确认弹窗',
beforeClose: '异步关闭',
roundButton: '圆角按钮样式',
componentCall: '组件调用',
content: '代码是写出来给人看的，附带能在机器上运行',
},
'en-US': {
alert1: 'Alert',
alert2: 'Alert without title',
confirm: 'Confirm dialog',
beforeClose: 'Before Close',
roundButton: 'Round Button Style',
componentCall: 'Component Call',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const show = ref(false);
const onClickAlert = () => {
Dialog.alert({
title: t('title'),
message: t('content'),
});
};
const onClickAlert2 = () => {
Dialog.alert({
message: t('content'),
});
};
const onClickRound = () => {
Dialog.alert({
theme: 'round-button',
title: t('title'),
message: t('content'),
});
};
const onClickRound2 = () => {
Dialog.alert({
theme: 'round-button',
message: t('content'),
});
};
const onClickConfirm = () => {
Dialog.confirm({
title: t('title'),
message: t('content'),
});
};
const onClickBeforeClose = () => {
const beforeClose = (action: DialogAction) =>
new Promise<boolean>((resolve) => {
setTimeout(() => resolve(action === 'confirm'), 1000);
});
Dialog.confirm({
title: t('title'),
message: t('content'),
beforeClose,
});
};
return {
t,
show,
image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
onClickAlert,
onClickAlert2,
onClickRound,
onClickRound2,
onClickConfirm,
onClickBeforeClose,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,26 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '文本',
dashed: '虚线',
withText: '展示文本',
contentPosition: '内容位置',
customStyle: '自定义样式',
},
'en-US': {
text: 'Text',
dashed: 'Dashed',
withText: 'With Text',
contentPosition: 'Content Position',
customStyle: 'Custom Style',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-divider /> <van-divider />
@ -34,34 +57,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '文本',
dashed: '虚线',
withText: '展示文本',
contentPosition: '内容位置',
customStyle: '自定义样式',
},
'en-US': {
text: 'Text',
dashed: 'Dashed',
withText: 'With Text',
contentPosition: 'Content Position',
customStyle: 'Custom Style',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,64 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')"> import { computed, reactive, ref } from 'vue';
<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')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<div style="padding: 5px 16px">
<van-button
type="danger"
block
round
style="height: 40px"
@click="onConfirm"
>
{{ t('confirm') }}
</van-button>
</div>
</van-dropdown-item>
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#1989fa">
<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')">
<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')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>
</demo-block>
</template>
<script lang="ts">
import { computed, reactive, ref, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { ComponentInstance } from '../../utils'; import { ComponentInstance } from '../../utils';
@ -103,33 +44,87 @@ const i18n = {
}, },
}; };
export default { const item = ref<ComponentInstance>();
setup() { const t = useTranslate(i18n);
const item = ref<ComponentInstance>();
const t = useTranslate(i18n);
const state = reactive({ const state = reactive({
switch1: true, switch1: true,
switch2: false, switch2: false,
value1: 0, value1: 0,
value2: 'a', value2: 'a',
}); });
const option1 = computed(() => t('option1')); const option1 = computed(() => t('option1'));
const option2 = computed(() => t('option2')); const option2 = computed(() => t('option2'));
const onConfirm = () => { const onConfirm = () => {
item.value?.toggle(); item.value?.toggle();
};
return {
...toRefs(state),
t,
item,
option1,
option2,
onConfirm,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customContent')">
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch
v-model="state.switch1"
size="24"
active-color="#ee0a24"
/>
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch
v-model="state.switch2"
size="24"
active-color="#ee0a24"
/>
</template>
</van-cell>
<div style="padding: 5px 16px">
<van-button
type="danger"
block
round
style="height: 40px"
@click="onConfirm"
>
{{ t('confirm') }}
</van-button>
</div>
</van-dropdown-item>
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('expandDirection')">
<van-dropdown-menu direction="up">
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('disableMenu')">
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" disabled :options="option1" />
<van-dropdown-item v-model="state.value2" disabled :options="option2" />
</van-dropdown-menu>
</demo-block>
</template>

67
src/empty/demo/index.vue
View File

@ -1,3 +1,32 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
error: '通用错误',
search: '搜索提示',
network: '网络错误',
imageType: '图片类型',
description: '描述文字',
customImage: '自定义图片',
bottomContent: '底部内容',
},
'en-US': {
error: 'Error',
search: 'Search',
network: 'Network',
imageType: 'Image Type',
description: 'Description',
customImage: 'Custom Image',
bottomContent: 'Bottom Content',
},
};
const t = useTranslate(i18n);
const active = ref('error');
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-empty :description="t('description')" /> <van-empty :description="t('description')" />
@ -34,44 +63,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
error: '通用错误',
search: '搜索提示',
network: '网络错误',
imageType: '图片类型',
description: '描述文字',
customImage: '自定义图片',
bottomContent: '底部内容',
},
'en-US': {
error: 'Error',
search: 'Search',
network: 'Network',
imageType: 'Image Type',
description: 'Description',
customImage: 'Custom Image',
bottomContent: 'Bottom Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const active = ref('error');
return {
t,
active,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,19 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('autosize')">
<van-cell-group inset>
<van-field
v-model="value"
autosize
rows="1"
type="textarea"
:label="t('message')"
:placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
@ -30,12 +15,21 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const value = ref('');
const t = useTranslate(i18n);
const value = ref('');
return { t, value };
},
};
</script> </script>
<template>
<demo-block :title="t('autosize')">
<van-cell-group inset>
<van-field
v-model="value"
autosize
rows="1"
type="textarea"
:label="t('message')"
:placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,16 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')">
<van-cell-group inset>
<van-field
v-model="value"
:label="t('label')"
:placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
@ -25,11 +13,18 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const value = ref('');
const t = useTranslate(i18n);
const value = ref('');
return { t, value };
},
};
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-cell-group inset>
<van-field
v-model="value"
:label="t('label')"
:placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,41 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('customType')"> import { reactive } from 'vue';
<van-cell-group inset>
<van-field
v-model="text"
:label="t('text')"
:placeholder="t('textPlaceholder')"
/>
<van-field
v-model="phone"
type="tel"
:label="t('phone')"
:placeholder="t('phonePlaceholder')"
/>
<van-field
v-model="digit"
type="digit"
:label="t('digit')"
:placeholder="t('digitPlaceholder')"
/>
<van-field
v-model="number"
type="number"
:label="t('number')"
:placeholder="t('numberPlaceholder')"
/>
<van-field
v-model="password"
type="password"
:label="t('password')"
:placeholder="t('passwordPlaceholder')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -65,21 +29,48 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); text: '',
const state = reactive({ phone: '',
text: '', digit: '',
phone: '', number: '',
digit: '', password: '',
number: '', });
password: '',
});
return {
...toRefs(state),
t,
};
},
};
</script> </script>
<template>
<demo-block :title="t('customType')">
<van-cell-group inset>
<van-field
v-model="state.text"
:label="t('text')"
:placeholder="t('textPlaceholder')"
/>
<van-field
v-model="state.phone"
type="tel"
:label="t('phone')"
:placeholder="t('phonePlaceholder')"
/>
<van-field
v-model="state.digit"
type="digit"
:label="t('digit')"
:placeholder="t('digitPlaceholder')"
/>
<van-field
v-model="state.number"
type="number"
:label="t('number')"
:placeholder="t('numberPlaceholder')"
/>
<van-field
v-model="state.password"
type="password"
:label="t('password')"
:placeholder="t('passwordPlaceholder')"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,21 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('disabled')">
<van-cell-group inset>
<van-field
:model-value="t('inputReadonly')"
:label="t('text')"
readonly
/>
<van-field
:model-value="t('inputDisabled')"
:label="t('text')"
disabled
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -32,11 +15,22 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script> </script>
<template>
<demo-block :title="t('disabled')">
<van-cell-group inset>
<van-field
:model-value="t('inputReadonly')"
:label="t('text')"
readonly
/>
<van-field
:model-value="t('inputDisabled')"
:label="t('text')"
disabled
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,26 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('errorInfo')"> import { reactive } from 'vue';
<van-cell-group inset>
<van-field
v-model="username"
error
required
:label="t('username')"
:placeholder="t('usernamePlaceholder')"
/>
<van-field
v-model="phone"
required
:label="t('phone')"
:placeholder="t('phonePlaceholder')"
:error-message="t('phoneError')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -38,18 +17,30 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); phone: '123',
const state = reactive({ username: '',
phone: '123', });
username: '',
});
return {
...toRefs(state),
t,
};
},
};
</script> </script>
<template>
<demo-block :title="t('errorInfo')">
<van-cell-group inset>
<van-field
v-model="state.username"
error
required
:label="t('username')"
:placeholder="t('usernamePlaceholder')"
/>
<van-field
v-model="state.phone"
required
:label="t('phone')"
:placeholder="t('phonePlaceholder')"
:error-message="t('phoneError')"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,25 +1,5 @@
<template> <script setup lang="ts">
<demo-block v-if="!isWeapp" :title="t('formatValue')"> import { reactive } from 'vue';
<van-cell-group inset>
<van-field
v-model="value1"
:label="t('text')"
:formatter="formatter"
:placeholder="t('formatOnChange')"
/>
<van-field
v-model="value2"
:label="t('text')"
:formatter="formatter"
format-trigger="onBlur"
:placeholder="t('formatOnBlur')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -37,20 +17,30 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); value1: '',
const state = reactive({ value2: '',
value1: '', });
value2: '', const formatter = (value: string) => value.replace(/\d/g, '');
});
const formatter = (value: string) => value.replace(/\d/g, '');
return {
...toRefs(state),
t,
formatter,
};
},
};
</script> </script>
<template>
<demo-block v-if="!isWeapp" :title="t('formatValue')">
<van-cell-group inset>
<van-field
v-model="state.value1"
:label="t('text')"
:formatter="formatter"
:placeholder="t('formatOnChange')"
/>
<van-field
v-model="state.value2"
:label="t('text')"
:formatter="formatter"
format-trigger="onBlur"
:placeholder="t('formatOnBlur')"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,17 +1,4 @@
<template> <script setup lang="ts">
<demo-block :title="t('inputAlign')">
<van-cell-group inset>
<van-field
v-model="value"
:label="t('text')"
:placeholder="t('alignPlaceHolder')"
input-align="right"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
@ -28,12 +15,19 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const value = ref('');
const t = useTranslate(i18n);
const value = ref('');
return { t, value };
},
};
</script> </script>
<template>
<demo-block :title="t('inputAlign')">
<van-cell-group inset>
<van-field
v-model="value"
:label="t('text')"
:placeholder="t('alignPlaceHolder')"
input-align="right"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,3 +1,26 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
sms: '短信验证码',
sendSMS: '发送验证码',
insertButton: '插入按钮',
smsPlaceholder: '请输入短信验证码',
},
'en-US': {
sms: 'SMS',
sendSMS: 'Send SMS',
insertButton: 'Insert Button',
smsPlaceholder: 'SMS',
},
};
const t = useTranslate(i18n);
const sms = ref('');
</script>
<template> <template>
<demo-block :title="t('insertButton')"> <demo-block :title="t('insertButton')">
<van-cell-group inset> <van-cell-group inset>
@ -17,32 +40,3 @@
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
sms: '短信验证码',
sendSMS: '发送验证码',
insertButton: '插入按钮',
smsPlaceholder: '请输入短信验证码',
},
'en-US': {
sms: 'SMS',
sendSMS: 'Send SMS',
insertButton: 'Insert Button',
smsPlaceholder: 'SMS',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const sms = ref('');
return { t, sms };
},
};
</script>

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

@ -1,26 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('showIcon')"> import { reactive } from 'vue';
<van-cell-group inset>
<van-field
v-model="icon1"
:label="t('text')"
left-icon="smile-o"
right-icon="warning-o"
:placeholder="t('showIcon')"
/>
<van-field
v-model="icon2"
clearable
:label="t('text')"
left-icon="music-o"
:placeholder="t('showClearIcon')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -36,18 +15,30 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); icon1: '',
const state = reactive({ icon2: '123',
icon1: '', });
icon2: '123',
});
return {
...toRefs(state),
t,
};
},
};
</script> </script>
<template>
<demo-block :title="t('showIcon')">
<van-cell-group inset>
<van-field
v-model="state.icon1"
:label="t('text')"
left-icon="smile-o"
right-icon="warning-o"
:placeholder="t('showIcon')"
/>
<van-field
v-model="state.icon2"
clearable
:label="t('text')"
left-icon="music-o"
:placeholder="t('showClearIcon')"
/>
</van-cell-group>
</demo-block>
</template>

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

@ -1,21 +1,4 @@
<template> <script setup lang="ts">
<demo-block v-if="!isWeapp" :title="t('showWordLimit')">
<van-cell-group inset>
<van-field
v-model="value"
autosize
show-word-limit
rows="2"
type="textarea"
maxlength="50"
:label="t('message')"
:placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
@ -32,12 +15,23 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const value = ref('');
const t = useTranslate(i18n);
const value = ref('');
return { t, value };
},
};
</script> </script>
<template>
<demo-block v-if="!isWeapp" :title="t('showWordLimit')">
<van-cell-group inset>
<van-field
v-model="value"
autosize
show-word-limit
rows="2"
type="textarea"
maxlength="50"
:label="t('message')"
:placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block>
</template>

41
src/field/demo/index.vue
View File

@ -1,3 +1,16 @@
<script setup lang="ts">
import BasicUsage from './BasicUsage.vue';
import CustomType from './CustomType.vue';
import Disabled from './Disabled.vue';
import ShowIcon from './ShowIcon.vue';
import ErrorInfo from './ErrorInfo.vue';
import InsertButton from './InsertButton.vue';
import FormatValue from './FormatValue.vue';
import Autosize from './Autosize.vue';
import ShowWordLimit from './ShowWordLimit.vue';
import InputAlign from './InputAlign.vue';
</script>
<template> <template>
<basic-usage /> <basic-usage />
<custom-type /> <custom-type />
@ -10,31 +23,3 @@
<show-word-limit /> <show-word-limit />
<input-align /> <input-align />
</template> </template>
<script lang="ts">
import BasicUsage from './BasicUsage.vue';
import CustomType from './CustomType.vue';
import Disabled from './Disabled.vue';
import ShowIcon from './ShowIcon.vue';
import ErrorInfo from './ErrorInfo.vue';
import InsertButton from './InsertButton.vue';
import FormatValue from './FormatValue.vue';
import Autosize from './Autosize.vue';
import ShowWordLimit from './ShowWordLimit.vue';
import InputAlign from './InputAlign.vue';
export default {
components: {
BasicUsage,
CustomType,
Disabled,
ShowIcon,
ErrorInfo,
InsertButton,
FormatValue,
Autosize,
ShowWordLimit,
InputAlign,
},
};
</script>

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

@ -1,35 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('basicUsage')"> import { reactive } from 'vue';
<van-form @submit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field
v-model="username"
name="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')"
/>
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { FieldValidateError } from '../../field/types'; import { FieldValidateError } from '../../field/types';
@ -50,31 +20,50 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); username: '',
const state = reactive({ password: '',
username: '', });
password: '',
});
const onSubmit = (values: Record<string, string>) => { const onSubmit = (values: Record<string, string>) => {
console.log('submit', values); console.log('submit', values);
}; };
const onFailed = (errorInfo: { const onFailed = (errorInfo: {
values: Record<string, string>; values: Record<string, string>;
errors: FieldValidateError[]; errors: FieldValidateError[];
}) => { }) => {
console.log('failed', errorInfo); console.log('failed', errorInfo);
};
return {
...toRefs(state),
t,
onSubmit,
onFailed,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('basicUsage')">
<van-form @submit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field
v-model="state.username"
name="username"
:label="t('username')"
:rules="[{ required: true, message: t('requireUsername') }]"
:placeholder="t('username')"
/>
<van-field
v-model="state.password"
type="password"
name="password"
:label="t('password')"
:rules="[{ required: true, message: t('requirePassword') }]"
:placeholder="t('password')"
/>
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
</template>

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

@ -1,82 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('fieldType')"> import { reactive } from 'vue';
<van-form @submit="onSubmit">
<van-cell-group inset>
<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')">
<template #input>
<van-checkbox v-model="checkbox" shape="square" />
</template>
</van-field>
<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
</van-checkbox>
<van-checkbox name="2" shape="square">
{{ t('checkbox') }} 2
</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
<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-group>
</template>
</van-field>
<van-field name="stepper" :label="t('stepper')">
<template #input>
<van-stepper v-model="stepper" />
</template>
</van-field>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="slider" />
</template>
</van-field>
<van-field name="uploader" :label="t('uploader')">
<template #input>
<van-uploader v-model="uploader" max-count="2" />
</template>
</van-field>
<field-type-picker />
<field-type-datetime-picker />
<field-type-area />
<field-type-calendar />
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import FieldTypeArea from './FieldTypeArea.vue'; import FieldTypeArea from './FieldTypeArea.vue';
import FieldTypePicker from './FieldTypePicker.vue'; import FieldTypePicker from './FieldTypePicker.vue';
@ -114,36 +37,99 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
components: { const state = reactive({
FieldTypeArea, rate: 3,
FieldTypePicker, radio: '1',
FieldTypeCalendar, slider: 50,
FieldTypeDatetimePicker, stepper: 1,
}, uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
checkbox: false,
checkboxGroup: [],
switchChecked: false,
});
setup() { const onSubmit = (values: Record<string, string>) => {
const t = useTranslate(i18n); console.log(values);
const state = reactive({
rate: 3,
radio: '1',
slider: 50,
stepper: 1,
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
checkbox: false,
checkboxGroup: [],
switchChecked: false,
});
const onSubmit = (values: Record<string, string>) => {
console.log(values);
};
return {
...toRefs(state),
t,
onSubmit,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('fieldType')">
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field name="switch" :label="t('switch')">
<template #input>
<van-switch v-model="state.switchChecked" size="20" />
</template>
</van-field>
<van-field name="checkbox" :label="t('checkbox')">
<template #input>
<van-checkbox v-model="state.checkbox" shape="square" />
</template>
</van-field>
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
<template #input>
<van-checkbox-group
v-model="state.checkboxGroup"
direction="horizontal"
>
<van-checkbox name="1" shape="square">
{{ t('checkbox') }} 1
</van-checkbox>
<van-checkbox name="2" shape="square">
{{ t('checkbox') }} 2
</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
<van-field name="radio" :label="t('radio')">
<template #input>
<van-radio-group v-model="state.radio" direction="horizontal">
<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')">
<template #input>
<van-stepper v-model="state.stepper" />
</template>
</van-field>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="state.rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="state.slider" />
</template>
</van-field>
<van-field name="uploader" :label="t('uploader')">
<template #input>
<van-uploader v-model="state.uploader" max-count="2" />
</template>
</van-field>
<field-type-picker />
<field-type-datetime-picker />
<field-type-area />
<field-type-calendar />
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
</template>

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

@ -1,24 +1,5 @@
<template> <script setup lang="ts">
<van-field import { reactive } from 'vue';
v-model="value"
is-link
readonly
name="area"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="showArea = true"
/>
<van-popup v-model:show="showArea" round position="bottom" teleport="body">
<van-area
:area-list="t('areaList')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { areaList } from '@vant/area-data'; import { areaList } from '@vant/area-data';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { AreaColumnOption } from '../../area'; import { AreaColumnOption } from '../../area';
@ -37,32 +18,45 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); value: '',
const state = reactive({ showArea: false,
value: '', });
showArea: false,
});
const onConfirm = (values: AreaColumnOption[]) => { const onConfirm = (values: AreaColumnOption[]) => {
state.value = values state.value = values
.filter((item) => !!item) .filter((item) => !!item)
.map((item) => item.name) .map((item) => item.name)
.join('/'); .join('/');
state.showArea = false; state.showArea = false;
}; };
const onCancel = () => { const onCancel = () => {
state.showArea = false; state.showArea = false;
};
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
},
}; };
</script> </script>
<template>
<van-field
v-model="state.value"
is-link
readonly
name="area"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="state.showArea = true"
/>
<van-popup
v-model:show="state.showArea"
round
position="bottom"
teleport="body"
>
<van-area
:area-list="t('areaList')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>

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

@ -1,23 +1,5 @@
<template> <script setup lang="ts">
<van-field import { reactive } from 'vue';
v-model="value"
is-link
readonly
name="calendar"
:label="t('calendar')"
:placeholder="t('placeholder')"
@click="showCalendar = true"
/>
<van-calendar
v-model:show="showCalendar"
round
teleport="body"
@confirm="onConfirm"
/>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -31,27 +13,34 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); value: '',
const state = reactive({ showCalendar: false,
value: '', });
showCalendar: false,
});
const formatDate = (date: Date) => const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}`;
`${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (date: Date) => { const onConfirm = (date: Date) => {
state.value = formatDate(date); state.value = formatDate(date);
state.showCalendar = false; state.showCalendar = false;
};
return {
...toRefs(state),
t,
onConfirm,
};
},
}; };
</script> </script>
<template>
<van-field
v-model="state.value"
is-link
readonly
name="calendar"
:label="t('calendar')"
:placeholder="t('placeholder')"
@click="state.showCalendar = true"
/>
<van-calendar
v-model:show="state.showCalendar"
round
teleport="body"
@confirm="onConfirm"
/>
</template>

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

@ -1,20 +1,5 @@
<template> <script setup lang="ts">
<van-field import { reactive } from 'vue';
v-model="value"
is-link
readonly
name="datetimePicker"
:label="t('label')"
:placeholder="t('placeholder')"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
</van-popup>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -28,29 +13,38 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); value: '',
const state = reactive({ showPicker: false,
value: '', });
showPicker: false,
});
const onConfirm = (time: string) => { const onConfirm = (time: string) => {
state.value = time; state.value = time;
state.showPicker = false; state.showPicker = false;
}; };
const onCancel = () => { const onCancel = () => {
state.showPicker = false; state.showPicker = false;
};
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
},
}; };
</script> </script>
<template>
<van-field
v-model="state.value"
is-link
readonly
name="datetimePicker"
:label="t('label')"
:placeholder="t('placeholder')"
@click="state.showPicker = true"
/>
<van-popup
v-model:show="state.showPicker"
round
position="bottom"
teleport="body"
>
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
</van-popup>
</template>

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

@ -1,24 +1,5 @@
<template> <script setup lang="ts">
<van-field import { reactive } from 'vue';
v-model="value"
is-link
readonly
name="picker"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
<van-picker
:columns="t('textColumns')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -34,29 +15,42 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); value: '',
const state = reactive({ showPicker: false,
value: '', });
showPicker: false,
});
const onConfirm = (value: string) => { const onConfirm = (value: string) => {
state.value = value; state.value = value;
state.showPicker = false; state.showPicker = false;
}; };
const onCancel = () => { const onCancel = () => {
state.showPicker = false; state.showPicker = false;
};
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
},
}; };
</script> </script>
<template>
<van-field
v-model="state.value"
is-link
readonly
name="picker"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="state.showPicker = true"
/>
<van-popup
v-model:show="state.showPicker"
round
position="bottom"
teleport="body"
>
<van-picker
:columns="t('textColumns')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>

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

@ -1,47 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('title')"> import { reactive } from 'vue';
<van-form @sumbit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field
v-model="value1"
name="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')"
/>
<van-field
v-model="value3"
name="validatorMessage"
:label="t('label')"
:rules="[{ validator: validatorMessage }]"
:placeholder="t('validatorMessage')"
/>
<van-field
v-model="value4"
name="asyncValidator"
:label="t('label')"
:rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')"
/>
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { FieldValidateError } from '../../field/types'; import { FieldValidateError } from '../../field/types';
import { Toast } from '../../toast'; import { Toast } from '../../toast';
@ -73,51 +31,79 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); value1: '',
const state = reactive({ value2: '',
value1: '', value3: 'abc',
value2: '', value4: '',
value3: 'abc', });
value4: '', const pattern = /\d{6}/;
});
const validator = (val: string) => /1\d{10}/.test(val); const validator = (val: string) => /1\d{10}/.test(val);
const validatorMessage = (val: string) => t('invalid', val); const validatorMessage = (val: string) => t('invalid', val);
const asyncValidator = (val: string) => const asyncValidator = (val: string) =>
new Promise((resolve) => { new Promise((resolve) => {
Toast.loading(t('validating')); Toast.loading(t('validating'));
setTimeout(() => { setTimeout(() => {
Toast.clear(); Toast.clear();
resolve(val === '1234'); resolve(val === '1234');
}, 1000); }, 1000);
}); });
const onSubmit = (values: Record<string, string>) => { const onSubmit = (values: Record<string, string>) => {
console.log('submit', values); console.log('submit', values);
}; };
const onFailed = (errorInfo: { const onFailed = (errorInfo: {
values: Record<string, string>; values: Record<string, string>;
errors: FieldValidateError[]; errors: FieldValidateError[];
}) => { }) => {
console.log('failed', errorInfo); console.log('failed', errorInfo);
};
return {
...toRefs(state),
t,
pattern: /\d{6}/,
onSubmit,
onFailed,
validator,
asyncValidator,
validatorMessage,
};
},
}; };
</script> </script>
<template>
<demo-block :title="t('title')">
<van-form @sumbit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field
v-model="state.value1"
name="pattern"
:label="t('label')"
:rules="[{ pattern, message: t('message') }]"
:placeholder="t('pattern')"
/>
<van-field
v-model="state.value2"
name="validator"
:label="t('label')"
:rules="[{ validator, message: t('message') }]"
:placeholder="t('validator')"
/>
<van-field
v-model="state.value3"
name="validatorMessage"
:label="t('label')"
:rules="[{ validator: validatorMessage }]"
:placeholder="t('validatorMessage')"
/>
<van-field
v-model="state.value4"
name="asyncValidator"
:label="t('label')"
:rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')"
/>
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
</div>
</van-form>
</demo-block>
</template>

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

@ -1,19 +1,11 @@
<script setup lang="ts">
import BasicUsage from './BasicUsage.vue';
import ValidateRules from './ValidateRules.vue';
import FieldType from './FieldType.vue';
</script>
<template> <template>
<basic-usage /> <basic-usage />
<validate-rules /> <validate-rules />
<field-type /> <field-type />
</template> </template>
<script lang="ts">
import BasicUsage from './BasicUsage.vue';
import ValidateRules from './ValidateRules.vue';
import FieldType from './FieldType.vue';
export default {
components: {
BasicUsage,
FieldType,
ValidateRules,
},
};
</script>

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

@ -1,3 +1,36 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '文字',
route: '页面导航',
gutter: '格子间距',
square: '正方形格子',
columnNum: '自定义列数',
customContent: '自定义内容',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
showBadge: '徽标提示',
horizontal: '内容横排',
},
'en-US': {
text: 'Text',
route: 'Route',
gutter: 'Gutter',
square: 'Square',
columnNum: 'Column Num',
customContent: 'Custom Content',
urlRoute: 'URL',
vueRoute: 'Vue Router',
showBadge: 'Show Badge',
horizontal: 'Horizontal',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-grid> <van-grid>
@ -63,45 +96,3 @@
</van-grid> </van-grid>
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '文字',
route: '页面导航',
gutter: '格子间距',
square: '正方形格子',
columnNum: '自定义列数',
customContent: '自定义内容',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
showBadge: '徽标提示',
horizontal: '内容横排',
},
'en-US': {
text: 'Text',
route: 'Route',
gutter: 'Gutter',
square: 'Square',
columnNum: 'Column Num',
customContent: 'Custom Content',
urlRoute: 'URL',
vueRoute: 'Vue Router',
showBadge: 'Show Badge',
horizontal: 'Horizontal',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less">
@import '../../style/var';
</style>

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

@ -1,3 +1,92 @@
<script setup lang="ts">
import icons from '@vant/icons';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Notify } from '../../notify';
// from https://30secondsofcode.org
function copyToClipboard(str: string) {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selection = document.getSelection();
if (!selection) {
return;
}
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
selection.removeAllRanges();
selection.addRange(selected);
}
}
const i18n = {
'zh-CN': {
title: '图标列表',
badge: '徽标提示',
basic: '基础图标',
copied: '复制成功',
outline: '线框风格',
filled: '实底风格',
demo: '用法示例',
color: '图标颜色',
size: '图标大小',
},
'en-US': {
title: 'Icon List',
badge: 'Show Badge',
basic: 'Basic',
copied: 'Copied',
outline: 'Outline',
filled: 'Filled',
demo: 'Demo',
color: 'Icon Color',
size: 'Icon Size',
},
};
const t = useTranslate(i18n);
const tab = ref(0);
const demoIcon = 'chat-o';
const demoImage = 'https://b.yzcdn.cn/vant/icon-demo-1126.png';
const copy = (icon: string, option: Record<string, unknown> = {}) => {
let tag = `<van-icon name="${icon}"`;
if ('dot' in option) {
tag = `${tag} ${option.dot ? 'dot' : ''}`;
}
if ('badge' in option) {
tag = `${tag} badge="${option.badge}"`;
}
if ('color' in option) {
tag = `${tag} color="${option.color}"`;
}
if ('size' in option) {
tag = `${tag} size="${option.size}"`;
}
tag = `${tag} />`;
copyToClipboard(tag);
Notify({
type: 'success',
duration: 1500,
className: 'demo-icon-notify',
message: `${t('copied')}：${tag}`,
});
};
</script>
<template> <template>
<van-tabs v-model:active="tab" sticky> <van-tabs v-model:active="tab" sticky>
<van-tab :title="t('demo')"> <van-tab :title="t('demo')">
@ -93,106 +182,6 @@
</van-tabs> </van-tabs>
</template> </template>
<script lang="ts">
import icons from '@vant/icons';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Notify } from '../../notify';
// from https://30secondsofcode.org
function copyToClipboard(str: string) {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selection = document.getSelection();
if (!selection) {
return;
}
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
selection.removeAllRanges();
selection.addRange(selected);
}
}
const i18n = {
'zh-CN': {
title: '图标列表',
badge: '徽标提示',
basic: '基础图标',
copied: '复制成功',
outline: '线框风格',
filled: '实底风格',
demo: '用法示例',
color: '图标颜色',
size: '图标大小',
},
'en-US': {
title: 'Icon List',
badge: 'Show Badge',
basic: 'Basic',
copied: 'Copied',
outline: 'Outline',
filled: 'Filled',
demo: 'Demo',
color: 'Icon Color',
size: 'Icon Size',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const tab = ref(0);
const copy = (icon: string, option: Record<string, unknown> = {}) => {
let tag = `<van-icon name="${icon}"`;
if ('dot' in option) {
tag = `${tag} ${option.dot ? 'dot' : ''}`;
}
if ('badge' in option) {
tag = `${tag} badge="${option.badge}"`;
}
if ('color' in option) {
tag = `${tag} color="${option.color}"`;
}
if ('size' in option) {
tag = `${tag} size="${option.size}"`;
}
tag = `${tag} />`;
copyToClipboard(tag);
Notify({
type: 'success',
duration: 1500,
className: 'demo-icon-notify',
message: `${t('copied')}：${tag}`,
});
};
return {
t,
tab,
copy,
icons,
demoIcon: 'chat-o',
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,40 +1,5 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')"> import { reactive } from 'vue';
<van-cell is-link @click="showImagePreview()">
{{ t('showImages') }}
</van-cell>
</demo-block>
<demo-block card :title="t('customConfig')">
<van-cell is-link @click="showImagePreview({ startPosition: 1 })">
{{ t('startPosition') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ closeable: true })">
{{ t('showClose') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ onClose })">
{{ t('closeEvent') }}
</van-cell>
</demo-block>
<demo-block card :title="t('beforeClose')">
<van-cell is-link @click="showImagePreview({ beforeClose })">
{{ t('beforeClose') }}
</van-cell>
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell is-link @click="showComponentCall">
{{ t('componentCall') }}
</van-cell>
<van-image-preview v-model:show="show" :images="images" @change="onChange">
<template #index>{{ t('index', index) }}</template>
</van-image-preview>
</demo-block>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { ImagePreview, ImagePreviewOptions } from '..'; import { ImagePreview, ImagePreviewOptions } from '..';
import { Toast } from '../../toast'; import { Toast } from '../../toast';
@ -71,54 +36,78 @@ const images = [
'https://img.yzcdn.cn/vant/apple-4.jpg', 'https://img.yzcdn.cn/vant/apple-4.jpg',
]; ];
export default { const t = useTranslate(i18n);
setup() { const state = reactive({
const t = useTranslate(i18n); show: false,
const state = reactive({ index: 0,
show: false, });
index: 0,
});
const onClose = () => Toast(t('closed')); const onClose = () => Toast(t('closed'));
const beforeClose = () => const beforeClose = () =>
new Promise((resolve) => { new Promise<boolean>((resolve) => {
setTimeout(() => { setTimeout(() => {
resolve(true); resolve(true);
}, 1000); }, 1000);
}); });
const showComponentCall = () => { const showComponentCall = () => {
state.show = true; state.show = true;
}; };
const onChange = (index: number) => { const onChange = (index: number) => {
state.index = index; state.index = index;
}; };
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => { const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
const instance = ImagePreview({ const instance = ImagePreview({
images, images,
...options, ...options,
}); });
if (options.beforeClose) { if (options.beforeClose) {
setTimeout(() => { setTimeout(() => {
instance?.close(); instance?.close();
}, 2000); }, 2000);
} }
};
return {
...toRefs(state),
t,
images,
onClose,
onChange,
beforeClose,
showImagePreview,
showComponentCall,
};
},
}; };
</script> </script>
<template>
<demo-block card :title="t('basicUsage')">
<van-cell is-link @click="showImagePreview()">
{{ t('showImages') }}
</van-cell>
</demo-block>
<demo-block card :title="t('customConfig')">
<van-cell is-link @click="showImagePreview({ startPosition: 1 })">
{{ t('startPosition') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ closeable: true })">
{{ t('showClose') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ onClose })">
{{ t('closeEvent') }}
</van-cell>
</demo-block>
<demo-block card :title="t('beforeClose')">
<van-cell is-link @click="showImagePreview({ beforeClose })">
{{ t('beforeClose') }}
</van-cell>
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell is-link @click="showComponentCall">
{{ t('componentCall') }}
</van-cell>
<van-image-preview
v-model:show="state.show"
:images="images"
@change="onChange"
>
<template #index>{{ t('index', state.index) }}</template>
</van-image-preview>
</demo-block>
</template>

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

@ -1,3 +1,32 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
fitMode: '填充模式',
round: '圆形图片',
loading: '加载中提示',
error: '加载失败提示',
defaultTip: '默认提示',
customTip: '自定义提示',
loadFail: '加载失败',
},
'en-US': {
fitMode: 'Fit Mode',
round: 'Round',
loading: 'Loading',
error: 'Error',
defaultTip: 'Default Tip',
customTip: 'Custom Tip',
loadFail: 'Load failed',
},
};
const t = useTranslate(i18n);
const image = 'https://img.yzcdn.cn/vant/cat.jpeg';
const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-row> <van-row>
@ -58,43 +87,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
fitMode: '填充模式',
round: '圆形图片',
loading: '加载中提示',
error: '加载失败提示',
defaultTip: '默认提示',
customTip: '自定义提示',
loadFail: '加载失败',
},
'en-US': {
fitMode: 'Fit Mode',
round: 'Round',
loading: 'Loading',
error: 'Error',
defaultTip: 'Default Tip',
customTip: 'Custom Tip',
loadFail: 'Load failed',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return {
t,
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
fits: ['contain', 'cover', 'fill', 'none', 'scale-down'],
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,29 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '文本',
customIndexList: '自定义索引列表',
},
'en-US': {
text: 'Text',
customIndexList: 'Custom Index List',
},
};
const t = useTranslate(i18n);
const activeTab = ref(0);
const indexList: string[] = [];
const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10];
const charCodeOfA = 'A'.charCodeAt(0);
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
</script>
<template> <template>
<van-tabs v-model:active="activeTab"> <van-tabs v-model:active="activeTab">
<van-tab :title="t('basicUsage')"> <van-tab :title="t('basicUsage')">
@ -25,39 +51,3 @@
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '文本',
customIndexList: '自定义索引列表',
},
'en-US': {
text: 'Text',
customIndexList: 'Custom Index List',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const activeTab = ref(0);
const indexList = [];
const charCodeOfA = 'A'.charCodeAt(0);
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
return {
t,
activeTab,
indexList,
customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
};
},
};
</script>

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

@ -1,3 +1,35 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '背景图懒加载',
title3: '懒加载模块',
},
'en-US': {
title2: 'Lazyload Background Image',
title3: 'Lazyload Component',
},
};
const t = useTranslate(i18n);
const imageList = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg',
];
const backgroundImageList = [
'https://img.yzcdn.cn/vant/apple-5.jpg',
'https://img.yzcdn.cn/vant/apple-6.jpg',
];
const componentImageList = [
'https://img.yzcdn.cn/vant/apple-8.jpg',
'https://img.yzcdn.cn/vant/apple-7.jpg',
];
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<img v-for="img in imageList" :key="img" v-lazy="img" /> <img v-for="img in imageList" :key="img" v-lazy="img" />
@ -18,45 +50,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '背景图懒加载',
title3: '懒加载模块',
},
'en-US': {
title2: 'Lazyload Background Image',
title3: 'Lazyload Component',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return {
t,
imageList: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg',
],
backgroundImageList: [
'https://img.yzcdn.cn/vant/apple-5.jpg',
'https://img.yzcdn.cn/vant/apple-6.jpg',
],
componentImageList: [
'https://img.yzcdn.cn/vant/apple-8.jpg',
'https://img.yzcdn.cn/vant/apple-7.jpg',
],
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,84 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
errorInfo: '错误提示',
errorText: '请求失败，点击重新加载',
pullRefresh: '下拉刷新',
finishedText: '没有更多了',
},
'en-US': {
errorInfo: 'Error Info',
errorText: 'Request failed. Click to reload',
pullRefresh: 'PullRefresh',
finishedText: 'Finished',
},
};
const t = useTranslate(i18n);
const list = ref([
{
items: [] as string[],
refreshing: false,
loading: false,
error: false,
finished: false,
},
{
items: [] as string[],
refreshing: false,
loading: false,
error: false,
finished: false,
},
{
items: [] as string[],
refreshing: false,
loading: false,
error: false,
finished: false,
},
]);
const onLoad = (index: number) => {
const currentList = list.value[index];
currentList.loading = true;
setTimeout(() => {
if (currentList.refreshing) {
currentList.items = [];
currentList.refreshing = false;
}
for (let i = 0; i < 10; i++) {
const text = currentList.items.length + 1;
currentList.items.push(text < 10 ? '0' + text : String(text));
}
currentList.loading = false;
currentList.refreshing = false;
// show error info in second demo
if (index === 1 && currentList.items.length === 10 && !currentList.error) {
currentList.error = true;
} else {
currentList.error = false;
}
if (currentList.items.length >= 40) {
currentList.finished = true;
}
}, 1000);
};
const onRefresh = (index: number) => {
list.value[index].finished = false;
onLoad(index);
};
</script>
<template> <template>
<van-tabs> <van-tabs>
<van-tab :title="t('basicUsage')"> <van-tab :title="t('basicUsage')">
@ -38,100 +119,6 @@
</van-tabs> </van-tabs>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
errorInfo: '错误提示',
errorText: '请求失败，点击重新加载',
pullRefresh: '下拉刷新',
finishedText: '没有更多了',
},
'en-US': {
errorInfo: 'Error Info',
errorText: 'Request failed. Click to reload',
pullRefresh: 'PullRefresh',
finishedText: 'Finished',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
list: [
{
items: [] as string[],
refreshing: false,
loading: false,
error: false,
finished: false,
},
{
items: [] as string[],
refreshing: false,
loading: false,
error: false,
finished: false,
},
{
items: [] as string[],
refreshing: false,
loading: false,
error: false,
finished: false,
},
],
});
const onLoad = (index: number) => {
const list = state.list[index];
list.loading = true;
setTimeout(() => {
if (list.refreshing) {
list.items = [];
list.refreshing = false;
}
for (let i = 0; i < 10; i++) {
const text = list.items.length + 1;
list.items.push(text < 10 ? '0' + text : String(text));
}
list.loading = false;
list.refreshing = false;
// show error info in second demo
if (index === 1 && list.items.length === 10 && !list.error) {
list.error = true;
} else {
list.error = false;
}
if (list.items.length >= 40) {
list.finished = true;
}
}, 1000);
};
const onRefresh = (index: number) => {
state.list[index].finished = false;
onLoad(index);
};
return {
...toRefs(state),
t,
onLoad,
onRefresh,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,28 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
type: '加载类型',
text: '加载文案',
size: '自定义大小',
color: '自定义颜色',
vertical: '垂直排列',
textColor: '自定义文本颜色',
},
'en-US': {
type: 'Type',
text: 'Text',
size: 'Size',
color: 'Color',
vertical: 'Vertical',
textColor: 'Text Color',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('type')"> <demo-block :title="t('type')">
<van-loading /> <van-loading />
@ -36,36 +61,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
type: '加载类型',
text: '加载文案',
size: '自定义大小',
color: '自定义颜色',
vertical: '垂直排列',
textColor: '自定义文本颜色',
},
'en-US': {
type: 'Type',
text: 'Text',
size: 'Size',
color: 'Color',
vertical: 'Vertical',
textColor: 'Text Color',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,21 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
useSlot: '使用插槽',
},
'en-US': {
useSlot: 'Use Slot',
},
};
const t = useTranslate(i18n);
const onClickLeft = () => Toast(t('back'));
const onClickRight = () => Toast(t('button'));
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-nav-bar <van-nav-bar
@ -18,31 +36,3 @@
</van-nav-bar> </van-nav-bar>
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
useSlot: '使用插槽',
},
'en-US': {
useSlot: 'Use Slot',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const onClickLeft = () => Toast(t('back'));
const onClickRight = () => Toast(t('button'));
return {
t,
onClickLeft,
onClickRight,
};
},
};
</script>

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

@ -1,3 +1,32 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
mode: '通知栏模式',
content: '内容',
wrapable: '多行展示',
shortText: '技术是开发它的人的共同灵魂。',
scrollable: '滚动播放',
customStyle: '自定义样式',
verticalScroll: '垂直滚动',
},
'en-US': {
text: 'Technology is the common soul of the people who developed it.',
mode: 'Mode',
content: 'Content',
wrapable: 'Wrapable',
shortText: 'Some short text.',
customStyle: 'Custom Style',
scrollable: 'Scrollable',
verticalScroll: 'Vertical Scroll',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" /> <van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
@ -42,40 +71,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
mode: '通知栏模式',
content: '内容',
wrapable: '多行展示',
shortText: '技术是开发它的人的共同灵魂。',
scrollable: '滚动播放',
customStyle: '自定义样式',
verticalScroll: '垂直滚动',
},
'en-US': {
text: 'Technology is the common soul of the people who developed it.',
mode: 'Mode',
content: 'Content',
wrapable: 'Wrapable',
shortText: 'Some short text.',
customStyle: 'Custom Style',
scrollable: 'Scrollable',
verticalScroll: 'Vertical Scroll',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,35 +1,4 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="showNotify" />
</demo-block>
<demo-block card :title="t('notifyType')">
<van-cell is-link :title="t('primary')" @click="showType('primary')" />
<van-cell is-link :title="t('success')" @click="showType('success')" />
<van-cell is-link :title="t('danger')" @click="showType('danger')" />
<van-cell is-link :title="t('warning')" @click="showType('warning')" />
</demo-block>
<demo-block card :title="t('customNotify')">
<van-cell is-link :title="t('customColor')" @click="showCustomColor" />
<van-cell
is-link
:title="t('customDuration')"
@click="showCustomDuration"
/>
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
<van-notify v-model:show="show" type="success">
<van-icon name="bell" style="margin-right: 4px" />
<span>{{ t('content') }}</span>
</van-notify>
</demo-block>
</template>
<script lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { Notify } from '..'; import { Notify } from '..';
@ -62,53 +31,70 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const show = ref(false);
const t = useTranslate(i18n);
const show = ref(false);
const showNotify = () => { const showNotify = () => {
Notify(t('content')); Notify(t('content'));
}; };
const showCustomColor = () => { const showCustomColor = () => {
Notify({ Notify({
color: '#ad0000', color: '#ad0000',
message: t('customColor'), message: t('customColor'),
background: '#ffe1e1', background: '#ffe1e1',
}); });
}; };
const showCustomDuration = () => { const showCustomDuration = () => {
Notify({ Notify({
message: t('customDuration'), message: t('customDuration'),
duration: 1000, duration: 1000,
}); });
}; };
const showType = (type: NotifyType) => { const showType = (type: NotifyType) => {
Notify({ Notify({
message: t('content'), message: t('content'),
type, type,
}); });
}; };
const showComponentCall = () => { const showComponentCall = () => {
show.value = true; show.value = true;
setTimeout(() => { setTimeout(() => {
show.value = false; show.value = false;
}, 2000); }, 2000);
};
return {
t,
show,
showType,
showNotify,
showCustomColor,
showComponentCall,
showCustomDuration,
};
},
}; };
</script> </script>
<template>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="showNotify" />
</demo-block>
<demo-block card :title="t('notifyType')">
<van-cell is-link :title="t('primary')" @click="showType('primary')" />
<van-cell is-link :title="t('success')" @click="showType('success')" />
<van-cell is-link :title="t('danger')" @click="showType('danger')" />
<van-cell is-link :title="t('warning')" @click="showType('warning')" />
</demo-block>
<demo-block card :title="t('customNotify')">
<van-cell is-link :title="t('customColor')" @click="showCustomColor" />
<van-cell
is-link
:title="t('customDuration')"
@click="showCustomDuration"
/>
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
<van-notify v-model:show="show" type="success">
<van-icon name="bell" style="margin-right: 4px" />
<span>{{ t('content') }}</span>
</van-notify>
</demo-block>
</template>

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

@ -1,3 +1,52 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
close: '完成',
input: '输入',
title: '键盘标题',
button1: '弹出默认键盘',
button2: '弹出带右侧栏的键盘',
button3: '弹出身份证号键盘',
button4: '弹出带标题的键盘',
button5: '弹出配置多个按键的键盘',
button6: '弹出配置随机数字的键盘',
bindValue: '双向绑定',
clickToInput: '点此输入',
extraKey: '左下角按键内容',
multiExtraKey: '配置多个按键',
randomKeyOrder: '随机数字键盘',
},
'en-US': {
close: 'Close',
input: 'Input',
title: 'Keyboard Title',
button1: 'Show Default Keyboard',
button2: 'Show Keyboard With Sidebar',
button3: 'Show IdNumber Keyboard',
button4: 'Show Keyboard With Title',
button5: 'Show Keyboard With Multiple ExtraKey',
button6: 'Show Keyboard With Random Key Order',
bindValue: 'Bind Value',
clickToInput: 'Click To Input',
extraKey: 'IdNumber Keyboard',
multiExtraKey: 'Multiple ExtraKey',
randomKeyOrder: 'Random Key Order',
},
};
const t = useTranslate(i18n);
const value = ref('');
const keyboard = ref('default');
const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
const onDelete = () => Toast(t('delete'));
const isTest = process.env.NODE_ENV === 'test';
</script>
<template> <template>
<demo-block card> <demo-block card>
<van-cell <van-cell
@ -103,68 +152,6 @@
/> />
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
close: '完成',
input: '输入',
title: '键盘标题',
button1: '弹出默认键盘',
button2: '弹出带右侧栏的键盘',
button3: '弹出身份证号键盘',
button4: '弹出带标题的键盘',
button5: '弹出配置多个按键的键盘',
button6: '弹出配置随机数字的键盘',
bindValue: '双向绑定',
clickToInput: '点此输入',
extraKey: '左下角按键内容',
multiExtraKey: '配置多个按键',
randomKeyOrder: '随机数字键盘',
},
'en-US': {
close: 'Close',
input: 'Input',
title: 'Keyboard Title',
button1: 'Show Default Keyboard',
button2: 'Show Keyboard With Sidebar',
button3: 'Show IdNumber Keyboard',
button4: 'Show Keyboard With Title',
button5: 'Show Keyboard With Multiple ExtraKey',
button6: 'Show Keyboard With Random Key Order',
bindValue: 'Bind Value',
clickToInput: 'Click To Input',
extraKey: 'IdNumber Keyboard',
multiExtraKey: 'Multiple ExtraKey',
randomKeyOrder: 'Random Key Order',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '',
keyboard: 'default',
});
const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
const onDelete = () => Toast(t('delete'));
return {
...toRefs(state),
t,
isTest: process.env.NODE_ENV === 'test',
onInput,
onDelete,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,23 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
showOverlay: '显示遮罩层',
embeddedContent: '嵌入内容',
},
'en-US': {
showOverlay: 'Show Overlay',
embeddedContent: 'Embedded Content',
},
};
const t = useTranslate(i18n);
const show = ref(false);
const showEmbedded = ref(false);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-button <van-button
@ -24,37 +44,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
showOverlay: '显示遮罩层',
embeddedContent: '嵌入内容',
},
'en-US': {
showOverlay: 'Show Overlay',
embeddedContent: 'Embedded Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
show: false,
showEmbedded: false,
});
return {
...toRefs(state),
t,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,31 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '简单模式',
title3: '显示省略号',
title4: '自定义按钮',
prevText: '上一页',
nextText: '下一页',
},
'en-US': {
title2: 'Simple Mode',
title3: 'Show ellipses',
title4: 'Custom Button',
prevText: 'Prev',
nextText: 'Next',
},
};
const t = useTranslate(i18n);
const currentPage1 = ref(1);
const currentPage2 = ref(1);
const currentPage3 = ref(1);
const currentPage4 = ref(1);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-pagination <van-pagination
@ -48,45 +76,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '简单模式',
title3: '显示省略号',
title4: '自定义按钮',
prevText: '上一页',
nextText: '下一页',
},
'en-US': {
title2: 'Simple Mode',
title3: 'Show ellipses',
title4: 'Custom Button',
prevText: 'Prev',
nextText: 'Next',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
currentPage1: 1,
currentPage2: 1,
currentPage3: 1,
currentPage4: 1,
});
return {
...toRefs(state),
t,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,59 +1,5 @@
<template> <script setup lang="ts">
<demo-block ref="basicUsage" :title="t('basicUsage')"> import { ref, watch } from 'vue';
<van-password-input
:value="value.basicUsage"
:focused="current === 'basicUsage'"
@focus="current = 'basicUsage'"
/>
</demo-block>
<demo-block ref="customLength" :title="t('customLength')">
<van-password-input
:value="value.customLength"
:length="4"
:focused="current === 'customLength'"
@focus="current = 'customLength'"
/>
</demo-block>
<demo-block ref="addGutter" :title="t('addGutter')">
<van-password-input
:value="value.addGutter"
:gutter="10"
:focused="current === 'addGutter'"
@focus="current = 'addGutter'"
/>
</demo-block>
<demo-block ref="removeMask" :title="t('removeMask')">
<van-password-input
:mask="false"
:value="value.removeMask"
:focused="current === 'removeMask'"
@focus="current = 'removeMask'"
/>
</demo-block>
<demo-block ref="showInfo" :title="t('showInfo')">
<van-password-input
:info="t('info')"
:value="value.showInfo"
:error-info="errorInfo"
:focused="current === 'showInfo'"
@focus="current = 'showInfo'"
/>
</demo-block>
<van-number-keyboard
:show="!!current"
@blur="current = ''"
@input="onInput"
@delete="onDelete"
/>
</template>
<script lang="ts">
import { reactive, ref, toRefs, watch } from 'vue';
import { ComponentInstance } from '../../utils'; import { ComponentInstance } from '../../utils';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
@ -76,82 +22,133 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const initialValue = {
const t = useTranslate(i18n); showInfo: '123',
const initialValue = { addGutter: '123',
showInfo: '123', basicUsage: '123',
addGutter: '123', removeMask: '123',
basicUsage: '123', customLength: '123',
removeMask: '123',
customLength: '123',
};
const refMap = {
showInfo: ref<ComponentInstance>(),
addGutter: ref<ComponentInstance>(),
basicUsage: ref<ComponentInstance>(),
removeMask: ref<ComponentInstance>(),
customLength: ref<ComponentInstance>(),
};
type ValueKeys = keyof typeof initialValue;
const state = reactive({
value: initialValue,
current: 'basicUsage' as ValueKeys,
errorInfo: '',
});
const onInput = (key: ValueKeys) => {
const { value, current } = state;
const maxlegnth = current === 'customLength' ? 4 : 6;
const newValue = (value[current] + key).slice(0, maxlegnth);
value[current] = newValue;
if (
current === 'showInfo' &&
newValue.length === 6 &&
newValue !== '123456'
) {
state.errorInfo = t('errorInfo');
}
};
const onDelete = () => {
const { value, current } = state;
value[current] = value[current].slice(0, value[current].length - 1);
if (current === 'showInfo') {
state.errorInfo = '';
}
};
watch(
() => state.current,
(value) => {
if (value) {
const vm = refMap[value].value;
if (vm) {
const { top } = vm.$el.getBoundingClientRect();
window.scrollTo(0, window.pageYOffset + top);
}
}
}
);
return {
...toRefs(state),
...refMap,
t,
onInput,
onDelete,
};
},
}; };
type ValueKeys = keyof typeof initialValue;
const values = ref(initialValue);
const current = ref<ValueKeys | null>('basicUsage');
const errorInfo = ref('');
const showInfo = ref<ComponentInstance>();
const addGutter = ref<ComponentInstance>();
const basicUsage = ref<ComponentInstance>();
const removeMask = ref<ComponentInstance>();
const customLength = ref<ComponentInstance>();
const refMap = {
showInfo,
addGutter,
basicUsage,
removeMask,
customLength,
};
const onInput = (key: ValueKeys) => {
if (!current.value) {
return;
}
const maxlegnth = current.value === 'customLength' ? 4 : 6;
const newValue = (values.value[current.value] + key).slice(0, maxlegnth);
values.value[current.value] = newValue;
if (
current.value === 'showInfo' &&
newValue.length === 6 &&
newValue !== '123456'
) {
errorInfo.value = t('errorInfo');
}
};
const onDelete = () => {
if (!current.value) {
return;
}
values.value[current.value] = values.value[current.value].slice(
0,
values.value[current.value].length - 1
);
if (current.value === 'showInfo') {
errorInfo.value = '';
}
};
watch(current, (value) => {
if (value) {
const vm = refMap[value].value;
if (vm) {
const { top } = vm.$el.getBoundingClientRect();
window.scrollTo(0, window.pageYOffset + top);
}
}
});
</script> </script>
<template>
<demo-block ref="basicUsage" :title="t('basicUsage')">
<van-password-input
:value="values.basicUsage"
:focused="current === 'basicUsage'"
@focus="current = 'basicUsage'"
/>
</demo-block>
<demo-block ref="customLength" :title="t('customLength')">
<van-password-input
:value="values.customLength"
:length="4"
:focused="current === 'customLength'"
@focus="current = 'customLength'"
/>
</demo-block>
<demo-block ref="addGutter" :title="t('addGutter')">
<van-password-input
:value="values.addGutter"
:gutter="10"
:focused="current === 'addGutter'"
@focus="current = 'addGutter'"
/>
</demo-block>
<demo-block ref="removeMask" :title="t('removeMask')">
<van-password-input
:mask="false"
:value="values.removeMask"
:focused="current === 'removeMask'"
@focus="current = 'removeMask'"
/>
</demo-block>
<demo-block ref="showInfo" :title="t('showInfo')">
<van-password-input
:info="t('info')"
:value="values.showInfo"
:error-info="errorInfo"
:focused="current === 'showInfo'"
@focus="current = 'showInfo'"
/>
</demo-block>
<van-number-keyboard
:show="!!current"
@blur="current = null"
@input="onInput"
@delete="onDelete"
/>
</template>
<style lang="less"> <style lang="less">
.demo-password-input { .demo-password-input {
min-height: 150vh; min-height: 150vh;

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

@ -1,3 +1,127 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
city: '城市',
cascade: '级联选择',
withPopup: '搭配弹出层使用',
chooseCity: '选择城市',
showToolbar: '展示顶部栏',
dateColumns: dateColumns['zh-CN'],
defaultIndex: '默认选中项',
disableOption: '禁用选项',
cascadeColumns: cascadeColumns['zh-CN'],
multipleColumns: '多列选择',
setColumnValues: '动态设置选项',
customChildrenKey: '自定义 Columns 结构',
customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
textColumns: [
'杭州',
'宁波',
'温州',
'绍兴',
'湖州',
'嘉兴',
'金华',
'衢州',
],
disabledColumns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' },
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
},
toastContent: (value: string, index: number) =>
`当前值：${value}, 当前索引：${index}`,
},
'en-US': {
city: 'City',
cascade: 'Cascade',
withPopup: 'With Popup',
chooseCity: 'Choose City',
showToolbar: 'Show Toolbar',
dateColumns: dateColumns['en-US'],
defaultIndex: 'Default Index',
disableOption: 'Disable Option',
cascadeColumns: cascadeColumns['en-US'],
multipleColumns: 'Multiple Columns',
setColumnValues: 'Set Column Values',
customChildrenKey: 'Custom Columns Fields',
customChildrenColumns: cascadeColumnsCustomKey['en-US'],
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
disabledColumns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' },
],
column3: {
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
},
toastContent: (value: string, index: number) =>
`Value: ${value}, Index：${index}`,
},
};
const t = useTranslate(i18n);
const picker = ref();
const showPicker = ref(false);
const fieldValue = ref('');
const customFieldName = ref({
text: 'cityName',
children: 'cities',
});
const columns = computed(() => {
const column = t('column3');
return [
{
values: Object.keys(column),
className: 'column1',
},
{
values: column[Object.keys(column)[0]],
className: 'column2',
defaultIndex: 2,
},
];
});
const onChange1 = (value: string, index: number) => {
Toast(t('toastContent', value, index));
};
const onChange2 = (values: string[]) => {
picker.value.setColumnValues(1, t('column3')[values[0]]);
};
const onConfirm = (value: string, index: number) => {
Toast(t('toastContent', value, index));
};
const onCancel = () => Toast(t('cancel'));
const onCancel2 = () => {
showPicker.value = false;
};
const onClickField = () => {
showPicker.value = true;
};
const onConfirm2 = (value: string) => {
showPicker.value = false;
fieldValue.value = value;
};
</script>
<template> <template>
<demo-block card :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-picker <van-picker
@ -72,147 +196,3 @@
/> />
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref, computed, reactive, toRefs } from 'vue';
import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
city: '城市',
cascade: '级联选择',
withPopup: '搭配弹出层使用',
chooseCity: '选择城市',
showToolbar: '展示顶部栏',
dateColumns: dateColumns['zh-CN'],
defaultIndex: '默认选中项',
disableOption: '禁用选项',
cascadeColumns: cascadeColumns['zh-CN'],
multipleColumns: '多列选择',
setColumnValues: '动态设置选项',
customChildrenKey: '自定义 Columns 结构',
customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
textColumns: [
'杭州',
'宁波',
'温州',
'绍兴',
'湖州',
'嘉兴',
'金华',
'衢州',
],
disabledColumns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' },
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
},
toastContent: (value: string, index: number) =>
`当前值：${value}, 当前索引：${index}`,
},
'en-US': {
city: 'City',
cascade: 'Cascade',
withPopup: 'With Popup',
chooseCity: 'Choose City',
showToolbar: 'Show Toolbar',
dateColumns: dateColumns['en-US'],
defaultIndex: 'Default Index',
disableOption: 'Disable Option',
cascadeColumns: cascadeColumns['en-US'],
multipleColumns: 'Multiple Columns',
setColumnValues: 'Set Column Values',
customChildrenKey: 'Custom Columns Fields',
customChildrenColumns: cascadeColumnsCustomKey['en-US'],
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
disabledColumns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' },
],
column3: {
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
},
toastContent: (value: string, index: number) =>
`Value: ${value}, Index：${index}`,
},
};
export default {
setup() {
const t = useTranslate(i18n);
const picker = ref();
const state = reactive({
showPicker: false,
fieldValue: '',
customFieldName: {
text: 'cityName',
children: 'cities',
},
});
const columns = computed(() => {
const column = t('column3');
return [
{
values: Object.keys(column),
className: 'column1',
},
{
values: column[Object.keys(column)[0]],
className: 'column2',
defaultIndex: 2,
},
];
});
const onChange1 = (value: string, index: number) => {
Toast(t('toastContent', value, index));
};
const onChange2 = (values: string[]) => {
picker.value.setColumnValues(1, t('column3')[values[0]]);
};
const onConfirm = (value: string, index: number) => {
Toast(t('toastContent', value, index));
};
const onCancel = () => Toast(t('cancel'));
const onCancel2 = () => {
state.showPicker = false;
};
const onClickField = () => {
state.showPicker = true;
};
const onConfirm2 = (value: string) => {
state.showPicker = false;
state.fieldValue = value;
};
return {
...toRefs(state),
t,
picker,
columns,
onCancel,
onCancel2,
onChange1,
onChange2,
onConfirm,
onConfirm2,
onClickField,
};
},
};
</script>

196
src/popover/demo/index.vue
View File

@ -1,3 +1,94 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
shortActions: [{ text: '选项一' }, { text: '选项二' }],
actionsWithIcon: [
{ text: '选项一', icon: 'add-o' },
{ text: '选项二', icon: 'music-o' },
{ text: '选项三', icon: 'more-o' },
],
actionsDisabled: [
{ text: '选项一', disabled: true },
{ text: '选项二', disabled: true },
{ text: '选项三' },
],
showIcon: '展示图标',
placement: '弹出位置',
darkTheme: '深色风格',
lightTheme: '浅色风格',
showPopover: '点击弹出气泡',
actionOptions: '选项配置',
customContent: '自定义内容',
disableAction: '禁用选项',
choosePlacement: '选择弹出位置',
},
'en-US': {
actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
actionsWithIcon: [
{ text: 'Option 1', icon: 'add-o' },
{ text: 'Option 2', icon: 'music-o' },
{ text: 'Option 3', icon: 'more-o' },
],
actionsDisabled: [
{ text: 'Option 1', disabled: true },
{ text: 'Option 2', disabled: true },
{ text: 'Option 3' },
],
showIcon: 'Show Icon',
placement: 'Placement',
darkTheme: 'Dark Theme',
lightTheme: 'Light Theme',
showPopover: 'Show Popover',
actionOptions: 'Action Options',
customContent: 'Custom Content',
disableAction: 'Disable Action',
choosePlacement: 'Placement',
},
};
const placements = [
'top',
'top-start',
'top-end',
'left',
'left-start',
'left-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
];
const t = useTranslate(i18n);
const show = ref({
showIcon: false,
placement: false,
darkTheme: false,
lightTheme: false,
customContent: false,
disableAction: false,
});
const showPicker = ref(false);
const currentPlacement = ref('top');
const onPickerChange = (value: string) => {
setTimeout(() => {
show.value.placement = true;
currentPlacement.value = value;
});
};
const onSelect = (action: { text: string }) => Toast(action.text);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-popover <van-popover
@ -119,111 +210,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
shortActions: [{ text: '选项一' }, { text: '选项二' }],
actionsWithIcon: [
{ text: '选项一', icon: 'add-o' },
{ text: '选项二', icon: 'music-o' },
{ text: '选项三', icon: 'more-o' },
],
actionsDisabled: [
{ text: '选项一', disabled: true },
{ text: '选项二', disabled: true },
{ text: '选项三' },
],
showIcon: '展示图标',
placement: '弹出位置',
darkTheme: '深色风格',
lightTheme: '浅色风格',
showPopover: '点击弹出气泡',
actionOptions: '选项配置',
customContent: '自定义内容',
disableAction: '禁用选项',
choosePlacement: '选择弹出位置',
},
'en-US': {
actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
actionsWithIcon: [
{ text: 'Option 1', icon: 'add-o' },
{ text: 'Option 2', icon: 'music-o' },
{ text: 'Option 3', icon: 'more-o' },
],
actionsDisabled: [
{ text: 'Option 1', disabled: true },
{ text: 'Option 2', disabled: true },
{ text: 'Option 3' },
],
showIcon: 'Show Icon',
placement: 'Placement',
darkTheme: 'Dark Theme',
lightTheme: 'Light Theme',
showPopover: 'Show Popover',
actionOptions: 'Action Options',
customContent: 'Custom Content',
disableAction: 'Disable Action',
choosePlacement: 'Placement',
},
};
const placements = [
'top',
'top-start',
'top-end',
'left',
'left-start',
'left-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
];
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
show: {
showIcon: false,
placement: false,
darkTheme: false,
lightTheme: false,
customContent: false,
disableAction: false,
},
showPicker: false,
currentPlacement: 'top',
});
const onPickerChange = (value: string) => {
setTimeout(() => {
state.show.placement = true;
state.currentPlacement = value;
});
};
const onSelect = (action: { text: string }) => Toast(action.text);
return {
...toRefs(state),
t,
onSelect,
placements,
onPickerChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,49 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
position: '弹出位置',
buttonBasic: '展示弹出层',
buttonTop: '顶部弹出',
buttonBottom: '底部弹出',
buttonLeft: '左侧弹出',
buttonRight: '右侧弹出',
teleport: '指定挂载节点',
roundCorner: '圆角弹窗',
closeIcon: '关闭图标',
customCloseIcon: '自定义图标',
customIconPosition: '图标位置',
},
'en-US': {
position: 'Position',
buttonBasic: 'Show Popup',
buttonTop: 'From Top',
buttonBottom: 'From Bottom',
buttonLeft: 'From Left',
buttonRight: 'From Right',
teleport: 'Get Container',
roundCorner: 'Round Corner',
closeIcon: 'Close Icon',
customCloseIcon: 'Custom Icon',
customIconPosition: 'Icon Position',
},
};
const t = useTranslate(i18n);
const showBasic = ref(false);
const showTop = ref(false);
const showBottom = ref(false);
const showLeft = ref(false);
const showRight = ref(false);
const showCloseIcon = ref(false);
const showRoundCorner = ref(false);
const showGetContainer = ref(false);
const showCustomCloseIcon = ref(false);
const showCustomIconPosition = ref(false);
</script>
<template> <template>
<demo-block card :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" /> <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
@ -93,63 +139,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
position: '弹出位置',
buttonBasic: '展示弹出层',
buttonTop: '顶部弹出',
buttonBottom: '底部弹出',
buttonLeft: '左侧弹出',
buttonRight: '右侧弹出',
teleport: '指定挂载节点',
roundCorner: '圆角弹窗',
closeIcon: '关闭图标',
customCloseIcon: '自定义图标',
customIconPosition: '图标位置',
},
'en-US': {
position: 'Position',
buttonBasic: 'Show Popup',
buttonTop: 'From Top',
buttonBottom: 'From Bottom',
buttonLeft: 'From Left',
buttonRight: 'From Right',
teleport: 'Get Container',
roundCorner: 'Round Corner',
closeIcon: 'Close Icon',
customCloseIcon: 'Custom Icon',
customIconPosition: 'Icon Position',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
showBasic: false,
showTop: false,
showBottom: false,
showLeft: false,
showRight: false,
showCloseIcon: false,
showRoundCorner: false,
showGetContainer: false,
showCustomCloseIcon: false,
showCustomIconPosition: false,
});
return {
...toRefs(state),
t,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,22 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '置灰',
title3: '样式定制',
strokeWidth: '线条粗细',
},
'en-US': {
title2: 'Inactive',
title3: 'Custom Style',
strokeWidth: 'Stroke Width',
},
};
const t = useTranslate(i18n);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-progress :percentage="50" /> <van-progress :percentage="50" />
@ -23,30 +42,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
title2: '置灰',
title3: '样式定制',
strokeWidth: '线条粗细',
},
'en-US': {
title2: 'Inactive',
title3: 'Custom Style',
strokeWidth: 'Stroke Width',
},
};
export default {
setup() {
const t = useTranslate(i18n);
return { t };
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,58 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
try: '下拉试试',
text: '刷新次数',
success: '刷新成功',
successTip: '成功提示',
customTips: '自定义提示',
},
'en-US': {
try: 'Try it down',
text: 'Refresh Count',
success: 'Refresh success',
successTip: 'Success Tip',
customTips: 'Custom Tips',
},
};
const t = useTranslate(i18n);
const count = ref(0);
const loading = ref(false);
const tips = computed(() => {
if (count.value) {
return `${t('text')}: ${count.value}`;
}
return t('try');
});
const onRefresh = (showToast: boolean) => {
setTimeout(() => {
if (showToast) {
Toast(t('success'));
}
loading.value = false;
count.value++;
}, 1000);
};
const preloadImage = () => {
// preload doge image
const doge = new Image();
const dogeFire = new Image();
doge.src = 'https://b.yzcdn.cn/vant/doge.png';
dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
};
onMounted(preloadImage);
</script>
<template> <template>
<van-tabs> <van-tabs>
<van-tab :title="t('basicUsage')"> <van-tab :title="t('basicUsage')">
@ -41,74 +96,6 @@
</van-tabs> </van-tabs>
</template> </template>
<script lang="ts">
import { computed, onMounted, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
try: '下拉试试',
text: '刷新次数',
success: '刷新成功',
successTip: '成功提示',
customTips: '自定义提示',
},
'en-US': {
try: 'Try it down',
text: 'Refresh Count',
success: 'Refresh success',
successTip: 'Success Tip',
customTips: 'Custom Tips',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
count: 0,
loading: false,
});
const tips = computed(() => {
if (state.count) {
return `${t('text')}: ${state.count}`;
}
return t('try');
});
const onRefresh = (showToast: boolean) => {
setTimeout(() => {
if (showToast) {
Toast(t('success'));
}
state.loading = false;
state.count++;
}, 1000);
};
const preloadImage = () => {
// preload doge image
const doge = new Image();
const dogeFire = new Image();
doge.src = 'https://b.yzcdn.cn/vant/doge.png';
dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
};
onMounted(preloadImage);
return {
...toRefs(state),
t,
tips,
onRefresh,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,48 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
radio: '单选框',
text1: '未选中禁用',
text2: '选中且禁用',
withCell: '与 Cell 组件一起使用',
horizontal: '水平排列',
customIcon: '自定义图标',
customColor: '自定义颜色',
customShape: '自定义形状',
customIconSize: '自定义大小',
disableLabel: '禁用文本点击',
},
'en-US': {
radio: 'Radio',
text1: 'Disabled',
text2: 'Disabled and checked',
withCell: 'Inside a Cell',
horizontal: 'Hrizontal',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
customShape: 'Custom Shape',
customIconSize: 'Custom Icon Size',
disableLabel: 'Disable label click',
},
};
const t = useTranslate(i18n);
const radio1 = ref('1');
const radio2 = ref('2');
const radio3 = ref('1');
const radio4 = ref('1');
const radio5 = ref('1');
const radioLabel = ref('1');
const radioShape = ref('1');
const radioIconSize = ref('1');
const radioHorizontal = ref('1');
const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-radio-group v-model="radio1" class="demo-radio-group"> <van-radio-group v-model="radio1" class="demo-radio-group">
@ -91,62 +136,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
radio: '单选框',
text1: '未选中禁用',
text2: '选中且禁用',
withCell: '与 Cell 组件一起使用',
horizontal: '水平排列',
customIcon: '自定义图标',
customColor: '自定义颜色',
customShape: '自定义形状',
customIconSize: '自定义大小',
disableLabel: '禁用文本点击',
},
'en-US': {
radio: 'Radio',
text1: 'Disabled',
text2: 'Disabled and checked',
withCell: 'Inside a Cell',
horizontal: 'Hrizontal',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
customShape: 'Custom Shape',
customIconSize: 'Custom Icon Size',
disableLabel: 'Disable label click',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
radio1: '1',
radio2: '2',
radio3: '1',
radio4: '1',
radio5: '1',
radioLabel: '1',
radioShape: '1',
radioIconSize: '1',
radioHorizontal: '1',
});
return {
...toRefs(state),
t,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,46 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
halfStar: '半星',
disabled: '禁用状态',
customIcon: '自定义图标',
customStyle: '自定义样式',
customCount: '自定义数量',
readonly: '只读状态',
readonlyHalfStar: '只读状态小数显示',
changeEvent: '监听 change 事件',
toastContent: (value: number) => `当前值：${value}`,
},
'en-US': {
halfStar: 'Half Star',
disabled: 'Disabled',
customIcon: 'Custom Icon',
customStyle: 'Custom Style',
customCount: 'Custom Count',
readonly: 'Readonly',
readonlyHalfStar: 'Readonly Half Star',
changeEvent: 'Change Event',
toastContent: (value: number) => `current value：${value}`,
},
};
const t = useTranslate(i18n);
const value1 = ref(3);
const value2 = ref(3);
const value3 = ref(3);
const value4 = ref(2.5);
const value5 = ref(4);
const value6 = ref(3);
const value7 = ref(3.3);
const value8 = ref(2);
const onChange = (value: number) => Toast(t('toastContent', value));
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-rate v-model="value1" /> <van-rate v-model="value1" />
@ -42,61 +85,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { toRefs, reactive } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
halfStar: '半星',
disabled: '禁用状态',
customIcon: '自定义图标',
customStyle: '自定义样式',
customCount: '自定义数量',
readonly: '只读状态',
readonlyHalfStar: '只读状态小数显示',
changeEvent: '监听 change 事件',
toastContent: (value: number) => `当前值：${value}`,
},
'en-US': {
halfStar: 'Half Star',
disabled: 'Disabled',
customIcon: 'Custom Icon',
customStyle: 'Custom Style',
customCount: 'Custom Count',
readonly: 'Readonly',
readonlyHalfStar: 'Readonly Half Star',
changeEvent: 'Change Event',
toastContent: (value: number) => `current value：${value}`,
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value1: 3,
value2: 3,
value3: 3,
value4: 2.5,
value5: 4,
value6: 3,
value7: 3.3,
value8: 2,
});
const onChange = (value: number) => Toast(t('toastContent', value));
return {
...toRefs(state),
t,
onChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,41 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
label: '地址',
disabled: '禁用搜索框',
inputAlign: '搜索框内容对齐',
background: '自定义背景色',
placeholder: '请输入搜索关键词',
customButton: '自定义按钮',
listenToEvents: '事件监听',
},
'en-US': {
label: 'Address',
disabled: 'Disabled',
inputAlign: 'Input Align',
background: 'Custom Background Color',
placeholder: 'Placeholder',
customButton: 'Custom Action Button',
listenToEvents: 'Listen to Events',
},
};
const t = useTranslate(i18n);
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const value5 = ref('');
const value6 = ref('');
const onSearch = (val: string) => Toast(val);
const onCancel = () => Toast(t('cancel'));
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-search v-model="value1" :placeholder="t('placeholder')" /> <van-search v-model="value1" :placeholder="t('placeholder')" />
@ -50,54 +88,3 @@
</van-search> </van-search>
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
label: '地址',
disabled: '禁用搜索框',
inputAlign: '搜索框内容对齐',
background: '自定义背景色',
placeholder: '请输入搜索关键词',
customButton: '自定义按钮',
listenToEvents: '事件监听',
},
'en-US': {
label: 'Address',
disabled: 'Disabled',
inputAlign: 'Input Align',
background: 'Custom Background Color',
placeholder: 'Placeholder',
customButton: 'Custom Action Button',
listenToEvents: 'Listen to Events',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
});
const onSearch = (val: string) => Toast(val);
const onCancel = () => Toast(t('cancel'));
return {
...toRefs(state),
t,
onSearch,
onCancel,
};
},
};
</script>

222
src/share-sheet/demo/index.vue
View File

@ -1,46 +1,4 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-share-sheet
v-model:show="show.basic"
:title="t('title')"
:options="options"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('multiLine')">
<van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
<van-share-sheet
v-model:show="show.multiLine"
:title="t('title')"
:options="multiLineOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('customIcon')">
<van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
<van-share-sheet
v-model:show="show.customIcon"
:options="customIconOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-share-sheet
v-model:show="show.withDesc"
:title="t('title')"
:options="optionsWithDesc"
:description="t('description')"
@select="onSelect"
/>
</demo-block>
</template>
<script lang="ts">
import { computed, reactive } from 'vue'; import { computed, reactive } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { ShareSheetOption, ShareSheetOptions } from '..'; import { ShareSheetOption, ShareSheetOptions } from '..';
@ -83,87 +41,111 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const show = reactive({
const t = useTranslate(i18n); basic: false,
const show = reactive({ withDesc: false,
basic: false, multiLine: false,
withDesc: false, customIcon: false,
multiLine: false, });
customIcon: false,
});
const options = computed(() => [ const options = computed(() => [
{ name: t('wechat'), icon: 'wechat' }, { name: t('wechat'), icon: 'wechat' },
{ name: t('weibo'), icon: 'weibo' }, { name: t('weibo'), icon: 'weibo' },
{ name: t('link'), icon: 'link' }, { name: t('link'), icon: 'link' },
{ name: t('poster'), icon: 'poster' }, { name: t('poster'), icon: 'poster' },
{ name: t('qrcode'), icon: 'qrcode' }, { name: t('qrcode'), icon: 'qrcode' },
]); ]);
const multiLineOptions = computed(() => [ const multiLineOptions = computed(() => [
[ [
{ name: t('wechat'), icon: 'wechat' }, { name: t('wechat'), icon: 'wechat' },
{ name: t('wechatMoments'), icon: 'wechat-moments' }, { name: t('wechatMoments'), icon: 'wechat-moments' },
{ name: t('weibo'), icon: 'weibo' }, { name: t('weibo'), icon: 'weibo' },
{ name: t('qq'), icon: 'qq' }, { name: t('qq'), icon: 'qq' },
], ],
[ [
{ name: t('link'), icon: 'link' }, { name: t('link'), icon: 'link' },
{ name: t('poster'), icon: 'poster' }, { name: t('poster'), icon: 'poster' },
{ name: t('qrcode'), icon: 'qrcode' }, { name: t('qrcode'), icon: 'qrcode' },
{ name: t('weappQrcode'), icon: 'weapp-qrcode' }, { name: t('weappQrcode'), icon: 'weapp-qrcode' },
], ],
]); ]);
const customIconOptions = computed(() => [ const customIconOptions = computed(() => [
{ {
name: t('name'), name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png', icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
},
{
name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
},
{
name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
},
]);
const optionsWithDesc = computed<ShareSheetOptions>(() => [
{ name: t('wechat'), icon: 'wechat' },
{ name: t('weibo'), icon: 'weibo' },
{
name: t('link'),
icon: 'link',
description: t('description'),
},
{ name: t('poster'), icon: 'poster' },
{ name: t('qrcode'), icon: 'qrcode' },
]);
const onSelect = (option: ShareSheetOption) => {
Toast(option.name);
show.basic = false;
show.withDesc = false;
show.multiLine = false;
show.customIcon = false;
};
return {
t,
show,
options,
onSelect,
optionsWithDesc,
multiLineOptions,
customIconOptions,
};
}, },
{
name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
},
{
name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
},
]);
const optionsWithDesc = computed<ShareSheetOptions>(() => [
{ name: t('wechat'), icon: 'wechat' },
{ name: t('weibo'), icon: 'weibo' },
{
name: t('link'),
icon: 'link',
description: t('description'),
},
{ name: t('poster'), icon: 'poster' },
{ name: t('qrcode'), icon: 'qrcode' },
]);
const onSelect = (option: ShareSheetOption) => {
Toast(option.name);
show.basic = false;
show.withDesc = false;
show.multiLine = false;
show.customIcon = false;
}; };
</script> </script>
<style lang="less"> <template>
@import '../../style/var'; <demo-block card :title="t('basicUsage')">
</style> <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-share-sheet
v-model:show="show.basic"
:title="t('title')"
:options="options"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('multiLine')">
<van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
<van-share-sheet
v-model:show="show.multiLine"
:title="t('title')"
:options="multiLineOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('customIcon')">
<van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
<van-share-sheet
v-model:show="show.customIcon"
:options="customIconOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-share-sheet
v-model:show="show.withDesc"
:title="t('title')"
:options="optionsWithDesc"
:description="t('description')"
@select="onSelect"
/>
</demo-block>
</template>

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

@ -1,3 +1,31 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
title: '标签名',
disabled: '禁用选项',
showBadge: '徽标提示',
changeEvent: '监听切换事件',
},
'en-US': {
disabled: 'Disabled',
showBadge: 'Show Badge',
changeEvent: 'Change Event',
},
};
const t = useTranslate(i18n);
const active1 = ref(0);
const active2 = ref(0);
const active3 = ref(0);
const active4 = ref(0);
const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
</script>
<template> <template>
<van-grid :column-num="2" :border="false"> <van-grid :column-num="2" :border="false">
<van-grid-item> <van-grid-item>
@ -38,46 +66,6 @@
</van-grid> </van-grid>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
title: '标签名',
disabled: '禁用选项',
showBadge: '徽标提示',
changeEvent: '监听切换事件',
},
'en-US': {
disabled: 'Disabled',
showBadge: 'Show Badge',
changeEvent: 'Change Event',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
active1: 0,
active2: 0,
active3: 0,
active4: 0,
});
const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
return {
...toRefs(state),
t,
onChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,27 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
showAvatar: '显示头像',
showChildren: '显示子组件',
title: '关于 Vant',
desc:
'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
},
'en-US': {
showAvatar: 'Show Avatar',
showChildren: 'Show Children',
title: 'About Vant',
desc: 'Vant is a set of Mobile UI Components built on Vue.',
},
};
const t = useTranslate(i18n);
const show = ref(false);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-skeleton title :row="3" /> <van-skeleton title :row="3" />
@ -21,39 +45,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
showAvatar: '显示头像',
showChildren: '显示子组件',
title: '关于 Vant',
desc:
'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
},
'en-US': {
showAvatar: 'Show Avatar',
showChildren: 'Show Children',
title: 'About Vant',
desc: 'Vant is a set of Mobile UI Components built on Vue.',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const show = ref(false);
return {
t,
show,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,47 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
text: '当前值：',
title1: '基础用法',
title2: '双滑块',
title3: '指定选择范围',
title4: '禁用',
title5: '指定步长',
vertical: '垂直方向',
customStyle: '自定义样式',
customButton: '自定义按钮',
},
'en-US': {
text: 'Current value: ',
title1: 'Basic Usage',
title2: 'Dual thumb mode',
title3: 'Range',
title4: 'Disabled',
title5: 'Step size',
vertical: 'Vertical',
customStyle: 'Custom Style',
customButton: 'Custom Button',
},
};
const t = useTranslate(i18n);
const value1 = ref(50);
const value2 = ref([20, 60]);
const value3 = ref(0);
const value4 = ref(50);
const value5 = ref(50);
const value6 = ref(50);
const value7 = ref(50);
const value8 = ref(50);
const value9 = ref([20, 60]);
const onChange = (value: string) => Toast(t('text') + value);
</script>
<template> <template>
<demo-block :title="t('title1')"> <demo-block :title="t('title1')">
<van-slider v-model="value1" @change="onChange" /> <van-slider v-model="value1" @change="onChange" />
@ -50,62 +94,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
text: '当前值：',
title1: '基础用法',
title2: '双滑块',
title3: '指定选择范围',
title4: '禁用',
title5: '指定步长',
vertical: '垂直方向',
customStyle: '自定义样式',
customButton: '自定义按钮',
},
'en-US': {
text: 'Current value: ',
title1: 'Basic Usage',
title2: 'Dual thumb mode',
title3: 'Range',
title4: 'Disabled',
title5: 'Step size',
vertical: 'Vertical',
customStyle: 'Custom Style',
customButton: 'Custom Button',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value1: 50,
value2: [20, 60],
value3: 0,
value4: 50,
value5: 50,
value6: 50,
value7: 50,
value8: 50,
value9: [20, 60],
});
const onChange = (value: string) => Toast(t('text') + value);
return {
...toRefs(state),
t,
onChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,55 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
step: '步长设置',
range: '限制输入范围',
integer: '限制输入整数',
roundTheme: '圆角风格',
customSize: '自定义大小',
beforeChange: '异步变更',
disableInput: '禁用输入框',
decimalLength: '固定小数位数',
},
'en-US': {
step: 'Step',
range: 'Range',
integer: 'Integer',
roundTheme: 'Round Theme',
customSize: 'Custom Size',
beforeChange: 'Before Change',
disableInput: 'Disable Input',
decimalLength: 'Decimal Length',
},
};
const t = useTranslate(i18n);
const stepper1 = ref(1);
const stepper2 = ref(1);
const stepper3 = ref(1);
const stepper4 = ref(1);
const stepper5 = ref(1);
const stepper6 = ref(1);
const stepper7 = ref(1);
const stepper8 = ref(1);
const stepperRound = ref(1);
const disabledInput = ref(1);
const beforeChange = () => {
Toast.loading({ forbidClick: true });
return new Promise((resolve) => {
setTimeout(() => {
Toast.clear();
resolve(true);
}, 500);
});
};
</script>
<template> <template>
<demo-block card> <demo-block card>
<van-cell center :title="t('basicUsage')"> <van-cell center :title="t('basicUsage')">
@ -66,67 +118,3 @@
</van-cell> </van-cell>
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
step: '步长设置',
range: '限制输入范围',
integer: '限制输入整数',
roundTheme: '圆角风格',
customSize: '自定义大小',
beforeChange: '异步变更',
disableInput: '禁用输入框',
decimalLength: '固定小数位数',
},
'en-US': {
step: 'Step',
range: 'Range',
integer: 'Integer',
roundTheme: 'Round Theme',
customSize: 'Custom Size',
beforeChange: 'Before Change',
disableInput: 'Disable Input',
decimalLength: 'Decimal Length',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
stepper1: 1,
stepper2: 1,
stepper3: 1,
stepper4: 1,
stepper5: 1,
stepper6: 1,
stepper7: 1,
stepper8: 1,
stepperRound: 1,
disabledInput: 1,
});
const beforeChange = () => {
Toast.loading({ forbidClick: true });
return new Promise((resolve) => {
setTimeout(() => {
Toast.clear();
resolve(true);
}, 500);
});
};
return {
...toRefs(state),
t,
beforeChange,
};
},
};
</script>

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

@ -1,3 +1,44 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
nextStep: '下一步',
step1: '买家下单',
step2: '商家接单',
step3: '买家提货',
step4: '交易完成',
title2: '描述信息',
title3: '竖向步骤条',
status1: '【城市】物流状态1',
status2: '【城市】物流状态',
status3: '快件已发货',
customStyle: '自定义样式',
},
'en-US': {
nextStep: 'Next Step',
step1: 'Step1',
step2: 'Step2',
step3: 'Step3',
step4: 'Step4',
title2: 'Description',
title3: 'Vertical Steps',
status1: '【City】Status1',
status2: '【City】Status2',
status3: '【City】Status3',
customStyle: 'Custom Style',
},
};
const t = useTranslate(i18n);
const active = ref(1);
const nextStep = () => {
active.value = ++active.value % 4;
};
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-steps :active="active"> <van-steps :active="active">
@ -42,57 +83,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
nextStep: '下一步',
step1: '买家下单',
step2: '商家接单',
step3: '买家提货',
step4: '交易完成',
title2: '描述信息',
title3: '竖向步骤条',
status1: '【城市】物流状态1',
status2: '【城市】物流状态',
status3: '快件已发货',
customStyle: '自定义样式',
},
'en-US': {
nextStep: 'Next Step',
step1: 'Step1',
step2: 'Step2',
step3: 'Step3',
step4: 'Step4',
title2: 'Description',
title3: 'Vertical Steps',
status1: '【City】Status1',
status2: '【City】Status2',
status3: '【City】Status3',
customStyle: 'Custom Style',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const active = ref(1);
const nextStep = () => {
active.value = ++active.value % 4;
};
return {
t,
active,
nextStep,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
offsetTop: '吸顶距离',
offsetBottom: '吸底距离',
setContainer: '指定容器',
},
'en-US': {
offsetTop: 'Offset Top',
offsetBottom: 'Offset Bottom',
setContainer: 'Set Container',
},
};
const t = useTranslate(i18n);
const container = ref(null);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-sticky> <van-sticky>
@ -35,36 +56,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
offsetTop: '吸顶距离',
offsetBottom: '吸底距离',
setContainer: '指定容器',
},
'en-US': {
offsetTop: 'Offset Top',
offsetBottom: 'Offset Bottom',
setContainer: 'Set Container',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const container = ref(null);
return {
t,
container,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,28 +1,5 @@
<template> <script setup lang="ts">
<demo-block :title="t('ellipsis')"> import { ref } from 'vue';
<div class="van-ellipsis">{{ t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
</demo-block>
<demo-block card :title="t('hairline')">
<div class="van-hairline--top" />
</demo-block>
<demo-block card :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')" />
<van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
<van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
</demo-block>
<transition :name="transitionName">
<div v-show="show" class="demo-animate-block" />
</transition>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
const i18n = { const i18n = {
@ -47,32 +24,43 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() { const show = ref(false);
const t = useTranslate(i18n); const transitionName = ref('');
const state = reactive({
show: false,
transitionName: '',
});
const animate = (transitionName: string) => { const animate = (newName: string) => {
state.show = true; show.value = true;
state.transitionName = transitionName; transitionName.value = newName;
setTimeout(() => { setTimeout(() => {
state.show = false; show.value = false;
}, 500); }, 500);
};
return {
...toRefs(state),
t,
animate,
};
},
}; };
</script> </script>
<template>
<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 card :title="t('hairline')">
<div class="van-hairline--top" />
</demo-block>
<demo-block card :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')" />
<van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
<van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
</demo-block>
<transition :name="transitionName">
<div v-show="show" class="demo-animate-block" />
</transition>
</template>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,36 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
tip1: '你的收货地址不支持同城送, 我们已为你推荐快递',
tip2: '你的收货地址不支持同城送, ',
tip3: '修改地址',
check: '全选',
submit: '提交订单',
clickLink: '修改地址',
clickButton: '点击按钮',
},
'en-US': {
tip1: 'Some tips',
tip2: 'Some tips, ',
tip3: 'Link',
check: 'Label',
submit: 'Submit',
clickLink: 'Click Link',
clickButton: 'Submit',
},
};
const t = useTranslate(i18n);
const checked = ref(true);
const onSubmit = () => Toast(t('clickButton'));
const onClickLink = () => Toast(t('clickLink'));
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-submit-bar <van-submit-bar
@ -39,50 +72,7 @@
</van-submit-bar> </van-submit-bar>
</demo-block> </demo-block>
</template> </template>
Ï
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
tip1: '你的收货地址不支持同城送, 我们已为你推荐快递',
tip2: '你的收货地址不支持同城送, ',
tip3: '修改地址',
check: '全选',
submit: '提交订单',
clickLink: '修改地址',
clickButton: '点击按钮',
},
'en-US': {
tip1: 'Some tips',
tip2: 'Some tips, ',
tip3: 'Link',
check: 'Label',
submit: 'Submit',
clickLink: 'Click Link',
clickButton: 'Submit',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const checked = ref(true);
const onSubmit = () => Toast(t('clickButton'));
const onClickLink = () => Toast(t('clickLink'));
return {
t,
checked,
onSubmit,
onClickLink,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,49 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Dialog } from '../../dialog';
const i18n = {
'zh-CN': {
select: '选择',
delete: '删除',
collect: '收藏',
title: '单元格',
confirm: '确定删除吗？',
cardTitle: '商品标题',
beforeClose: '异步关闭',
customContent: '自定义内容',
},
'en-US': {
select: 'Select',
delete: 'Delete',
collect: 'Collect',
title: 'Cell',
confirm: 'Are you sure to delete?',
cardTitle: 'Title',
beforeClose: 'Before Close',
customContent: 'Custom Content',
},
};
const t = useTranslate(i18n);
const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
const beforeClose = ({ position }: { position: string }) => {
switch (position) {
case 'left':
case 'cell':
case 'outside':
return true;
case 'right':
return new Promise((resolve) => {
Dialog.confirm({
title: t('confirm'),
}).then(resolve);
});
}
};
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-swipe-cell> <van-swipe-cell>
@ -45,60 +91,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Dialog } from '../../dialog';
const i18n = {
'zh-CN': {
select: '选择',
delete: '删除',
collect: '收藏',
title: '单元格',
confirm: '确定删除吗？',
cardTitle: '商品标题',
beforeClose: '异步关闭',
customContent: '自定义内容',
},
'en-US': {
select: 'Select',
delete: 'Delete',
collect: 'Collect',
title: 'Cell',
confirm: 'Are you sure to delete?',
cardTitle: 'Title',
beforeClose: 'Before Close',
customContent: 'Custom Content',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const beforeClose = ({ position }: { position: string }) => {
switch (position) {
case 'left':
case 'cell':
case 'outside':
return true;
case 'right':
return new Promise((resolve) => {
Dialog.confirm({
title: t('confirm'),
}).then(resolve);
});
}
};
return {
t,
imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
beforeClose,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,37 @@
<script setup lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
title2: '懒加载',
title3: '监听 change 事件',
title4: '纵向滚动',
title5: '自定义滑块大小',
title6: '自定义指示器',
message: '当前 Swipe 索引：',
},
'en-US': {
title2: 'Lazy Render',
title3: 'Change Event',
title4: 'Vertical Scrolling',
title5: 'Set SwipeItem Size',
title6: 'Custom indicator',
message: 'Current Swipe index:',
},
};
const t = useTranslate(i18n);
const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg',
];
const onChange = (index: number) => Toast(t('message') + index);
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-swipe :autoplay="3000" indicator-color="white"> <van-swipe :autoplay="3000" indicator-color="white">
@ -62,50 +96,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
title2: '懒加载',
title3: '监听 change 事件',
title4: '纵向滚动',
title5: '自定义滑块大小',
title6: '自定义指示器',
message: '当前 Swipe 索引：',
},
'en-US': {
title2: 'Lazy Render',
title3: 'Change Event',
title4: 'Vertical Scrolling',
title5: 'Set SwipeItem Size',
title6: 'Custom indicator',
message: 'Current Swipe index:',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg',
];
const onChange = (index: number) => Toast(t('message') + index);
return {
t,
images,
onChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,46 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Dialog } from '../../dialog';
const i18n = {
'zh-CN': {
title: '标题',
confirm: '提醒',
message: '是否切换开关？',
withCell: '搭配单元格使用',
customSize: '自定义大小',
customColor: '自定义颜色',
asyncControl: '异步控制',
},
'en-US': {
title: 'Title',
confirm: 'Confirm',
message: 'Are you sure to toggle switch?',
withCell: 'Inside a Cell',
customSize: 'Custom Size',
customColor: 'Custom Color',
asyncControl: 'Async Control',
},
};
const t = useTranslate(i18n);
const checked = ref(true);
const checked2 = ref(true);
const checked3 = ref(true);
const checked4 = ref(true);
const checked5 = ref(true);
const onUpdateValue = (checked: boolean) => {
Dialog.confirm({
title: t('title'),
message: t('message'),
}).then(() => {
checked4.value = checked;
});
};
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-switch v-model="checked" /> <van-switch v-model="checked" />
@ -36,62 +79,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Dialog } from '../../dialog';
const i18n = {
'zh-CN': {
title: '标题',
confirm: '提醒',
message: '是否切换开关？',
withCell: '搭配单元格使用',
customSize: '自定义大小',
customColor: '自定义颜色',
asyncControl: '异步控制',
},
'en-US': {
title: 'Title',
confirm: 'Confirm',
message: 'Are you sure to toggle switch?',
withCell: 'Inside a Cell',
customSize: 'Custom Size',
customColor: 'Custom Color',
asyncControl: 'Async Control',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
checked: true,
checked2: true,
checked3: true,
checked4: true,
checked5: true,
checked6: false,
});
const onUpdateValue = (checked: boolean) => {
Dialog.confirm({
title: t('title'),
message: t('message'),
}).then(() => {
state.checked4 = checked;
});
};
return {
...toRefs(state),
t,
onUpdateValue,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,62 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
tab: '标签 ',
title2: '标签栏滚动',
title3: '禁用标签',
title4: '样式风格',
title5: '点击事件',
title6: '粘性布局',
title7: '自定义标签',
title8: '切换动画',
title9: '滑动切换',
title10: '滚动导航',
disabled: ' 已被禁用',
matchByName: '通过名称匹配',
beforeChange: '异步切换',
},
'en-US': {
tab: 'Tab ',
content: 'content of tab',
title2: 'Swipe Tabs',
title3: 'Disabled Tab',
title4: 'Card Style',
title5: 'Click Event',
title6: 'Sticky',
title7: 'Custom Tab',
title8: 'Switch Animation',
title9: 'Swipeable',
title10: 'Scrollspy',
disabled: ' is disabled',
matchByName: 'Match By Name',
beforeChange: 'Before Change',
},
};
const t = useTranslate(i18n);
const active = ref(2);
const activeName = ref('b');
const tabs = [1, 2, 3, 4];
const onClickTab = ({ title }: { title: string }) => {
Toast(title);
};
const beforeChange = (name: number) => {
if (name === 1) {
return false;
}
return new Promise((resolve) => {
resolve(name !== 3);
});
};
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-tabs v-model:active="active"> <van-tabs v-model:active="active">
@ -102,79 +161,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
tab: '标签 ',
title2: '标签栏滚动',
title3: '禁用标签',
title4: '样式风格',
title5: '点击事件',
title6: '粘性布局',
title7: '自定义标签',
title8: '切换动画',
title9: '滑动切换',
title10: '滚动导航',
disabled: ' 已被禁用',
matchByName: '通过名称匹配',
beforeChange: '异步切换',
},
'en-US': {
tab: 'Tab ',
content: 'content of tab',
title2: 'Swipe Tabs',
title3: 'Disabled Tab',
title4: 'Card Style',
title5: 'Click Event',
title6: 'Sticky',
title7: 'Custom Tab',
title8: 'Switch Animation',
title9: 'Swipeable',
title10: 'Scrollspy',
disabled: ' is disabled',
matchByName: 'Match By Name',
beforeChange: 'Before Change',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
active: 2,
activeName: 'b',
});
const tabs = [1, 2, 3, 4];
const onClickTab = ({ title }: { title: string }) => {
Toast(title);
};
const beforeChange = (name: number) => {
if (name === 1) {
return false;
}
return new Promise((resolve) => {
resolve(name !== 3);
});
};
return {
...toRefs(state),
t,
tabs,
onClickTab,
beforeChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,3 +1,43 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
badge: '徽标提示',
customIcon: '自定义图标',
customColor: '自定义颜色',
matchByName: '通过名称匹配',
switchEvent: '监听切换事件',
},
'en-US': {
badge: 'Show Badge',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
matchByName: 'Match by name',
switchEvent: 'Change Event',
},
};
const t = useTranslate(i18n);
const active = ref(0);
const active2 = ref(0);
const active3 = ref(0);
const active4 = ref(0);
const active5 = ref(0);
const activeName = ref('home');
const icon = {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
const onChange = (index: number) => {
Toast(`${t('tab')} ${index + 1}`);
};
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-tabbar v-model="active"> <van-tabbar v-model="active">
@ -70,57 +110,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
badge: '徽标提示',
customIcon: '自定义图标',
customColor: '自定义颜色',
matchByName: '通过名称匹配',
switchEvent: '监听切换事件',
},
'en-US': {
badge: 'Show Badge',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
matchByName: 'Match by name',
switchEvent: 'Change Event',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
active: 0,
active2: 0,
active3: 0,
active4: 0,
active5: 0,
activeName: 'home',
});
const onChange = (index: number) => {
Toast(`${t('tab')} ${index + 1}`);
};
return {
...toRefs(state),
t,
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
},
onChange,
};
},
};
</script>
<style lang="less"> <style lang="less">
.demo-tabbar { .demo-tabbar {
.van-tabbar { .van-tabbar {

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

@ -1,3 +1,48 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
type: '类型',
mark: '标记样式',
plain: '空心样式',
round: '圆角样式',
tagStyle: '样式风格',
closeable: '可关闭标签',
smallSize: '小号标签',
largeSize: '大号标签',
mediumSize: '中号标签',
customSize: '标签大小',
customColor: '自定义颜色',
customBgColor: '背景颜色',
customTextColor: '文字颜色',
customPlainColor: '空心颜色',
},
'en-US': {
mark: 'Mark style',
plain: 'Plain style',
round: 'Round style',
tagStyle: 'Tag Style',
closeable: 'Closeable',
smallSize: 'Small Size',
largeSize: 'Large Size',
mediumSize: 'Medium Size',
customColor: 'Custom Color',
customSize: 'Custom Size',
customBgColor: 'Background Color',
customTextColor: 'Text Color',
customPlainColor: 'Plain Color',
},
};
const t = useTranslate(i18n);
const show = ref(true);
const close = () => {
show.value = false;
};
</script>
<template> <template>
<demo-block card :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell :title="`primary ${t('type')}`"> <van-cell :title="`primary ${t('type')}`">
@ -90,61 +135,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
type: '类型',
mark: '标记样式',
plain: '空心样式',
round: '圆角样式',
tagStyle: '样式风格',
closeable: '可关闭标签',
smallSize: '小号标签',
largeSize: '大号标签',
mediumSize: '中号标签',
customSize: '标签大小',
customColor: '自定义颜色',
customBgColor: '背景颜色',
customTextColor: '文字颜色',
customPlainColor: '空心颜色',
},
'en-US': {
mark: 'Mark style',
plain: 'Plain style',
round: 'Round style',
tagStyle: 'Tag Style',
closeable: 'Closeable',
smallSize: 'Small Size',
largeSize: 'Large Size',
mediumSize: 'Medium Size',
customColor: 'Custom Color',
customSize: 'Custom Size',
customBgColor: 'Background Color',
customTextColor: 'Text Color',
customPlainColor: 'Plain Color',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const show = ref(true);
const close = () => {
show.value = false;
};
return {
t,
show,
close,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';

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

@ -1,36 +1,4 @@
<template> <script setup lang="ts">
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
<van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
<van-cell is-link :title="t('success')" @click="showSuccessToast" />
<van-cell is-link :title="t('fail')" @click="showFailToast" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customIcon')">
<van-cell is-link :title="t('customIcon')" @click="showIconToast" />
<van-cell is-link :title="t('customImage')" @click="showImageToast" />
<van-cell
is-link
:title="t('loadingType')"
@click="showLoadingToast('spinner')"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customPosition')">
<van-cell is-link :title="t('positionTop')" @click="showTopToast" />
<van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
</demo-block>
<demo-block card :title="t('updateMessage')">
<van-cell
is-link
:title="t('updateMessage')"
@click="showCustomizedToast"
/>
</demo-block>
</template>
<script lang="ts">
import { useTranslate } from '@demo/use-translate'; import { useTranslate } from '@demo/use-translate';
import { Toast } from '..'; import { Toast } from '..';
import type { LoadingType } from '../../loading'; import type { LoadingType } from '../../loading';
@ -74,84 +42,100 @@ const i18n = {
}, },
}; };
export default { const t = useTranslate(i18n);
setup() {
const t = useTranslate(i18n);
const showLoadingToast = (loadingType: LoadingType) => { const showLoadingToast = (loadingType?: LoadingType) => {
Toast.loading({ Toast.loading({
forbidClick: true, forbidClick: true,
message: t('loading'), message: t('loading'),
loadingType, loadingType,
}); });
}; };
const showSuccessToast = () => { const showSuccessToast = () => {
Toast.success(t('text2')); Toast.success(t('text2'));
}; };
const showFailToast = () => { const showFailToast = () => {
Toast.fail(t('text3')); Toast.fail(t('text3'));
}; };
const showTopToast = () => { const showTopToast = () => {
Toast({ Toast({
message: t('positionTop'), message: t('positionTop'),
position: 'top', position: 'top',
}); });
}; };
const showBottomToast = () => { const showBottomToast = () => {
Toast({ Toast({
message: t('positionBottom'), message: t('positionBottom'),
position: 'bottom', position: 'bottom',
}); });
}; };
const showIconToast = () => { const showIconToast = () => {
Toast({ Toast({
message: t('customIcon'), message: t('customIcon'),
icon: 'like-o', icon: 'like-o',
}); });
}; };
const showImageToast = () => { const showImageToast = () => {
Toast({ Toast({
message: t('customImage'), message: t('customImage'),
icon: 'https://img.yzcdn.cn/vant/logo.png', icon: 'https://img.yzcdn.cn/vant/logo.png',
}); });
}; };
const showCustomizedToast = () => { const showCustomizedToast = () => {
const toast = Toast.loading({ const toast = Toast.loading({
duration: 0, duration: 0,
forbidClick: true, forbidClick: true,
message: t('text4', 3), message: t('text4', 3),
}); });
let second = 3; let second = 3;
const timer = setInterval(() => { const timer = setInterval(() => {
second--; second--;
if (second) { if (second) {
toast.message = t('text4', second); toast.message = t('text4', second);
} else { } else {
clearInterval(timer); clearInterval(timer);
Toast.clear(); Toast.clear();
} }
}, 1000); }, 1000);
};
return {
t,
showTopToast,
showFailToast,
showIconToast,
showImageToast,
showBottomToast,
showLoadingToast,
showSuccessToast,
showCustomizedToast,
};
},
}; };
</script> </script>
<template>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('title1')" @click="Toast(t('text'))" />
<van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
<van-cell is-link :title="t('success')" @click="showSuccessToast" />
<van-cell is-link :title="t('fail')" @click="showFailToast" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customIcon')">
<van-cell is-link :title="t('customIcon')" @click="showIconToast" />
<van-cell is-link :title="t('customImage')" @click="showImageToast" />
<van-cell
is-link
:title="t('loadingType')"
@click="showLoadingToast('spinner')"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customPosition')">
<van-cell is-link :title="t('positionTop')" @click="showTopToast" />
<van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
</demo-block>
<demo-block card :title="t('updateMessage')">
<van-cell
is-link
:title="t('updateMessage')"
@click="showCustomizedToast"
/>
</demo-block>
</template>

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

@ -1,3 +1,50 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { zhCNData } from './data-zh';
import { enUSData } from './data-en';
import { deepClone } from '../../utils/deep-clone';
const i18n = {
'zh-CN': {
showBadge: '徽标提示',
radioMode: '单选模式',
multipleMode: '多选模式',
customContent: '自定义内容',
data: zhCNData,
dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
},
'en-US': {
showBadge: 'Show Badge',
radioMode: 'Radio Mode',
multipleMode: 'Multiple Mode',
customContent: 'Custom Content',
data: enUSData,
dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
},
};
const t = useTranslate(i18n);
const activeId = ref(1);
const activeId2 = ref(1);
const activeIds = ref([1, 2]);
const activeIndex = ref(0);
const activeIndex2 = ref(0);
const activeIndex3 = ref(0);
const activeIndex4 = ref(0);
const items = computed(() => t('data'));
const simpleItems = computed(() => t('dataSimple'));
const badgeItems = computed(() => {
const data = deepClone(t('data')).slice(0, 2);
data[0].dot = true;
data[1].badge = 5;
return data;
});
</script>
<template> <template>
<demo-block :title="t('radioMode')"> <demo-block :title="t('radioMode')">
<van-tree-select <van-tree-select
@ -45,64 +92,3 @@
/> />
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { computed, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { zhCNData } from './data-zh';
import { enUSData } from './data-en';
import { deepClone } from '../../utils/deep-clone';
const i18n = {
'zh-CN': {
showBadge: '徽标提示',
radioMode: '单选模式',
multipleMode: '多选模式',
customContent: '自定义内容',
data: zhCNData,
dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
},
'en-US': {
showBadge: 'Show Badge',
radioMode: 'Radio Mode',
multipleMode: 'Multiple Mode',
customContent: 'Custom Content',
data: enUSData,
dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
activeId: 1,
activeId2: 1,
activeIds: [1, 2],
activeIndex: 0,
activeIndex2: 0,
activeIndex3: 0,
activeIndex4: 0,
});
const items = computed(() => t('data'));
const simpleItems = computed(() => t('dataSimple'));
const badgeItems = computed(() => {
const data = deepClone(t('data')).slice(0, 2);
data[0].dot = true;
data[1].badge = 5;
return data;
});
return {
...toRefs(state),
t,
items,
badgeItems,
simpleItems,
};
},
};
</script>

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

@ -1,3 +1,128 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { UploaderFileListItem } from '../types';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
status: '上传状态',
failed: '上传失败',
upload: '上传文件',
preview: '文件预览',
maxSize: '限制上传大小',
disabled: '禁用文件上传',
maxCount: '限制上传数量',
uploading: '上传中...',
imageName: '图片名称',
beforeRead: '上传前置处理',
overSizeTip: '文件大小不能超过 500kb',
invalidType: '请上传 jpg 格式图片',
customUpload: '自定义上传样式',
previewCover: '自定义预览样式',
customPreviewImage: '自定义单个图片预览',
deleteMessage: '删除前置处理',
},
'en-US': {
status: 'Upload Status',
failed: 'Failed',
upload: 'Upload File',
preview: 'Preview File',
maxSize: 'Max Size',
disabled: 'Disable Uploader',
maxCount: 'Max Count',
uploading: 'Uploading...',
imageName: 'Image Name',
beforeRead: 'Before Read',
overSizeTip: 'File size cannot exceed 500kb',
invalidType: 'Please upload an image in jpg format',
customUpload: 'Custom Upload Area',
previewCover: 'Preview Cover',
customPreviewImage: 'Custom single prevew image',
deleteMessage: 'Before Delete',
},
};
const t = useTranslate(i18n);
const fileList = ref([
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img.yzcdn.cn/vant/tree.jpg' },
]);
const fileList2 = ref([{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }]);
const fileList3 = ref([]);
const fileList4 = ref([{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }]);
const fileList5 = ref([
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{
url: 'https://img.yzcdn.cn/vant/sand.jpg',
deletable: true,
beforeDelete: () => {
Toast(t('deleteMessage'));
},
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
deletable: true,
imageFit: 'contain',
previewSize: 120,
},
]);
const statusFileList = [
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
status: 'uploading',
message: t('uploading'),
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
status: 'failed',
message: t('failed'),
},
];
const previewCoverFiles = ref([
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
file: {
name: t('imageName'),
},
},
]);
const beforeRead = (file: File) => {
if (file.type !== 'image/jpeg') {
Toast(t('invalidType'));
return false;
}
return true;
};
const afterRead = (file: UploaderFileListItem, detail: unknown) => {
console.log(file, detail);
};
const afterReadFailed = (item: UploaderFileListItem) => {
item.status = 'uploading';
item.message = t('uploading');
setTimeout(() => {
item.status = 'failed';
item.message = t('failed');
}, 1000);
};
const onOversize = (file: UploaderFileListItem, detail: unknown) => {
console.log(file, detail);
Toast(t('overSizeTip'));
};
</script>
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-uploader :after-read="afterRead" /> <van-uploader :after-read="afterRead" />
@ -53,139 +178,6 @@
</demo-block> </demo-block>
</template> </template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { UploaderFileListItem } from '../types';
import { Toast } from '../../toast';
const i18n = {
'zh-CN': {
status: '上传状态',
failed: '上传失败',
upload: '上传文件',
preview: '文件预览',
maxSize: '限制上传大小',
disabled: '禁用文件上传',
maxCount: '限制上传数量',
uploading: '上传中...',
imageName: '图片名称',
beforeRead: '上传前置处理',
overSizeTip: '文件大小不能超过 500kb',
invalidType: '请上传 jpg 格式图片',
customUpload: '自定义上传样式',
previewCover: '自定义预览样式',
customPreviewImage: '自定义单个图片预览',
deleteMessage: '删除前置处理',
},
'en-US': {
status: 'Upload Status',
failed: 'Failed',
upload: 'Upload File',
preview: 'Preview File',
maxSize: 'Max Size',
disabled: 'Disable Uploader',
maxCount: 'Max Count',
uploading: 'Uploading...',
imageName: 'Image Name',
beforeRead: 'Before Read',
overSizeTip: 'File size cannot exceed 500kb',
invalidType: 'Please upload an image in jpg format',
customUpload: 'Custom Upload Area',
previewCover: 'Preview Cover',
customPreviewImage: 'Custom single prevew image',
deleteMessage: 'Before Delete',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
fileList: [
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img.yzcdn.cn/vant/tree.jpg' },
],
fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
fileList3: [],
fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
fileList5: [
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{
url: 'https://img.yzcdn.cn/vant/sand.jpg',
deletable: true,
beforeDelete: () => {
Toast(t('deleteMessage'));
},
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
deletable: true,
imageFit: 'contain',
previewSize: 120,
},
],
statusFileList: [
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
status: 'uploading',
message: t('uploading'),
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
status: 'failed',
message: t('failed'),
},
],
previewCoverFiles: [
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
file: {
name: t('imageName'),
},
},
],
});
const beforeRead = (file: File) => {
if (file.type !== 'image/jpeg') {
Toast(t('invalidType'));
return false;
}
return true;
};
const afterRead = (file: UploaderFileListItem, detail: unknown) => {
console.log(file, detail);
};
const afterReadFailed = (item: UploaderFileListItem) => {
item.status = 'uploading';
item.message = t('uploading');
setTimeout(() => {
item.status = 'failed';
item.message = t('failed');
}, 1000);
};
const onOversize = (file: UploaderFileListItem, detail: unknown) => {
console.log(file, detail);
Toast(t('overSizeTip'));
};
return {
...toRefs(state),
t,
afterRead,
beforeRead,
onOversize,
afterReadFailed,
};
},
};
</script>
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';