mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
refactor: demo using script setup (#9235)
This commit is contained in:
neverland
GitHub
parent
010238b63c
commit
4c41908ac1
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-action-bar>
|
||||
@ -62,53 +100,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
.demo-action-bar {
|
||||
.van-action-bar {
|
||||
|
||||
@ -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>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
|
||||
@ -51,94 +123,6 @@
|
||||
</van-action-sheet>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,21 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
@ -56,29 +39,33 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const searchResult = ref([]);
|
||||
const t = useTranslate(i18n);
|
||||
const searchResult = ref([]);
|
||||
|
||||
const onSave = () => Toast(t('save'));
|
||||
const onDelete = () => Toast(t('delete'));
|
||||
const onChangeDetail = (val: string) => {
|
||||
const onSave = () => Toast(t('save'));
|
||||
const onDelete = () => Toast(t('delete'));
|
||||
const onChangeDetail = (val: string) => {
|
||||
searchResult.value = val ? t('searchResult') : [];
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
onSave,
|
||||
onDelete,
|
||||
areaList,
|
||||
searchResult,
|
||||
onChangeDetail,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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">
|
||||
.demo-address-edit {
|
||||
.van-doc-demo-block__title {
|
||||
|
||||
@ -1,18 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Toast } from '../../toast';
|
||||
@ -78,27 +64,30 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const chosenAddressId = ref('1');
|
||||
const onAdd = () => {
|
||||
const t = useTranslate(i18n);
|
||||
const chosenAddressId = ref('1');
|
||||
const onAdd = () => {
|
||||
Toast(t('add'));
|
||||
};
|
||||
const onEdit = (item: unknown, index: number) => {
|
||||
};
|
||||
const onEdit = (item: unknown, index: number) => {
|
||||
Toast(`${t('edit')}:${index}`);
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
onAdd,
|
||||
onEdit,
|
||||
chosenAddressId,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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">
|
||||
.demo-address-list {
|
||||
.van-doc-demo-block__title {
|
||||
|
||||
@ -1,26 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
import { areaListEn } from './area-en';
|
||||
@ -43,15 +21,28 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('330302');
|
||||
|
||||
return {
|
||||
t,
|
||||
value,
|
||||
};
|
||||
},
|
||||
};
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('330302');
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-badge content="5">
|
||||
@ -65,32 +86,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('type')">
|
||||
<div class="demo-button-row">
|
||||
@ -72,78 +139,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,126 +1,5 @@
|
||||
<template>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import type { CalendarDayItem } from '../types';
|
||||
|
||||
@ -175,10 +54,8 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive<Record<string, any>>({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive<Record<string, any>>({
|
||||
date: {
|
||||
maxRange: [],
|
||||
selectSingle: null,
|
||||
@ -207,9 +84,9 @@ export default defineComponent({
|
||||
confirmText: undefined,
|
||||
confirmDisabledText: undefined,
|
||||
firstDayOfWeek: 0,
|
||||
});
|
||||
});
|
||||
|
||||
const resetSettings = () => {
|
||||
const resetSettings = () => {
|
||||
state.round = true;
|
||||
state.color = undefined;
|
||||
state.minDate = undefined;
|
||||
@ -221,9 +98,9 @@ export default defineComponent({
|
||||
state.confirmText = undefined;
|
||||
state.confirmDisabledText = undefined;
|
||||
state.firstDayOfWeek = 0;
|
||||
};
|
||||
};
|
||||
|
||||
const dayFormatter = (day: CalendarDayItem) => {
|
||||
const dayFormatter = (day: CalendarDayItem) => {
|
||||
if (!day.date) {
|
||||
return day;
|
||||
}
|
||||
@ -248,9 +125,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
return day;
|
||||
};
|
||||
};
|
||||
|
||||
const show = (type: string, id: string) => {
|
||||
const show = (type: string, id: string) => {
|
||||
resetSettings();
|
||||
state.id = id;
|
||||
state.type = type;
|
||||
@ -288,48 +165,156 @@ export default defineComponent({
|
||||
state.firstDayOfWeek = 1;
|
||||
break;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
const formatDate = (date: Date) => {
|
||||
if (date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
return `${state.date.getMonth() + 1}/${state.date.getDate()}`;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const formatFullDate = (date: Date) => {
|
||||
const formatFullDate = (date: Date) => {
|
||||
if (date) {
|
||||
return `${date.getFullYear()}/${formatDate(date)}`;
|
||||
return `${state.date.getFullYear()}/${formatDate(date)}`;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const formatMultiple = (dates: Date[]) => {
|
||||
const formatMultiple = (dates: Date[]) => {
|
||||
if (dates.length) {
|
||||
return t('selectCount', dates.length);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const formatRange = (dateRange: Date[]) => {
|
||||
const formatRange = (dateRange: Date[]) => {
|
||||
if (dateRange.length) {
|
||||
const [start, end] = dateRange;
|
||||
return `${formatDate(start)} - ${formatDate(end)}`;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const onConfirm = (date: Date | Date[]) => {
|
||||
const onConfirm = (date: Date | Date[]) => {
|
||||
state.showCalendar = false;
|
||||
state.date[state.id] = date;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
show,
|
||||
onConfirm,
|
||||
formatDate,
|
||||
formatRange,
|
||||
formatFullDate,
|
||||
formatMultiple,
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-card
|
||||
@ -52,33 +71,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,106 +1,5 @@
|
||||
<template>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue';
|
||||
import { CascaderOption } from '..';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { deepClone } from '../../utils/deep-clone';
|
||||
@ -155,40 +54,36 @@ type StateItem = {
|
||||
options?: CascaderOption[];
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive<Record<string, StateItem>>({
|
||||
base: {
|
||||
const t = useTranslate(i18n);
|
||||
const baseState = reactive<StateItem>({
|
||||
show: false,
|
||||
value: '',
|
||||
result: '',
|
||||
},
|
||||
customColor: {
|
||||
});
|
||||
const customColorState = reactive<StateItem>({
|
||||
show: false,
|
||||
value: null,
|
||||
result: '',
|
||||
},
|
||||
async: {
|
||||
});
|
||||
const asyncState = reactive<StateItem>({
|
||||
show: false,
|
||||
value: null,
|
||||
result: '',
|
||||
options: t('asyncOptions1'),
|
||||
},
|
||||
customFieldNames: {
|
||||
});
|
||||
const customFieldState = reactive<StateItem>({
|
||||
show: false,
|
||||
value: null,
|
||||
result: '',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const fieldNames = {
|
||||
const fieldNames = {
|
||||
text: 'name',
|
||||
value: 'code',
|
||||
children: 'items',
|
||||
};
|
||||
};
|
||||
|
||||
const customFieldOptions = computed(() => {
|
||||
const customFieldOptions = computed(() => {
|
||||
const options = deepClone(t('options'));
|
||||
const adjustFieldName = (item: CascaderOption) => {
|
||||
if ('text' in item) {
|
||||
@ -207,43 +102,135 @@ export default {
|
||||
};
|
||||
options.forEach(adjustFieldName);
|
||||
return options;
|
||||
});
|
||||
});
|
||||
|
||||
const loadDynamicOptions = ({ value }: CascaderOption) => {
|
||||
const loadDynamicOptions = ({ value }: CascaderOption) => {
|
||||
if (value === '330000') {
|
||||
setTimeout(() => {
|
||||
state.async.options![0].children = t('asyncOptions2');
|
||||
asyncState.options![0].children = t('asyncOptions2');
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const onFinish = (
|
||||
type: string,
|
||||
const onFinish = (
|
||||
state: StateItem,
|
||||
{
|
||||
value,
|
||||
selectedOptions,
|
||||
}: { value: number | string; selectedOptions: CascaderOption[] }
|
||||
) => {
|
||||
) => {
|
||||
const result = selectedOptions
|
||||
.map((option) => option.text || option.name)
|
||||
.join('/');
|
||||
|
||||
state[type] = {
|
||||
...state[type],
|
||||
show: false,
|
||||
value,
|
||||
result,
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onFinish,
|
||||
fieldNames,
|
||||
customFieldOptions,
|
||||
loadDynamicOptions,
|
||||
};
|
||||
},
|
||||
state.show = false;
|
||||
state.value = value;
|
||||
state.result = result;
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-cell-group>
|
||||
@ -81,50 +120,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
.demo-cell {
|
||||
.custom-title {
|
||||
|
||||
@ -1,113 +1,8 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { useRefs } from '../../composables/use-refs';
|
||||
import { ComponentInstance } from 'src/utils';
|
||||
import { ComponentInstance } from '../../utils';
|
||||
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
@ -142,10 +37,8 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
checkbox3: true,
|
||||
@ -158,38 +51,132 @@ export default {
|
||||
result3: [],
|
||||
checkAllResult: [],
|
||||
horizontalResult: [],
|
||||
});
|
||||
});
|
||||
|
||||
const group = ref<ComponentInstance>();
|
||||
const [refs, setRefs] = useRefs<ComponentInstance>();
|
||||
const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
|
||||
const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
|
||||
|
||||
const toggle = (index: number) => {
|
||||
const group = ref<ComponentInstance>();
|
||||
const [refs, setRefs] = useRefs<ComponentInstance>();
|
||||
|
||||
const toggle = (index: number) => {
|
||||
refs.value[index].toggle();
|
||||
};
|
||||
};
|
||||
|
||||
const checkAll = () => {
|
||||
const checkAll = () => {
|
||||
group.value?.toggleAll(true);
|
||||
};
|
||||
};
|
||||
|
||||
const toggleAll = () => {
|
||||
const toggleAll = () => {
|
||||
group.value?.toggleAll();
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
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>
|
||||
|
||||
<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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,74 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
|
||||
@ -92,41 +23,98 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
rate: 70,
|
||||
currentRate1: 70,
|
||||
currentRate2: 70,
|
||||
currentRate3: 70,
|
||||
currentRate4: 70,
|
||||
});
|
||||
});
|
||||
|
||||
const gradientColor = {
|
||||
const gradientColor = {
|
||||
'0%': '#3fecff',
|
||||
'100%': '#6149f6',
|
||||
};
|
||||
};
|
||||
|
||||
const add = () => {
|
||||
const add = () => {
|
||||
state.rate = format(state.rate + 20);
|
||||
};
|
||||
};
|
||||
|
||||
const reduce = () => {
|
||||
const reduce = () => {
|
||||
state.rate = format(state.rate - 20);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
add,
|
||||
reduce,
|
||||
gradientColor,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-row>
|
||||
@ -51,28 +68,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse v-model="state.active1">
|
||||
<van-collapse-item :title="t('title') + 1">
|
||||
{{ t('text') }}
|
||||
</van-collapse-item>
|
||||
@ -14,7 +40,7 @@
|
||||
</demo-block>
|
||||
|
||||
<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">
|
||||
{{ t('text') }}
|
||||
</van-collapse-item>
|
||||
@ -28,7 +54,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disabled')">
|
||||
<van-collapse v-model="active3">
|
||||
<van-collapse v-model="state.active3">
|
||||
<van-collapse-item :title="t('title') + 1">
|
||||
{{ t('text') }}
|
||||
</van-collapse-item>
|
||||
@ -42,7 +68,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('titleSlot')">
|
||||
<van-collapse v-model="active4">
|
||||
<van-collapse v-model="state.active4">
|
||||
<van-collapse-item>
|
||||
<template #title>
|
||||
{{ t('title') + 1 }}<van-icon name="question-o" />
|
||||
@ -60,41 +86,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,54 +1,6 @@
|
||||
<template>
|
||||
<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">
|
||||
<script setup lang="ts">
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { reactive, toRefs } from '@vue/reactivity';
|
||||
import { reactive } from '@vue/reactivity';
|
||||
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
@ -69,16 +21,14 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
rate: 4,
|
||||
slider: 50,
|
||||
switchChecked: true,
|
||||
});
|
||||
});
|
||||
|
||||
const themeVars = {
|
||||
const themeVars = {
|
||||
rateIconFullColor: '#07c160',
|
||||
sliderBarHeight: '4px',
|
||||
sliderButtonWidth: '20px',
|
||||
@ -86,17 +36,57 @@ export default {
|
||||
sliderActiveBackgroundColor: '#07c160',
|
||||
buttonPrimaryBorderColor: '#07c160',
|
||||
buttonPrimaryBackgroundColor: '#07c160',
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
themeVars,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('addContact')">
|
||||
<van-contact-card type="add" @click="onAdd" />
|
||||
@ -21,47 +54,3 @@
|
||||
/>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Toast } from '../../toast';
|
||||
@ -25,24 +12,26 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const editingContact = ref({});
|
||||
const t = useTranslate(i18n);
|
||||
const editingContact = ref({});
|
||||
|
||||
const onSave = () => Toast(t('save'));
|
||||
const onDelete = () => Toast(t('delete'));
|
||||
|
||||
return {
|
||||
t,
|
||||
onSave,
|
||||
onDelete,
|
||||
editingContact,
|
||||
};
|
||||
},
|
||||
};
|
||||
const onSave = () => Toast(t('save'));
|
||||
const onDelete = () => Toast(t('delete'));
|
||||
</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">
|
||||
.demo-contact-edit {
|
||||
.van-doc-demo-block__title {
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Toast } from '../../toast';
|
||||
@ -57,32 +44,33 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const chosenContactId = ref('1');
|
||||
const t = useTranslate(i18n);
|
||||
const chosenContactId = ref('1');
|
||||
|
||||
const onAdd = () => {
|
||||
const onAdd = () => {
|
||||
Toast(t('add'));
|
||||
};
|
||||
const onEdit = (contact: { id: string }) => {
|
||||
};
|
||||
const onEdit = (contact: { id: string }) => {
|
||||
Toast(t('edit') + contact.id);
|
||||
};
|
||||
const onSelect = (contact: { id: string }) => {
|
||||
};
|
||||
const onSelect = (contact: { id: string }) => {
|
||||
Toast(t('select') + contact.id);
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onSelect,
|
||||
chosenContactId,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-count-down :time="time" />
|
||||
@ -40,67 +87,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,30 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { CouponInfo } from '../../coupon';
|
||||
import { Toast } from '../../toast';
|
||||
@ -51,16 +26,14 @@ const i18n = {
|
||||
const getRandomId = (max = 999999) =>
|
||||
String(Math.floor(Math.random() * max) + 1);
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
exchangedCoupons: [] as CouponInfo[],
|
||||
});
|
||||
});
|
||||
|
||||
const coupon = computed(() => ({
|
||||
const coupon = computed(() => ({
|
||||
id: 1,
|
||||
condition: '无使用门槛\n最多优惠12元',
|
||||
reason: '',
|
||||
@ -71,62 +44,76 @@ export default {
|
||||
endAt: 1514592000,
|
||||
valueDesc: '1.5',
|
||||
unitDesc: '元',
|
||||
}));
|
||||
}));
|
||||
|
||||
const discountCoupon = computed(() => ({
|
||||
const discountCoupon = computed(() => ({
|
||||
...coupon.value,
|
||||
id: 2,
|
||||
value: 12,
|
||||
valueDesc: '8.8',
|
||||
unitDesc: '折',
|
||||
}));
|
||||
}));
|
||||
|
||||
const disabledCoupon = computed(() => ({
|
||||
const disabledCoupon = computed(() => ({
|
||||
...coupon.value,
|
||||
id: 3,
|
||||
reason: t('coupon.reason'),
|
||||
}));
|
||||
}));
|
||||
|
||||
const disabledDiscountCoupon = computed(() => ({
|
||||
const disabledDiscountCoupon = computed(() => ({
|
||||
...discountCoupon.value,
|
||||
valueDesc: '1',
|
||||
unitDesc: '折',
|
||||
id: 4,
|
||||
reason: t('coupon.reason'),
|
||||
}));
|
||||
}));
|
||||
|
||||
const coupons = computed(() => [
|
||||
const coupons = computed(() => [
|
||||
coupon.value,
|
||||
discountCoupon.value,
|
||||
...state.exchangedCoupons,
|
||||
]);
|
||||
]);
|
||||
|
||||
const disabledCoupons = computed(() => [
|
||||
const disabledCoupons = computed(() => [
|
||||
disabledCoupon.value,
|
||||
disabledDiscountCoupon.value,
|
||||
]);
|
||||
]);
|
||||
|
||||
const onChange = (index: number) => {
|
||||
const onChange = (index: number) => {
|
||||
state.showList = false;
|
||||
state.chosenCoupon = index;
|
||||
};
|
||||
};
|
||||
|
||||
const onExchange = () => {
|
||||
const onExchange = () => {
|
||||
Toast(t('exchange'));
|
||||
state.exchangedCoupons.push({
|
||||
...coupon.value,
|
||||
id: getRandomId(),
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
coupons,
|
||||
onChange,
|
||||
onExchange,
|
||||
disabledCoupons,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block card :title="t('dateType')">
|
||||
<van-datetime-picker
|
||||
@ -22,7 +91,7 @@
|
||||
|
||||
<demo-block v-if="!isWeapp" card :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.monthDayType"
|
||||
v-model="value.monthDay"
|
||||
type="month-day"
|
||||
:title="t('monthDayType')"
|
||||
:min-date="minDate"
|
||||
@ -82,82 +151,3 @@
|
||||
/>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('alert1')" @click="onClickAlert" />
|
||||
@ -27,100 +106,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-divider />
|
||||
@ -34,34 +57,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,64 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customContent')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { ComponentInstance } from '../../utils';
|
||||
|
||||
@ -103,33 +44,87 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const item = ref<ComponentInstance>();
|
||||
const t = useTranslate(i18n);
|
||||
const item = ref<ComponentInstance>();
|
||||
const t = useTranslate(i18n);
|
||||
|
||||
const state = reactive({
|
||||
const state = reactive({
|
||||
switch1: true,
|
||||
switch2: false,
|
||||
value1: 0,
|
||||
value2: 'a',
|
||||
});
|
||||
});
|
||||
|
||||
const option1 = computed(() => t('option1'));
|
||||
const option2 = computed(() => t('option2'));
|
||||
const option1 = computed(() => t('option1'));
|
||||
const option2 = computed(() => t('option2'));
|
||||
|
||||
const onConfirm = () => {
|
||||
const onConfirm = () => {
|
||||
item.value?.toggle();
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
item,
|
||||
option1,
|
||||
option2,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-empty :description="t('description')" />
|
||||
@ -34,44 +63,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,19 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
@ -30,12 +15,21 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
|
||||
return { t, value };
|
||||
},
|
||||
};
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
</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>
|
||||
|
||||
@ -1,16 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
@ -25,11 +13,18 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
return { t, value };
|
||||
},
|
||||
};
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
</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>
|
||||
|
||||
@ -1,41 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('customType')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -65,21 +29,48 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
text: '',
|
||||
phone: '',
|
||||
digit: '',
|
||||
number: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
};
|
||||
},
|
||||
};
|
||||
});
|
||||
</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>
|
||||
|
||||
@ -1,21 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -32,11 +15,22 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
|
||||
return { t };
|
||||
},
|
||||
};
|
||||
const t = useTranslate(i18n);
|
||||
</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>
|
||||
|
||||
@ -1,26 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('errorInfo')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -38,18 +17,30 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
phone: '123',
|
||||
username: '',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
};
|
||||
},
|
||||
};
|
||||
});
|
||||
</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>
|
||||
|
||||
@ -1,25 +1,5 @@
|
||||
<template>
|
||||
<demo-block v-if="!isWeapp" :title="t('formatValue')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -37,20 +17,30 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
});
|
||||
const formatter = (value: string) => value.replace(/\d/g, '');
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
formatter,
|
||||
};
|
||||
},
|
||||
};
|
||||
});
|
||||
const formatter = (value: string) => value.replace(/\d/g, '');
|
||||
</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>
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
@ -28,12 +15,19 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
|
||||
return { t, value };
|
||||
},
|
||||
};
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('insertButton')">
|
||||
<van-cell-group inset>
|
||||
@ -17,32 +40,3 @@
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -1,26 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('showIcon')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -36,18 +15,30 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
icon1: '',
|
||||
icon2: '123',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
};
|
||||
},
|
||||
};
|
||||
});
|
||||
</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>
|
||||
|
||||
@ -1,21 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
@ -32,12 +15,23 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
|
||||
return { t, value };
|
||||
},
|
||||
};
|
||||
const t = useTranslate(i18n);
|
||||
const value = ref('');
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<basic-usage />
|
||||
<custom-type />
|
||||
@ -10,31 +23,3 @@
|
||||
<show-word-limit />
|
||||
<input-align />
|
||||
</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>
|
||||
|
||||
@ -1,35 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { FieldValidateError } from '../../field/types';
|
||||
|
||||
@ -50,31 +20,50 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
});
|
||||
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
};
|
||||
|
||||
const onFailed = (errorInfo: {
|
||||
const onFailed = (errorInfo: {
|
||||
values: Record<string, string>;
|
||||
errors: FieldValidateError[];
|
||||
}) => {
|
||||
}) => {
|
||||
console.log('failed', errorInfo);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -1,82 +1,5 @@
|
||||
<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="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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import FieldTypeArea from './FieldTypeArea.vue';
|
||||
import FieldTypePicker from './FieldTypePicker.vue';
|
||||
@ -114,17 +37,8 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FieldTypeArea,
|
||||
FieldTypePicker,
|
||||
FieldTypeCalendar,
|
||||
FieldTypeDatetimePicker,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
@ -133,17 +47,89 @@ export default {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
switchChecked: false,
|
||||
});
|
||||
});
|
||||
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -1,24 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { AreaColumnOption } from '../../area';
|
||||
@ -37,32 +18,45 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
});
|
||||
});
|
||||
|
||||
const onConfirm = (values: AreaColumnOption[]) => {
|
||||
const onConfirm = (values: AreaColumnOption[]) => {
|
||||
state.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
state.showArea = false;
|
||||
};
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
const onCancel = () => {
|
||||
state.showArea = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -1,23 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -31,27 +13,34 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
});
|
||||
|
||||
const formatDate = (date: Date) =>
|
||||
`${date.getMonth() + 1}/${date.getDate()}`;
|
||||
const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
|
||||
const onConfirm = (date: Date) => {
|
||||
const onConfirm = (date: Date) => {
|
||||
state.value = formatDate(date);
|
||||
state.showCalendar = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -1,20 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -28,29 +13,38 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
});
|
||||
|
||||
const onConfirm = (time: string) => {
|
||||
const onConfirm = (time: string) => {
|
||||
state.value = time;
|
||||
state.showPicker = false;
|
||||
};
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -1,24 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -34,29 +15,42 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
});
|
||||
|
||||
const onConfirm = (value: string) => {
|
||||
const onConfirm = (value: string) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
};
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -1,47 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('title')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { FieldValidateError } from '../../field/types';
|
||||
import { Toast } from '../../toast';
|
||||
@ -73,21 +31,20 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
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) => {
|
||||
Toast.loading(t('validating'));
|
||||
|
||||
@ -97,27 +54,56 @@ export default {
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
};
|
||||
|
||||
const onFailed = (errorInfo: {
|
||||
const onFailed = (errorInfo: {
|
||||
values: Record<string, string>;
|
||||
errors: FieldValidateError[];
|
||||
}) => {
|
||||
}) => {
|
||||
console.log('failed', errorInfo);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
pattern: /\d{6}/,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
validatorMessage,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<basic-usage />
|
||||
<validate-rules />
|
||||
<field-type />
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-grid>
|
||||
@ -63,45 +96,3 @@
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<van-tabs v-model:active="tab" sticky>
|
||||
<van-tab :title="t('demo')">
|
||||
@ -93,106 +182,6 @@
|
||||
</van-tabs>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,40 +1,5 @@
|
||||
<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="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';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { ImagePreview, ImagePreviewOptions } from '..';
|
||||
import { Toast } from '../../toast';
|
||||
@ -71,32 +36,30 @@ const images = [
|
||||
'https://img.yzcdn.cn/vant/apple-4.jpg',
|
||||
];
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
show: false,
|
||||
index: 0,
|
||||
});
|
||||
});
|
||||
|
||||
const onClose = () => Toast(t('closed'));
|
||||
const onClose = () => Toast(t('closed'));
|
||||
|
||||
const beforeClose = () =>
|
||||
new Promise((resolve) => {
|
||||
const beforeClose = () =>
|
||||
new Promise<boolean>((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const showComponentCall = () => {
|
||||
const showComponentCall = () => {
|
||||
state.show = true;
|
||||
};
|
||||
};
|
||||
|
||||
const onChange = (index: number) => {
|
||||
const onChange = (index: number) => {
|
||||
state.index = index;
|
||||
};
|
||||
};
|
||||
|
||||
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
|
||||
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
|
||||
const instance = ImagePreview({
|
||||
images,
|
||||
...options,
|
||||
@ -107,18 +70,44 @@ export default {
|
||||
instance?.close();
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
images,
|
||||
onClose,
|
||||
onChange,
|
||||
beforeClose,
|
||||
showImagePreview,
|
||||
showComponentCall,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-row>
|
||||
@ -58,43 +87,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<van-tabs v-model:active="activeTab">
|
||||
<van-tab :title="t('basicUsage')">
|
||||
@ -25,39 +51,3 @@
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<img v-for="img in imageList" :key="img" v-lazy="img" />
|
||||
@ -18,45 +50,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<van-tabs>
|
||||
<van-tab :title="t('basicUsage')">
|
||||
@ -38,100 +119,6 @@
|
||||
</van-tabs>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('type')">
|
||||
<van-loading />
|
||||
@ -36,36 +61,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-nav-bar
|
||||
@ -18,31 +36,3 @@
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
|
||||
@ -42,40 +71,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,35 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Notify } from '..';
|
||||
@ -62,53 +31,70 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const show = ref(false);
|
||||
const t = useTranslate(i18n);
|
||||
const show = ref(false);
|
||||
|
||||
const showNotify = () => {
|
||||
const showNotify = () => {
|
||||
Notify(t('content'));
|
||||
};
|
||||
};
|
||||
|
||||
const showCustomColor = () => {
|
||||
const showCustomColor = () => {
|
||||
Notify({
|
||||
color: '#ad0000',
|
||||
message: t('customColor'),
|
||||
background: '#ffe1e1',
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showCustomDuration = () => {
|
||||
const showCustomDuration = () => {
|
||||
Notify({
|
||||
message: t('customDuration'),
|
||||
duration: 1000,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showType = (type: NotifyType) => {
|
||||
const showType = (type: NotifyType) => {
|
||||
Notify({
|
||||
message: t('content'),
|
||||
type,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showComponentCall = () => {
|
||||
const showComponentCall = () => {
|
||||
show.value = true;
|
||||
setTimeout(() => {
|
||||
show.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
show,
|
||||
showType,
|
||||
showNotify,
|
||||
showCustomColor,
|
||||
showComponentCall,
|
||||
showCustomDuration,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block card>
|
||||
<van-cell
|
||||
@ -103,68 +152,6 @@
|
||||
/>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-button
|
||||
@ -24,37 +44,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-pagination
|
||||
@ -48,45 +76,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,59 +1,5 @@
|
||||
<template>
|
||||
<demo-block ref="basicUsage" :title="t('basicUsage')">
|
||||
<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';
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { ComponentInstance } from '../../utils';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
@ -76,61 +22,69 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const initialValue = {
|
||||
const t = useTranslate(i18n);
|
||||
const initialValue = {
|
||||
showInfo: '123',
|
||||
addGutter: '123',
|
||||
basicUsage: '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;
|
||||
|
||||
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 state = reactive({
|
||||
value: initialValue,
|
||||
current: 'basicUsage' as ValueKeys,
|
||||
errorInfo: '',
|
||||
});
|
||||
const refMap = {
|
||||
showInfo,
|
||||
addGutter,
|
||||
basicUsage,
|
||||
removeMask,
|
||||
customLength,
|
||||
};
|
||||
|
||||
const onInput = (key: ValueKeys) => {
|
||||
const { value, current } = state;
|
||||
const maxlegnth = current === 'customLength' ? 4 : 6;
|
||||
const newValue = (value[current] + key).slice(0, maxlegnth);
|
||||
const onInput = (key: ValueKeys) => {
|
||||
if (!current.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
value[current] = newValue;
|
||||
const maxlegnth = current.value === 'customLength' ? 4 : 6;
|
||||
const newValue = (values.value[current.value] + key).slice(0, maxlegnth);
|
||||
|
||||
values.value[current.value] = newValue;
|
||||
|
||||
if (
|
||||
current === 'showInfo' &&
|
||||
current.value === 'showInfo' &&
|
||||
newValue.length === 6 &&
|
||||
newValue !== '123456'
|
||||
) {
|
||||
state.errorInfo = t('errorInfo');
|
||||
errorInfo.value = t('errorInfo');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
const { value, current } = state;
|
||||
value[current] = value[current].slice(0, value[current].length - 1);
|
||||
|
||||
if (current === 'showInfo') {
|
||||
state.errorInfo = '';
|
||||
const onDelete = () => {
|
||||
if (!current.value) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => state.current,
|
||||
(value) => {
|
||||
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) {
|
||||
@ -138,20 +92,63 @@ export default {
|
||||
window.scrollTo(0, window.pageYOffset + top);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
...refMap,
|
||||
t,
|
||||
onInput,
|
||||
onDelete,
|
||||
};
|
||||
},
|
||||
};
|
||||
});
|
||||
</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">
|
||||
.demo-password-input {
|
||||
min-height: 150vh;
|
||||
|
||||
@ -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>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-picker
|
||||
@ -72,147 +196,3 @@
|
||||
/>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-popover
|
||||
@ -119,111 +210,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
|
||||
@ -93,63 +139,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-progress :percentage="50" />
|
||||
@ -23,30 +42,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<van-tabs>
|
||||
<van-tab :title="t('basicUsage')">
|
||||
@ -41,74 +96,6 @@
|
||||
</van-tabs>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-radio-group v-model="radio1" class="demo-radio-group">
|
||||
@ -91,62 +136,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-rate v-model="value1" />
|
||||
@ -42,61 +85,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-search v-model="value1" :placeholder="t('placeholder')" />
|
||||
@ -50,54 +88,3 @@
|
||||
</van-search>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -1,46 +1,4 @@
|
||||
<template>
|
||||
<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">
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { ShareSheetOption, ShareSheetOptions } from '..';
|
||||
@ -83,25 +41,23 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const show = reactive({
|
||||
const t = useTranslate(i18n);
|
||||
const show = reactive({
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
});
|
||||
});
|
||||
|
||||
const options = computed(() => [
|
||||
const options = computed(() => [
|
||||
{ name: t('wechat'), icon: 'wechat' },
|
||||
{ name: t('weibo'), icon: 'weibo' },
|
||||
{ name: t('link'), icon: 'link' },
|
||||
{ name: t('poster'), icon: 'poster' },
|
||||
{ name: t('qrcode'), icon: 'qrcode' },
|
||||
]);
|
||||
]);
|
||||
|
||||
const multiLineOptions = computed(() => [
|
||||
const multiLineOptions = computed(() => [
|
||||
[
|
||||
{ name: t('wechat'), icon: 'wechat' },
|
||||
{ name: t('wechatMoments'), icon: 'wechat-moments' },
|
||||
@ -114,9 +70,9 @@ export default {
|
||||
{ name: t('qrcode'), icon: 'qrcode' },
|
||||
{ name: t('weappQrcode'), icon: 'weapp-qrcode' },
|
||||
],
|
||||
]);
|
||||
]);
|
||||
|
||||
const customIconOptions = computed(() => [
|
||||
const customIconOptions = computed(() => [
|
||||
{
|
||||
name: t('name'),
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
|
||||
@ -129,9 +85,9 @@ export default {
|
||||
name: t('name'),
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
|
||||
},
|
||||
]);
|
||||
]);
|
||||
|
||||
const optionsWithDesc = computed<ShareSheetOptions>(() => [
|
||||
const optionsWithDesc = computed<ShareSheetOptions>(() => [
|
||||
{ name: t('wechat'), icon: 'wechat' },
|
||||
{ name: t('weibo'), icon: 'weibo' },
|
||||
{
|
||||
@ -141,29 +97,55 @@ export default {
|
||||
},
|
||||
{ name: t('poster'), icon: 'poster' },
|
||||
{ name: t('qrcode'), icon: 'qrcode' },
|
||||
]);
|
||||
]);
|
||||
|
||||
const onSelect = (option: ShareSheetOption) => {
|
||||
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,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
</style>
|
||||
<template>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
<van-grid :column-num="2" :border="false">
|
||||
<van-grid-item>
|
||||
@ -38,46 +66,6 @@
|
||||
</van-grid>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-skeleton title :row="3" />
|
||||
@ -21,39 +45,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('title1')">
|
||||
<van-slider v-model="value1" @change="onChange" />
|
||||
@ -50,62 +94,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block card>
|
||||
<van-cell center :title="t('basicUsage')">
|
||||
@ -66,67 +118,3 @@
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-steps :active="active">
|
||||
@ -42,57 +83,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-sticky>
|
||||
@ -35,36 +56,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,28 +1,5 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@ -47,32 +24,43 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
show: false,
|
||||
transitionName: '',
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const show = ref(false);
|
||||
const transitionName = ref('');
|
||||
|
||||
const animate = (transitionName: string) => {
|
||||
state.show = true;
|
||||
state.transitionName = transitionName;
|
||||
const animate = (newName: string) => {
|
||||
show.value = true;
|
||||
transitionName.value = newName;
|
||||
|
||||
setTimeout(() => {
|
||||
state.show = false;
|
||||
show.value = false;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
animate,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-submit-bar
|
||||
@ -39,50 +72,7 @@
|
||||
</van-submit-bar>
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-swipe-cell>
|
||||
@ -45,60 +91,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-swipe :autoplay="3000" indicator-color="white">
|
||||
@ -62,50 +96,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-switch v-model="checked" />
|
||||
@ -36,62 +79,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tabs v-model:active="active">
|
||||
@ -102,79 +161,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tabbar v-model="active">
|
||||
@ -70,57 +110,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
.demo-tabbar {
|
||||
.van-tabbar {
|
||||
|
||||
@ -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>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="`primary ${t('type')}`">
|
||||
@ -90,61 +135,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
@ -1,36 +1,4 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Toast } from '..';
|
||||
import type { LoadingType } from '../../loading';
|
||||
@ -74,55 +42,53 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const t = useTranslate(i18n);
|
||||
|
||||
const showLoadingToast = (loadingType: LoadingType) => {
|
||||
const showLoadingToast = (loadingType?: LoadingType) => {
|
||||
Toast.loading({
|
||||
forbidClick: true,
|
||||
message: t('loading'),
|
||||
loadingType,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showSuccessToast = () => {
|
||||
const showSuccessToast = () => {
|
||||
Toast.success(t('text2'));
|
||||
};
|
||||
};
|
||||
|
||||
const showFailToast = () => {
|
||||
const showFailToast = () => {
|
||||
Toast.fail(t('text3'));
|
||||
};
|
||||
};
|
||||
|
||||
const showTopToast = () => {
|
||||
const showTopToast = () => {
|
||||
Toast({
|
||||
message: t('positionTop'),
|
||||
position: 'top',
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showBottomToast = () => {
|
||||
const showBottomToast = () => {
|
||||
Toast({
|
||||
message: t('positionBottom'),
|
||||
position: 'bottom',
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showIconToast = () => {
|
||||
const showIconToast = () => {
|
||||
Toast({
|
||||
message: t('customIcon'),
|
||||
icon: 'like-o',
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showImageToast = () => {
|
||||
const showImageToast = () => {
|
||||
Toast({
|
||||
message: t('customImage'),
|
||||
icon: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const showCustomizedToast = () => {
|
||||
const showCustomizedToast = () => {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
@ -139,19 +105,37 @@ export default {
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
showTopToast,
|
||||
showFailToast,
|
||||
showIconToast,
|
||||
showImageToast,
|
||||
showBottomToast,
|
||||
showLoadingToast,
|
||||
showSuccessToast,
|
||||
showCustomizedToast,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('radioMode')">
|
||||
<van-tree-select
|
||||
@ -45,64 +92,3 @@
|
||||
/>
|
||||
</demo-block>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-uploader :after-read="afterRead" />
|
||||
@ -53,139 +178,6 @@
|
||||
</demo-block>
|
||||
</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">
|
||||
@import '../../style/var';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user