【 vue缩略图 --- vue-preview 】

小菜鸡一名来报道

于 2023-07-28 11:07:28 发布

阅读量450

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_57426442/article/details/131975817

版权

文章介绍了如何在Vue项目中使用vue-preview组件来实现图片预览。首先通过npm安装，然后在main.js中导入并全局挂载。在需要预览图片的组件模板中插入vue-preview标签，并配置相关属性如图片列表(imgs)和样式。

摘要由CSDN通过智能技术生成

点击后

一、介绍

vue-preview 是一款简单易用的一款图片预览组件

二、安装

1. 在终端输入 npm install vue-preview -S

2.在min.js文件中导入并挂载到vue上

// 引入图片预览插件

import ViewPreview from 'vue2-preview';

Vue.use(ViewPreview);

3.在自己需要的组件内使用

<template>

<div class="boxMax-card">
            <div class="_plateNumber">

                // 这里就是你要放大的 脱氨
                <vue-preview
                    :list="imgs"
                    :thumbImageStyle="{width: '120px', height: '50px'}"
                    :tapToClose="true"
                /> 
            </div>
  </div>
</template>

<script>
import imgSrc1 from '../../../../assets/img/lpr1.png';
export default {
    data(){
        return{
            imgs: [
                {
                    src: imgSrc1,
                    w: 800,
                    h: 600
                }
              ] 
        }
    },
}
</script>