
<template>
    <div>
        <h-button @click="handleBasic">基本用法</h-button>
        <br/>
        <br/>
        <h-button @click="handleOption">配置项</h-button>
        <br/>
        <br/>
        <h-button @click="handleAsync">异步关闭</h-button>
        <br/>
        <br/>
        <h-button @click="handleClick">组件调用</h-button>
        <h-image-preview
            v-model="show"
            :images="images"
        >
        </h-image-preview>
    </div>
</template>

<script>
import { hImagePreview, ImagePreview } from './index.js'
import hButton from '../button/';
export default {
    name: "icon-demo",
    data() {
        return {
            show: false,
            images: [
                'https://front-xps-cdn.xsyx.xyz/2019/10/19/1766356489.jpg',
                'https://front-xps-cdn.xsyx.xyz/2019/10/19/1435530579.jpg'
            ]
        }
    },
    components: {
        hImagePreview,
        hButton
    },
    methods: {
        handleAsync() {
            const instance = ImagePreview({
                images: this.images,
                asyncClose: true
            });
            setTimeout(() => {
                instance.close();
            }, 1000);
        },
        handleBasic() {
            ImagePreview(this.images);
        },
        handleOption() {
            ImagePreview({
                images: this.images,
                startPosition: 1
            });
        },
        handleClick() {
            this.show = true;
        }
    }
}
</script>