Vue 图片预览组件-前端百科

前言

Vue 图片预览组件基于 swiper，基本上保留了 swiper 的配置项。很多 app 都有这种图片浏览的方式，在列表页中（这种场景比较少），在详情页中（这种情况最常见）等。这个组件可以批量预览页面中的图片，也可以有选择性的预览指定的图片。

github 仓库：https://github.com/zhaoxixiong/vue-image-batch-preview

npm 包：https://www.npmjs.com/package/vue-image-batch-preview

用法

安装

直接在项目中通过 npm 安装

npm i vue-image-batch-preview

使用

下面是一个简单的示例：

<template>
  <vue-image-preview :options="options">
    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.src" />
      </li>
    </ul>
  </vue-image-preview>
</template>
<script>
import VueImagePreview from "vue-image-preview"
export default {
  components:{ VueImagePreview },
  ......
  data() {
    return {
      options: {
        effect: "cube",
        cube: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94
        }
      }
    };
  }
......
}
</script>

配置

有四个属性供使用

options swiper 配置项
attrAsign 指定要纳入预览的图片
autoUpdate 是否自动更新图片
counter 是否显示图片计数

这里分析下这个组件的大致实现。

首先这个组件是基于 swiper 的。所以组件提供了一个 options 属性，专门用于 swiper 的一些配置。attrAsign 属性让你可以把指定组件区域内可预览的图片。这种场景很常见。比如一个带有缩略图的列表页，很有可能这个列表页会有其它一些小图标。而这些小图标你是不想被纳入到预览器中。这时你就可以给 attrAsign 设置为 true。然后在 HTML 中给要纳入到预览器中的图片一个 ‘preview’ 属性。像下面这样子

<vue-image-preview :attr-asign="true" :options="options">
  <ul>
    <img :src="avatar.png" />
    <li v-for="item in list" :key="item.id">
      <img preview :src="item.src" />
    </li>
  </ul>
</vue-image-preview>

此时，第一个图片是不会被纳入到预览容器中的，只有添加了 preivew 属性的图片才会加入到预览器中。

autoUpdate 这个属性一般情况下用不到，如果你想实现更新预览器中的图片，你可以在父组件中手动调用一次此方法：

this.$refs["preview"].updateImage()

注意：要给组件添加 ref="preview"，不然 this.$refs["preview"] 取不到组件。比如在移动端，一般地列表都是滚动加载数据的，此时预览器中的图片还不会被更新的，也就是说你在预览图片中看到的还是上一次的图片，如果 autoUpdate 为 true （默认）那么组件会在你点击图片时自动调用一次 updateImage() 方法来更新图片容器，但如果 autoUpdate 为 false 时，你就必需得在父组件滚动加载数据后手动调用一次 updateImage() 方法以列新容器中的图片。

下面是一个完整的 DEMO：

<template>
  <vue-image-preview :attr-asign="true" :auto-update="false" ref="preview" :options="options">
    <ul>
      <li v-for="item in list" :key="item.id">
        <img preview :src="item.src" />
      </li>
    </ul>
  </vue-image-preview>
</template>
<script>
import VueImagePreview from "vue-image-preview";
export default {
  components: { VueImagePreview },
  name: "HelloWorld",
  data() {
    return {
      list: [{
         id: 1,
         src: "./images/1.jpg"
      }],
      options: {
        effect: "cube",
        cube: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94
        }
      }
    };
  },
  mounted() {
    const _this = this
    setTimeout(() => {
      _this.list = [
        ..._this.list,
        ...[
          {
            id: 2,
            src: "./images/2.jpg"
          },
          {
            id: 3,
            src: "./images/3.jpg" }
        ]
      ];
      _this.$refs["preview"].updateImage()
    }, 2000);
  }
};
</script>

上面这个例子使用了手动更新预览器图片的方法，当然你也可以不手动更新，让组件自己更新。

事件

@open：当预览器打开时会触发

@close：录预览器关闭时会触发

如果有什么问题可以到这里提：https://github.com/zhaoxixiong/vue-image-batch-preview/issues