vue中使用vue-picture-preview 圖檔檢視器

在vue 中引入vue-picture-preview 實作圖檔點選檢視的功能

本想貼demo的效果視訊，找來找去沒看到怎麼貼視訊，囧~ 現在貼圖吧

一.頁面的整體效果

二、點選第一張圖檔的效果

三、點選第二張圖檔的效果

貼完發現圖檔有點大，懶得去處理了，就醬吧，廢話不說上代碼。

1.安裝依賴

cnpm install --save-picture-preview
           

2.在main.js中引入vue-picture-preview

import vuePicturePreview from 'vue-picture-preview'  //引入圖檔檢視器
           

3.在main.js中調用

Vue.use(vuePicturePreview);
           

4.在根元件中放置

<lg-preview></lg-preview>
           

啰嗦幾句，一定是根元件中！！！我一開始放錯地方了，一直沒法預覽，一不小心進坑了！

我的項目根元件是App.vue，html代碼如下

<template>
  <div id="app">
     <router-view></router-view>
     <lg-preview></lg-preview>
  </div>
</template>
           

配置完了，就可以在頁面中正常使用了

1.HTML部分

<template>
  <div class="img_box"  >
    <p>圖檔檢視器vue-picture-preview</p>
    <ul>
      <li  v-for="(img,index) in items">
          <img v-preview="img.img_url" :src="img.img_url"  :alt="img.title"
           preview-title-enable="true"
           preview-nav-enable="true"  v-bind:style="{width:img_w}">  
        <p>{{img.title}}</p>
      </li>
    </ul>
  </div>   
</template>
           

2.JS部分

<script type="text/javascript">
  export default{
    data(){
      return{ 
        img_w:((((window.screen.width)/33.333)*0.94)*0.5)+'rem',
        title:"圖檔檢視器demo"  ,
        items:[
              {
                title:"圖檔1",
                img_url:require("../../assets/images/img_1.jpg"),
              },
              {
                title:"圖檔2",
                img_url:require("../../assets/images/img_2.jpg"),
              },
              {
                title:"圖檔3",
                img_url:require("../../assets/images/img_3.jpg"),
              },
              {
                title:"圖檔4",
                img_url:require("../../assets/images/img_04.jpg"),
              },
        ],  
      }
    },
    mounted:function(){
    },
    methods:{
    },
    props:{
    },
  }
</script>
           

3.CSS部分

<style type="text/css">
.img_box{
  width: 100%;
  overflow: auto 
}
.img_box p:first-child{
  line-height: 2rem;
  font-size: 0.6rem;
  text-align: center;
}
.img_box ul{
  width: 100%;
}
.img_box li{
    list-style: none;
    margin-left: 2%;
    overflow: hidden;
    float: left;
}
li p{
  line-height: 1rem;
  font-size:0.5rem;
  text-align: center;
}
</style>
           

結束，如有問題歡迎指正！還有用到的美圖來源見水印。