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

  • 适用场景
    适用于管理平台预览图片的场景
  • 支持功能
    支持放大缩小旋转,方向键切换图片
  • 效果如下:
    【实用插件】Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作_第1张图片
    【实用插件】Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作_第2张图片
  • 用法说明
    将该插件按文档说明引入项目后,只需要在容器标签上面增加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>

  • 在我逛该插件作者的仓库时,发现这位大佬还有另一个点赞更多的项目,抱着学习的心态点进了项目示例

简要概括的话是一个线上裁剪图片的项目,用户上传图片之后可以进行裁剪等操作,最后得到操作后的图片。

  • 项目演示网站
    演示网站
    git仓库
  • 网站预览
    【实用插件】Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作_第3张图片

你可能感兴趣的:(我的开发笔记,javascript,vue,前端)