在vue項目中使用v-viewer,圖片方法，旋轉，縮小等操作

第一步、安裝

npm install v-viewer --save

第二步、在項目中引用

 

//    在main.js中全局引用
import Viewer from "v-viewer"// 圖片預覽
import "viewerjs/dist/viewer.css"// 圖片預覽




Vue.use(Viewer)

Viewer.setDefaults({
 defaultOptions: {
    zIndex: 9999
  },
  Options: {
    "inline": true,
    "button": true,
    "navbar": true,
    "title": true,
    "toolbar": true,
    "tooltip": true,
    "movable": true,
    "zoomable": true,
    "rotatable": true,
    "scalable": true,
    "transition": true,
    "fullscreen": true,
    "keyboard": true,
    "url": "data-source"
  }
})

第三步、在組件中使用

            <viewer>
              <template v-for="(item,index) in scope.row.img">
                <img class="table-image"
                     :key="index"
                     :src="item"
                     title="點擊可預覽全部圖片">
              </template>
            </viewer>

這樣就可以了