vue-previewvue图⽚预览插件+缩略图样式⼀、安装
npm i vue-preview -S
⼆、main.js中导⼊组件
//vue-preview 开始
import VuePreview from 'vue-preview';
// defalut install
Vue.use(VuePreview)
//vue-preview 结束
三、代码
1、要为缩略图设定样式，要在全局样式中设定，如下：
/*图⽚预览缩略图*/
.
preview figure {
float: left;
width: 30%;
height:calc(30vw - 0px);
margin: 1.5%;
}
.preview figure img {
width: 100%;
}
2、组件代码：
<template>
<div>
<!--预览-->
<vue-preview :slides="setPreview()" class="preview"></vue-preview>
</div>
</template>
<script>
export default {
created () {
let  pid = this.$route.params.id;
//发送请求
this.$('p/satinGodApi?type=3&page=' + pid)
.
then(res=>{
this.details = res.data.data;
})
.catch(console.log)
vuejs流程图插件},
data () {
return {
details:[],
}
},
methods:{
setPreview:function () {
//给预览图设置参数
this.details.forEach( img => {
img.src = img.header;
img.msrc = img.header;
img.alt = p_commentsName;
img.title = p_commentsName;
img.w = 200;//这是⼤图的宽
img.h = 200;
} )
return this.details;
}
}
}
</script>
<style scoped>
/*这⾥的样式⽆法控制缩略图*/
</style>
四、效果
1、缩略图
2、预览图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。