vue-preview vue图片预览插件+缩略图样式
程序员文章站
2022-07-02 16:18:54
一、安装 二、main.js中 导入组件 三、代码 1、要为缩略图设定样式 ,要在全局样式中设定,如下: 2、组件代码: 四、效果1、缩略图 2、预览图 ......
一、安装
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.$axios.get('https://www.apiopen.top/satingodapi?type=3&page=' + pid) .then(res=>{ this.details = res.data.data; }) .catch(console.log) }, data () { return { details:[], } }, methods:{ setpreview:function () { //给预览图设置参数 this.details.foreach( img => { img.src = img.header; img.msrc = img.header; img.alt = img.top_commentsname; img.title = img.top_commentsname; img.w = 200;//这是大图的宽 img.h = 200; } ) return this.details; } } } </script> <style scoped> /*这里的样式无法控制缩略图*/ </style>
四、效果
1、缩略图
2、预览图