vue圖片預覽

安裝vue-preview組件

npm i vue-preview -S

main.js文件：

import VuePreview from 'vue-preview';
Vue.use(VuePreview); // 內部會原型 Vue.component('vue-preview', {})

vue文件：

//html部分
<vue-preview :slides="imgData" @close="handleClose"></vue-preview>

//js部分
data() {
    return {
        imgData: [
        {
          id: 1,
          src: 'static/img/001.jpg',
          msrc: 'static/img/001.jpg',
          w: 600,
          h: 400
        },
        {
          id: 2,
          src: 'static/img/002.jpg',
          msrc: 'static/img/002.jpg',
          w: 600,
          h: 400
        },
        {
          id: 3,
          src: 'static/img/003.jpg',
          msrc: 'static/img/003.jpg',
          w: 600,
          h: 400
        },
        {
          id: 4,
          src: 'static/img/004.jpg',
          msrc: 'static/img/004.jpg',
          w: 600,
          h: 400
        },
      ]
    }
}