【vue-preview 图片预览插件】
1.安装npm i vue-preview -S2.在main.js文件中导入该组件,并挂载到Vue身上import VuePreview from 'vue-preview';Vue.use(VuePreview);3.在组件中使用它<template><div class="thumbs"><vue-preview :slides="thumbsList" cla
·
npm官网 vue-preview
1.安装
cnpm i vue-preview -S
2.在main.js文件中导入该组件,并挂载到Vue身上
import VuePreview from 'vue-preview';
Vue.use(VuePreview);
3.在组件中使用它
<template>
<div class="imglist">
<vue-preview :slides="list" @close="handleClose"></vue-preview>
</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id,
list: [],
};
},
created() {
this.getImgs();
},
methods: {
getImgs() {
this.$http.get("api/getthumimages/" + this.id).then((result) => {
if (result.body.status === 0) {
result.body.message.forEach((item) => {
item.w = 600;
item.h = 600;
item.msrc = item.src;
});
this.list = result.body.message;
} else {
alert("图片获取失败");
}
});
},
handleClose() {
console.log("close event");
},
},
};
</script>
<style>
.imglist figure {
float: left;
width: 30%;
height: calc(30vw - 0px);
margin: 1.5%;
}
.imglist figure img {
width: 100%;
}
</style>
注意:样式表不能加scoped,否则无法修改vue-preview的样式
vant里面也有图片预览组件——ImagePreview,如果项目中使用了vant,用ImagePreview会更方便一些哦~
更多推荐
已为社区贡献2条内容
所有评论(0)