mirari / v-viewer

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
https://mirari.cc/v-viewer/
MIT License
2.46k stars 292 forks source link

你好,请问可以加个新功能吗:在查看图片时显示当前索引以及图片总数。如:1/12 #295

Closed jojolee2333 closed 10 months ago

jojolee2333 commented 11 months ago

码主你好,现在我遇到个需求,就是查看图片时需要显示当前是第几张图片,以及图片总数,比如一共12张图片,我查看第一张就在遮罩上方显示1/12这几个字,请问你以后会考虑新增这个功能吗,谢谢

mirari commented 11 months ago

这个需要找viewerjs作者,但是多半不会处理。 类似需求可以通过title函数来实现: https://github.com/fengyuanchen/viewerjs#title

jojolee2333 commented 11 months ago

谢谢,我去研究一下

jojolee2333 commented 11 months ago

感谢你的答复,我大概解决了,我是用Api形式调用,代码大致如下:` // vue2 methods

checkImgs(imgs) {
  const imgCount = imgs.length;
  const $viewer = viewerApi({
        options: {
                      initialViewIndex: 0, // 首张图片的索引
                      keyboard: true, // 键盘方向键控制
                      movable: true, // 可拖动
                      navbar: true, // 略缩图列表
                      rotatable: true, // 可旋转
                      scalable: false, // XY轴翻转
                      title: [1, (currentImg, imageData) => {
                          const imgIndex = imgs.findIndex(img => img === currentImg.src);
                          return `${imgIndex + 1}/${imgCount}`
                      }], // 自定义标题 关键部分
                      toolbar: true, // 工具栏
            },
           images: imgs
     })
 },

已经能显示效果,只不过title的位置修改还要再研究一下

mirari commented 11 months ago

引入时没有捆绑css,可以在开头引入时改成导入自己的css或者覆盖原有的样式来修改title的位置。

jojolee2333 commented 11 months ago

好的谢谢