适用于移动端、PC 端 Vue.js 图片预览插件
1、安装：npm install --save vue-picture-preview
2、使用：
（1）入口文件中main.js中全局引入：
import Vue from \'vue\'
import vuePicturePreview from \'vue-picture-preview\';
Vue.component(\'Previewer\', vuePicturePreview);
（2）按需局部引入：
import vuePicturePreview from \'vue-picture-preview\';
export default {
components: {
Previewer: vuePicturePreview
}
}
（3）示例
// 在dom中使用如下代码：
<div>
<img
class="previewer-demo-img"
v-for="(item, index) in list"
:src="item.src"
width="100"
@click="show(index)"
:key="index"
/>
<previewer ref="previewer" :list="list" :options="options"> </previewer>
</div>
// 数据和逻辑处理代码如下：
export default {
data() {
return {
list: [
{
msrc:
\'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg\',
src:
\'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg\',
w: 600,
h: 400
},
{
msrc:
\'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg\',
src:
\'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg\',
w: 600,
h: 400
},
{
msrc:
\'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg\',
src:
\'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg\',
w: 600,
h: 400
}
],
options: {
getThumbBoundsFn(index) {
// 找到缩略图的元素
let thumbnail = document.querySelectorAll(\'.previewer-demo-img\')[
index
];
// 得到y轴滚动的距离
let pageYScroll =
window.pageYOffset || document.documentElement.scrollTop;
// 可以选择水平滚动
// 获取元素相对于视口的位置
let rect = thumbnail.getBoundingClientRect();
// w = width
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
}
}
};
},
methods: {
show(index) {
// 显示特定index的图片，使用ref
this.$refs.previewer.show(index);
}
}
};
参考网址：https://www.npmjs.com/package/vue-picture-preview
（4）项目中实战：
图片数组处理：
以上是 适用于移动端、PC 端 Vue.js 图片预览插件 的全部内容， 来源链接： utcz.com/z/375104.html
