VUE图片点击预览组件

码客说

发布于 2020-05-09 14:47:02

5.5K0

发布于 2020-05-09 14:47:02

文章被收录于专栏：码客码客

图片预览组件一

安装vue-directive-image-previewer

npm install vue-directive-image-previewer --save

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>

组件的优缺点

该组件对原有样式侵入性小，使用简单，缺点是点击放大的图片不能再缩放

图片预览组件二

github地址：https://github.com/mirari/v-viewer

官方中文文档：文档网址

安装

npm install v-viewer --save

在main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

使用

<template>
	<viewer :images="images">
	   <img v-for="src in images" :src="src" :key="src" width="300">
	</viewer>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                images : []
            }
        }
    }
</script>

images 数组里的格式很简单，就是图片地址，没有多余的参数。

组件的优缺点