前言
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