pc 图片预览放大 端vue_vue-preview vue图片预览插件+缩略图样式

一、安装

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、组件代码：

export default {

created () {

let pid = this.$route.params.id;

//发送请求

this.$axios.get('https://www.apiopen.top/satinGodApi?type=3&page=' + pid)

.then(res=>{

this.details = res.data.data;

})

.catch(console.log)

},

data () {

ret