vue-preview用法详解

Posted 2021-12-03 ldq678

　　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>

　　4.运行效果如下图

　　（1）小图，这个可以根据自己的需要来写下样式

　　

　　（2）大图，这个是点击上面的小图后，展示的大图。

　　

　　这里需要说明一下，vue-preview规定，用来绑定的数据源必须是一个数组，数组里的每一项都要是个js对象，该js对象应该形如 {w: 600, h: 500, src: xxxx, msrc: xxxxxx} 

　　其中，w是预览时的大图的图片宽度，h属性是预览时的大图的图片高度。src是预览时大图的url，msrc属性是小图的url。

　　这几个属性是vue-preview规定死的，必须用这几个属性。

　　我这个例子里，服务器发过来的数据，存储图片url的属性是.img_url，跟vue-preview要求的不一样，所以不能直接所谓数据源，因此，我们拿到服务端数据后，通过forEach语句，给data重新添加了2个属性，一个是src，一个是msrc。