一、安装
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