【实用插件】Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

krico233

已于 2022-12-01 17:39:06 修改

阅读量1.9k

点赞数

分类专栏：我的开发笔记文章标签： javascript vue 前端

于 2022-12-01 17:37:40 首次发布

本文链接：https://blog.csdn.net/krico233/article/details/128135233

版权

我的开发笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

适用场景
适用于管理平台预览图片的场景
支持功能
支持放大缩小旋转，方向键切换图片
效果如下：
用法说明
将该插件按文档说明引入项目后，只需要在容器标签上面增加v-viewer属性，就可对该元素下所有后代元素中的图片增加如上图的预览功能，具体引入方式请参考官方文档。
文档地址：
中文文档：中文文档
仓库地址：插件git仓库
示例代码

<div class="flex" v-viewer>
   <a-card style="width: 240px; margin-top: 20px; margin-left: 20px">
       <img
           slot="cover"
           alt="example"
           src=""
       />
   </a-card>
   <a-card style="width: 240px; margin-top: 20px; margin-left: 20px">
       <img
           slot="cover"
           alt="example"
           src=""
       />
   </a-card>
   <a-card style="width: 240px; margin-top: 20px; margin-left: 20px">
       <img
           slot="cover"
           alt="example"
           src=""
       />
   </a-card>
</div>