基於VUE實現點擊圖片放大

使用vue一個組件vue-directive-image-previewer

A Vue.js project for tag img, click img to zoom out to full screen.

安裝vue-directive-image-previewer

命令行引入組件

 

npm install vue-directive-image-previewer -D

main.js添加引用

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer) 

最后可以直接在標簽內使用

<template>
  <div>
      <img v-image-preview src="picture-url"/>
  </div>
</template>