import{e as a,o as n,y as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Imagepreview \u56FE\u7247\u9884\u89C8

\u4ECB\u7ECD

\u652F\u6301\u5168\u5C4F\u9884\u89C8\u89C6\u9891\u548C\u56FE\u7247\uFF0C\u53EF\u51FD\u6570\u5F0F\u8C03\u7528

\u5B89\u88C5

import { createApp, reactive, toRefs } from 'vue';

import { ImagePreview } from '@nutui/nutui';


const app = createApp();
app.use(ImagePreview);

\u57FA\u7840\u7528\u6CD5

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    @close="hideFn"
/>
<nut-cell isLink title="\u5C55\u793A\u56FE\u7247\u9884\u89C8" :showIcon="true" @click="showFn"></nut-cell>

setup() {
    const resData = reactive({
        showPreview: false,
        imgData: [
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
            },
        ]
    });

    const showFn = () => {
        resData.showPreview = true;
    }

    const hideFn = () => {
        resData.showPreview = false;
    }
    
    return {
        ...toRefs(resData),
        showFn,
        hideFn
    };
},

\u8BBE\u7F6E\u521D\u59CB\u9875\u7801

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    :content-close="true"
    :init-no="3"
    @close="hideFn"
/>
<nut-cell isLink title="\u8BBE\u7F6E\u521D\u59CB\u9875\u7801\u7684\u56FE\u7247\u9884\u89C8" :showIcon="true" @click="showFn"></nut-cell>

setup() {
    const resData = reactive({
        showPreview: false,
        imgData: [
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
            },
        ]
    });

    const showFn = () => {
        resData.showPreview = true;
    }

    const hideFn = () => {
        resData.showPreview = false;
    }
    
    return {
        ...toRefs(resData),
        showFn,
        hideFn
    };
},

\u8BBE\u7F6E\u8F6E\u64AD\u6307\u793A\u5668\u53CA\u989C\u8272

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    :pagination-visible="true"
    pagination-color="red"
    @close="hideFn"
/>
<nut-cell isLink title="\u8BBE\u7F6E\u8F6E\u64AD\u6307\u793A\u5668\u53CA\u989C\u8272" :showIcon="true" @click="showFn"></nut-cell>

setup() {
    const resData = reactive({
        showPreview: false,
        imgData: [
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
            },
        ]
    });

    const showFn = () => {
        resData.showPreview = true;
    }

    const hideFn = () => {
        resData.showPreview = false;
    }
    
    return {
        ...toRefs(resData),
        showFn,
        hideFn
    };
},

\u89C6\u9891\u3001\u56FE\u7247\u9884\u89C8

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    :videos="videoData"      
    @close="hideFn"
/>
<nut-cell isLink title="\u89C6\u9891\u3001\u56FE\u7247\u9884\u89C8" :showIcon="true" @click="showFn"></nut-cell>

setup() {
    const resData = reactive({
        showPreview: false,
        imgData: [
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
            },
            {
                src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
            },
        ],
        videoData: [
            {
                source: {
                    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
                    type: 'video/mp4'
                },
                options: {
                    muted: true,
                    controls: true
                }
            },
            {
                source: {
                    src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
                    type: 'video/mp4'
                },
                options: {
                    muted: true,
                    controls: true
                }
            }
        ],
    });

    const showFn = () => {
        resData.showPreview = true;
    }

    const hideFn = () => {
        resData.showPreview = false;
    }
    
    return {
        ...toRefs(resData),
        showFn,
        hideFn
    };
},

\u51FD\u6570\u5F0F\u8C03\u7528

<nut-cell isLink title="\u51FD\u6570\u5F0F\u8C03\u7528\u7684\u56FE\u7247\u9884\u89C8" :showIcon="true" @click="fnShow"></nut-cell>

import { ImagePreview } from '@nutui/nutui';

export default {
    setup() {
        const resData = reactive({
            imgData: [
                {
                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
                },
                {
                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
                },
                {
                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
                },
                {
                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
                },
            ]
        });

        const onClose = () => {
        console.log('imagepreview closed');
        };

        const fnShow = () => {
        ImagePreview({
            show: true,
            images: resData.imgData,
            onClose
        })
        };
        
        return {
            ...toRefs(resData),
            fnShow
        };
    },
}

Props

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
show	\u662F\u5426\u5C55\u793A\u9884\u89C8\u56FE\u7247	Boolean	false
videos	\u9884\u89C8\u7684\u89C6\u9891\u6570\u7EC4\uFF08\u89C6\u9891\u81EA\u52A8\u653E\u5230\u56FE\u7247\u4E4B\u524D\uFF09	Array<`Object`>	[]
images	\u9884\u89C8\u56FE\u7247\u6570\u7EC4	Array<`String`>	[]
init-no	\u521D\u59CB\u9875\u7801	Number	1
pagination-visible	\u5206\u9875\u6307\u793A\u5668\u662F\u5426\u5C55\u793A	Boolean	false
pagination-color	\u5206\u9875\u6307\u793A\u5668\u9009\u4E2D\u7684\u989C\u8272	String	\u2018#fff\u2019
content-close	\u70B9\u51FB\u56FE\u7247\u53EF\u4EE5\u9000\u51FA\u9884\u89C8	Boolean	false

Events

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
close	\u70B9\u51FB\u906E\u7F69\u5173\u95ED\u56FE\u7247\u9884\u89C8\u65F6\u89E6\u53D1	\u65E0

`,24),c=[p],i={setup(e,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,c))}};export{i as default};