Vue--縮略圖

安裝---需查看官網--

cnpm i vue-preview -s

 

<!-- 縮略圖區域 -->
    <div class="thumb-img-list">
      <!-- 使用 v-for 循環渲染縮略圖 -->
      <img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" @click="$preview.open(index, photolist)" :key="index">
    </div>

　　獲取后台接口---必須設置寬和高

    getThumbs() {
      // 獲取縮略圖
      this.$http.get("api/getthumbsimages/" + this.id).then(res => {
        if(res.body.status === 0){
          res.body.message.forEach(item => {
            item.w = 600;
            item.h = 400;
          });
        }
      });
    }

　　

 

## 實現縮略圖的效果

\1. 先加載所有的圖片並顯示到頁面上；

\2. 使用vue-preview插件來實現縮略圖效果；

\3. 如何使用縮略圖組件呢：

+ 運行cnpm i vue-preview -S安裝

+ 在 全局的配置文件globalConfig.js中，安裝此組件：

```

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

```

+ 在頁面中，先把獲取到的圖片，按照標准的格式做一層包裝：為每個圖片添加w和h屬性；

+ 把官方提供的 例子中的img標簽粘貼到頁面中，去渲染數據就行了；