vue-preview用法详解

最新推荐文章于 2025-07-06 20:43:56 发布

转载最新推荐文章于 2025-07-06 20:43:56 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ldq678/p/10917355.html

文章标签：

#javascript #ViewUI

本文介绍了Vue-preview移动端图片预览组件，它简单易用，支持滑动换图和手势缩放。记录了1.1.3版本的具体用法，包括安装、导入挂载、组件使用等。还说明了绑定数据源须为特定格式数组，若服务端数据属性不符，需重新添加属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　Vue-preview是一个非常好用的移动端图片预览的组件，简单易用是它的一大特点，支持滑动换图，支持手势缩放，显示当前时第几张和总共多少张。

　　vue-preview1.1.3版本跟之前有了一点变化，现把具体用法记录一下。

　　1.安装　　

npm i vue-preview -S

　　2.在main.js文件中导入该组件，并挂载到Vue身上

import VuePreview from 'vue-preview';
Vue.use(VuePreview);

　　3.在自己的组件中使用它

<template>
    <div class="thumbs">
        <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview>
  </div>
</template>
<script>
export default {
    data() {
        return {
            thumbsList: [],
        };
    },
    methods: {
        getThumbsList(){
            this.$ajax({
                method: "get",
                url: "/thumbs/" ,
            }).then(response => {
                var data = response.data
                if (data.Status == 0) {        
                    data.Data.forEach(item => {
                        item.w = 600;   //设置以大图浏览时的宽度
                        item.h = 400;     //设置以大图浏览时的高度
                        item.src = item.img_url;  //大图
                        item.msrc = item.img_url;  //小图
                    });            
                    this.thumbsList = data.Data
                } else {
                    Toast('获取图片信息失败！');
                }
            });
        },
    },  
};
</script>