vue vue-picture-preview 图片预览插件

勾渝
2023-12-01

1. 安装依赖:

    npm install vue-picture-preview --save

2. .vue文件中引用:

    import vuePicturePreview from 'vue-picture-preview'
    Vue.use(vuePicturePreview)

3. .html文件中router-view标签后引入:

    <lg-preview></lg-preview>

4. .vue文件中应用:
    
    <div v-for="(item,index) in photos" v-bind:key="item.fileId" class="inner-for">
            <div class="photo" >
                <img v-preview="item.fileUrl" :src="item.fileThumbnail" :key="index" preview-title-enable="true" preview-nav-enable="true">
            </div>
        </div>

    说明:v-preview:存放预览后大图的路径;preview-title-enable:启动预览标题,默认为true;preview-nav-enable;启动预览导航
    
-----该插件只支持图片预览,不支持缩放功能-----

 类似资料: