nutui/site_docs/docs_vue/docs/imagepreview/doc.md

ImagePreview 图片预览

介绍

支持全屏预览视频和图片，可函数式调用

安装

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

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


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

基础用法

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    @close="hideFn"
/>
<nut-cell isLink title="展示图片预览" :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
    };
},

设置初始页码

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    :content-close="true"
    :init-no="3"
    @close="hideFn"
/>
<nut-cell isLink title="设置初始页码的图片预览" :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
    };
},

设置轮播指示器及颜色

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    :pagination-visible="true"
    pagination-color="red"
    @close="hideFn"
/>
<nut-cell isLink title="设置轮播指示器及颜色" :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
    };
},

视频、图片预览

<nut-imagepreview
    :show="showPreview"
    :images="imgData"
    :videos="videoData"      
    @close="hideFn"
/>
<nut-cell isLink title="视频、图片预览" :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
    };
},

函数式调用

<nut-cell isLink title="函数式调用的图片预览" :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

字段	说明	类型	默认值
show	是否展示预览图片	Boolean	false
videos	预览的视频数组（视频自动放到图片之前）	Array<Object>	[]
images	预览图片数组	Array<String>	[]
autoplay	自动轮播时长，0表示不会自动轮播	Number、String	3000
init-no	初始页码	Number	1
pagination-visible	分页指示器是否展示	Boolean	false
pagination-color	分页指示器选中的颜色	String	'#fff'
content-close	点击图片可以退出预览	Boolean	false

Events

|字段|说明|回调参数| |--|--|--| |close|点击遮罩关闭图片预览时触发|无|