vue-preview功能的實現

在移動端項目裏面，社區和商城是非常重要的兩個模塊，社區模塊就需要有類似朋友圈的效果展示；

最開始瞭解到了photoswipe 做了一個小圖放大圖的效果，但是效果並不理想，無法實現多張圖片左右滑動的功能，一定是自己忽略了什麼問題！！！於是尋求更好的解決方案，後瞭解到vue-prewview 實現功能；

1：webpack.base.conf.js 

{
        test: /vue-preview.src.*?js$/,
        loader: 'babel'

}

2:main.js

import 'swiper/dist/css/swiper.css'
import VuePreview from 'vue-preview'
 
// defalut install
console.log(VuePreview);

Vue.use(VuePreview)

3:組件

<vue-preview :slides="slide1" @close="handleClose" class="ass"></vue-preview>

slide1: []';

handleClose () {

        console.log('close event')
 }

4:改變樣式

<style lang="less" ></style> 

*不能加scoped   

5：裁剪功能實現多張圖片縮略圖一致

用object-fit：cover，fill,none,contain；實現