125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<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';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
import ImagePreview, { ImagePreviewOptions } from '..';
|
|
import Toast from '../../toast';
|
|
|
|
const i18n = {
|
|
'zh-CN': {
|
|
closed: '关闭',
|
|
showClose: '展示关闭按钮',
|
|
showImages: '预览图片',
|
|
beforeClose: '异步关闭',
|
|
closeEvent: '监听关闭事件',
|
|
customConfig: '传入配置项',
|
|
startPosition: '指定初始位置',
|
|
componentCall: '组件调用',
|
|
index: (index: number) => `第${index + 1}页`,
|
|
},
|
|
'en-US': {
|
|
closed: 'closed',
|
|
showClose: 'Show Close Icon',
|
|
showImages: 'Show Images',
|
|
beforeClose: 'Before Close',
|
|
closeEvent: 'Close Event',
|
|
customConfig: 'Custom Config',
|
|
startPosition: 'Set Start Position',
|
|
componentCall: 'Component Call',
|
|
index: (index: number) => `Page: ${index}`,
|
|
},
|
|
};
|
|
|
|
const images = [
|
|
'https://img01.yzcdn.cn/vant/apple-1.jpg',
|
|
'https://img01.yzcdn.cn/vant/apple-2.jpg',
|
|
'https://img01.yzcdn.cn/vant/apple-3.jpg',
|
|
'https://img01.yzcdn.cn/vant/apple-4.jpg',
|
|
];
|
|
|
|
export default {
|
|
setup() {
|
|
const t = useTranslate(i18n);
|
|
const state = reactive({
|
|
show: false,
|
|
index: 0,
|
|
});
|
|
|
|
const onClose = () => Toast(t('closed'));
|
|
|
|
const beforeClose = () =>
|
|
new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve(true);
|
|
}, 1000);
|
|
});
|
|
|
|
const showComponentCall = () => {
|
|
state.show = true;
|
|
};
|
|
|
|
const onChange = (index: number) => {
|
|
state.index = index;
|
|
};
|
|
|
|
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
|
|
const instance = ImagePreview({
|
|
images,
|
|
...options,
|
|
});
|
|
|
|
if (options.beforeClose) {
|
|
setTimeout(() => {
|
|
instance?.close();
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
return {
|
|
...toRefs(state),
|
|
t,
|
|
images,
|
|
onClose,
|
|
onChange,
|
|
beforeClose,
|
|
showImagePreview,
|
|
showComponentCall,
|
|
};
|
|
},
|
|
};
|
|
</script>
|