vue图片缩略图

最新推荐文章于 2024-06-03 16:56:42 发布

十七阿

最新推荐文章于 2024-06-03 16:56:42 发布

阅读量3.4k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_54107860/article/details/123986002

版权

下载 viewer 指令

npm install v-viewer --save

再main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: {

  'inline':true,
  'button':true, //右上角按钮
  "navbar": true, //底部缩略图
  "title": true, //当前图片标题
  "toolbar": true, //底部工具栏
  "tooltip": true, //显示缩放百分比
  "movable": true, //是否可以移动
  "zoomable": true, //是否可以缩放
  "rotatable": true, //是否可旋转
  "scalable": true, //是否可翻转
  "transition": true, //使用 CSS3 过度
  "fullscreen": true, //播放时是否全屏
  "keyboard": true, //是否支持键盘
  "url": "data-source",
  }
}),

vue文件中使用

<viewer :images="detail.img" class="descimgBox">
                    <img
                      style="width: 30px; margin: 5px; height: 30px"
                      v-for="(item, index) in detail.img"
                      :key="index"
                      :src="item.img"
                    />
                  </viewer>