弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?

一、场景

• 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
• 问题：后端返回了展示的HTML里有一个按钮，希望点击这个按钮时可以关闭弹窗。如下图的交叉按钮：

二、解决方案

• 考虑到需求的历史背景，以及后续的可维护性。决定在后端返回的HTML里，给期望关闭弹窗的按钮添加上ID。
• 而在前端项目里，弹窗加载完成并且接口已经返回数据后，我们可以通过ID获取到用于关闭弹窗的按钮元素，然后给这个按钮添加一个点击事件监听器。当用户点击该元素时，会触发关闭弹窗的函数。

三、代码演示

Step1. 前端项目里存放着弹窗，弹窗里的内容通过读取接口返回的 html 赋值给content，然后通过v-html 呈现。将关闭弹窗的函数写在此处，下面仅展示一些核心的实现代码（Vue3+Vuetify）：

<template>
  <v-dialog
    v-model="visible"
  >
    <v-card >
      <div v-html="content">
      </div>
    </v-card>
  </v-dialog>
</template>

handleClose() {
   
  this.visible = fa