preview-pictrue

支持直接点击就可以对图片的预览支持放大缩小旋转等功能，对富文本解析出来的图片也都是可以支持， 不需要包裹组件使用，直接通过js操作，非常的便捷灵活

Getting Started

To begin, you'll need to install css-loader:

npm i preview-pictrue -S

Usage

vue main.js

import previewPictrue from 'preview-pictrue'
import 'preview-pictrue/styles/index.css'
Vue.use(previewPictrue)


<template>
  <div id="app">
    <div @click="clickPictrue">
      <img alt="Vue logo" src="./assets/logo.png" />
      <span>hhhjjj</span>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  methods: {
    clickPictrue(e) {
      console.log(e.target.tagName)
      if (e.target.tagName.toUpperCase() === 'IMG') {
        this.$previewPictrue(e.target.src)//获取到图片的src传递插件就能实现图片预览  非常的便捷灵活
      }
    }
  },
}
</script>