vue-directive-image-previewer ：vue插件进行图片放大

1.安装

npm install vue-directive-image-previewer -D
           

2.main.js配置

Vue.use(VueDirectiveImagePreviewer, {
  background: {     // or : background: '#000'
    color: '#000' // or rgba or rgb     // or image: 'url(xxx)'
  },
  // transition
  animate: {
    duration: 600,
    delay: 500
  },
  // loading (not supported)
  loading: {
    image: ''
  },
  // cursor(css)
  cursor: 'pointer',
  clickMethod: 'doubleClick'   // click or doubleClick(not supported)
})
           

3.使用（三种）

<img v-image-preview src="some-pic-url"/>

<img v-image-preview="some-pic-url or another-pic-url" src="some-pic-url"/>

<img v-image-preview="{src: 'some-pic-url or another-pic-url'}" src="some-pic-url"/>
           

4.demo

http://demo.image-previewer.anymelon.com（GitHub）

注：如项目使用z-index的css属性，可能无法显示。设置zIndex即可解决