vue-preview用法详解

Posted ldq678

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-preview用法详解相关的知识,希望对你有一定的参考价值。

  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。

  

以上是关于vue-preview用法详解的主要内容,如果未能解决你的问题,请参考以下文章

vue-preview vue图片预览插件+缩略图样式

vue-preview

vue-preview使用中,缩略图调整

vue-preview使用

vue-preview移动端图片全屏详细查看

使用vue-preview报错Cannot read property 'open' of undefined