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。