vue实现点击预览

实现点击预览功能

在Vue中实现点击预览功能通常涉及模态框、图片预览或文件预览等场景。以下是几种常见实现方式：

图片点击预览

使用第三方库如viewer.js或vue-photo-preview可以快速实现图片点击放大预览：

<template>
  <div>
    <img 
      v-for="(img, index) in images" 
      :src="img" 
      @click="previewImage(index)"
      class="preview-img"
    >
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg'
      ],
      viewer: null
    }
  },
  methods: {
    previewImage(index) {
      this.viewer = new Viewer(document.querySelectorAll('.preview-img')[index], {
        inline: false,
        toolbar: true
      })
    }
  }
}
</script>

文件预览

对于PDF等文件预览，可以使用pdf.js或vue-pdf库：

<template>
  <div>
    <button @click="previewPDF">预览PDF</button>
    <div v-if="showPDF">
      <pdf :src="pdfUrl" style="width: 100%"></pdf>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: 'document.pdf',
      showPDF: false
    }
  },
  methods: {
    previewPDF() {
      this.showPDF = true
    }
  }
}
</script>

自定义模态框预览

创建可复用的预览组件：

<!-- PreviewModal.vue -->
<template>
  <div class="modal" v-if="visible" @click.self="close">
    <div class="modal-content">
      <img :src="src" v-if="isImage">
      <iframe :src="src" v-else></iframe>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    src: String,
    isImage: Boolean
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  max-width: 80%;
  max-height: 80%;
}
</style>

使用Element UI等UI库

如果项目使用Element UI，可以直接使用其Dialog组件：

<template>
  <div>
    <el-button @click="dialogVisible = true">点击预览</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="imageUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      imageUrl: 'preview-image.jpg'
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，第三方库通常提供更丰富的功能，而自定义组件则更灵活可控。