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即可解决
