Vue 图片预览：使用 vue-preview 实现富文本图片预览功能

在 Vue 项目中，当您需要展示富文本内容，并且其中包含图片时，您可能需要实现图片预览功能，让用户可以方便地查看图片的细节。vue-preview 插件可以完美地解决这个问题。

安装

npm install vue-preview --save

使用

引入插件

在 main.js 中引入插件：

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

在模板中使用

在需要展示图片的地方，使用 v-for 循环渲染 img 标签，并加上 v-preview 指令：

<template>
  <div>
    <div v-for='(item, index) in imgList' :key='index'>
      <img v-preview :src='item.src' :data-src='item.src' :data-preview-src-list='previewList'/>
    </div>
  </div>
</template>

其中，imgList 是图片列表，previewList 是预览列表，data-src 是图片的真实路径。

配置

您可以在使用之前对插件进行配置：

Vue.use(VuePreview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false,
  indexIndicatorSep: ' / ',
  errorMsg: '<div class="pswp__error-msg"><a href="%url%" target="_blank">图片</a> 加载失败</div>'
})

您可以设置主题、是否显示工具栏、是否显示图片描述等。

参考文档

https://www.npmjs.com/package/vue-preview