第一步：下载插件
安装：
npm install v-viewer
第二步：封装的vue文件
<template><div ref="richText"></div></template><script>import 'viewerjs/dist/viewer.css'import {api as viewerApi } from "v-viewer"export default {name: 'richText',data() {return {imgList: []}},methods: {previewURL(index) {//console.log('index', index)const $viewer = viewerApi({options: {toolbar: true,url: 'currentSrc',initialViewIndex: index},images: this.imgList})},},mounted() {const nodeList = (this.$refs.richText).querySelectorAll('img')nodeList.forEach((element, index) => {element.className = 'zoom'element.addEventListener('click', () => {this.previewURL(index)})})this.imgList = [...nodeList]}}</script>
第三步：页面中使用
import richText from "./components/richText.vue"components: {richText},
<richText class="content" v-html="contents"></richText>
