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>

配置

有四个属性供使用

  1. options swiper 配置项
  2. attrAsign 指定要纳入预览的图片
  3. autoUpdate 是否自动更新图片
  4. 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

声明

1.原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

2.本文永久链接:http://yunkus.com/post/5dd3b4edaa3c5bc8

3.如果觉得本文对你有帮助,或者解决了你的问题,不妨扫一扫右边的二维码打赏支持,你的一分一毫,可能会让世界变得更美好。

微信
扫一扫,赏我
支付宝
扫一扫,赏我