vue-preview vue圖片預覽插件+縮略圖樣式

1、安裝

npm i vue-preview -S

2、main.js中  導入組件

//vue-preview 開始
import VuePreview from 'vue-preview';

// defalut install
Vue.use(VuePreview)

//vue-preview 結束

3、代碼

一、要爲縮略圖設定樣式 ，要在全局樣式中設定，以下：

/*圖片預覽 縮略圖*/
.preview figure {
  float: left;
  width: 30%;
  height:calc(30vw - 0px);
  margin: 1.5%;
}

.preview figure img {
  width: 100%;
}

二、組件代碼：

<template>
  <div>

      <!--預覽-->
      <vue-preview :slides="setPreview()" class="preview"></vue-preview>

  </div>
</template>

<script>

  export default {
      created () {
        let  pid = this.$route.params.id;
        //發送請求
        this.$axios.get('https://www.apiopen.top/satinGodApi?type=3&page=' + pid)
          .then(res=>{
              this.details = res.data.data;
          })
          .catch(console.log)
      },
      data () {
          return {
              details:[],
          }
      },
      methods:{
        setPreview:function () {
          //給預覽圖設置參數
          this.details.forEach( img => {
            img.src = img.header;
            img.msrc = img.header;
            img.alt = img.top_commentsName;
            img.title = img.top_commentsName;
            img.w = 200;//這是大圖的寬
            img.h = 200;
          } )
          return this.details;
        }
      }
  }

</script>

<style scoped>
/*這裏的樣式沒法控制縮略圖*/
</style>

4、效果
一、縮略圖

二、預覽圖