VUE img展示 v-viewer插件

朴灿烈づ我的快乐病毒、 2023-06-19 07:23 12阅读 0赞

> ## 背景： ##
> 
>               **展示** 用户的**图片**及**操作**

## 步骤： ##

一、安装 **v-viewer插件**

>     npm install v-viewer

二、main.js 中全局配置

//fss  图片点击放大预览v-viewer插件
    
     import Viewer from 'v-viewer'
    
     import 'viewerjs/dist/viewer.css'
    
     Vue.use(Viewer)

三、页面使用

html：

<div class="Show_box">
                <div class="images" v-viewer="Options">
                    <div v-for="(itme,index) in imgSrcList" :key="index" >
                        <div class="img_div">
                            <img :src="itme" @click="show" class="img_box">
                        </div>
                    </div>
                </div>
            </div>

JS：

四、页面效果

>   列表展示：
> 
>           ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][] 
> 
>    点击后：
> 
>           ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1][]

**参考 v-viewer网址:** [https://www.npmjs.com/package/v-viewer][https_www.npmjs.com_package_v-viewer]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205143531279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191205143640208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70
[https_www.npmjs.com_package_v-viewer]: https://www.npmjs.com/package/v-viewer