vue v-html 实现image标签点击放大预览

要实现这个功能，可以使用第三方的图片放大预览插件，比如 `viewer.js` 或者 `photoswipe`。这里以 `viewer.js` 为例，具体步骤如下：

1. 安装 `viewer.js` 插件：

   npm install viewerjs --save

2. 在需要使用的组件中引入 `viewer.js`：

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

3. 在模板中，使用 `v-html` 渲染包含图片标签的 HTML 代码，并为每个图片标签添加一个唯一的 `id`：

   <template>
     <div>
       <div v-html="html" ref="content"></div>
     </div>
   </template>

4. 在组件的 `mounted` 生命周期钩子中，实例化 `viewer.js` 并为每个图片标签绑定点击事件：

   mounted() {
     const viewer = new Viewer(this.$refs.content, {
       hidden: () => {
         viewer.destroy()
       }
     })
     const imgs = this.$refs.content.querySelectorAll('img')
     for (let i = 0; i < imgs.length; i++) {
       imgs[i].setAttribute('id', `img-${i}`)
       imgs[i].addEventListener('click', () => {
         viewer.view(`#img-${i}`)
       })
     }
   }

在这里，`hidden` 方法是在图片放大预览窗口关闭时调用的一个回调函数，用于销毁 `viewer.js` 实例。

5. 最后，在组件的 `data` 中定义要渲染的 HTML 代码：

   data() {
     return {
       html: '<p>这是一段包含图片的 HTML 代码:</p><img src="https://example.com/image1.jpg"><img src="https://example.com/image2.jpg">'
     }
   }

这样，当用户点击图片标签时，就可以实现图片的放大预览功能了。