mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<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" />
|
|
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
|
|
<van-cell
|
|
is-link
|
|
:title="t('showDescription')"
|
|
@click="show.description = true"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block card :title="t('optionStatus')">
|
|
<van-cell is-link :title="t('optionStatus')" @click="show.status = true" />
|
|
</demo-block>
|
|
|
|
<demo-block card :title="t('customPanel')">
|
|
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
|
|
</demo-block>
|
|
|
|
<van-action-sheet
|
|
v-model:show="show.basic"
|
|
:actions="simpleActions"
|
|
@select="onSelect"
|
|
/>
|
|
|
|
<van-action-sheet
|
|
v-model:show="show.cancel"
|
|
:actions="simpleActions"
|
|
close-on-click-action
|
|
:cancel-text="t('cancel')"
|
|
@cancel="onCancel"
|
|
/>
|
|
|
|
<van-action-sheet
|
|
v-model:show="show.description"
|
|
:actions="actionsWithDescription"
|
|
close-on-click-action
|
|
:cancel-text="t('cancel')"
|
|
:description="t('description')"
|
|
/>
|
|
|
|
<van-action-sheet
|
|
v-model:show="show.status"
|
|
close-on-click-action
|
|
:actions="statusActions"
|
|
:cancel-text="t('cancel')"
|
|
/>
|
|
|
|
<van-action-sheet v-model:show="show.title" :title="t('title')">
|
|
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
|
</van-action-sheet>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.demo-action-sheet {
|
|
&-content {
|
|
padding: var(--van-padding-md) var(--van-padding-md)
|
|
calc(var(--van-padding-md) * 10);
|
|
}
|
|
}
|
|
</style>
|