2025年富文本图片（富文本图片点击放大）

科技前沿 • 2025-06-16 19:41 • 阅读 21

大家好，我是讯享网，很高兴认识大家。

要实现在点击富文本中的图片时进行放大效果，可以使用以下方法：

在富文本中插入 el-image 组件，设置好图片的路径和大小等属性。
在 el-image 组件上绑定 click 事件，当用户点击图片时触发该事件。
在 click 事件中，使用 Element UI 的 Dialog 组件创建一个弹窗，将 el-image 组件放入其中。

讯享网
在弹窗中设置 el-image 组件的宽度和高度为 100%，使其铺满整个弹窗。
在弹窗中添加关闭按钮，点击该按钮时关闭弹窗。

以下是示例代码：

&lt;template&gt;
  &lt;div&gt;
    &lt;div v-html=&quot;richText&quot; @click=&quot;handleClick&quot;&gt;&lt;/div&gt;
    &lt;el-dialog :visible.sync=&quot;dialogVisible&quot; width=&quot;80%&quot;&gt;
      &lt;el-image :src=&quot;currentImageUrl&quot; style=&quot;width: 100%; height: 100%&quot;&gt;&lt;/el-image&gt;
      &lt;span slot=&quot;footer&quot; class=&quot;dialog-footer&quot;&gt;
        &lt;el-button @click=&quot;dialogVisible = false&quot;&gt;关闭&lt;/el-button&gt;
      &lt;/span&gt;
    &lt;/el-dialog&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      richText: &#39;&lt;p&gt;这里是<em>富文本</em>内容&lt;img src=https://blog.csdn.net/KOOK007/article/details/&quot;https://example.com/image.jpg&quot;&gt;&lt;/p&gt;&#39;,
      dialogVisible: false,
      currentImageUrl: &#39;&#39;
    }
  },
  methods: {
    handleClick(event) {
      const target = event.target
      if (target.tagName === &#39;IMG&#39;) {
        this.dialogVisible = true
        this.currentImageUrl = target.src
      }
    }
  }
}
&lt;/script&gt;

讯享网

在上面的代码中，我们首先在富文本中插入了一个 el-image 组件，然后在其上绑定了 click 事件。当用户点击图片时，我们将弹出一个 Dialog 组件，其中包含了一个 el-image 组件，并将该图片的路径传递给了 el-image 组件。此外，我们还在 Dialog 组件中添加了一个关闭按钮，点击该按钮时可以关闭弹窗。

2025年富文本 图片（富文本图片点击放大）

相关推荐

2025年富文本图片（富文本图片点击放大）