vue中渲染html，并对里面的图片进行放大缩小各种操作

第一步：下载插件

安装：

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>

效果