Vue中实现 Message Box 中内容可以点击 并调用自定义组件

<template>  
  <div>  
    <h1>这是主页面</h1>  
    <a-component ref="aComponentRef" />  
    <el-button @click="showMessage">显示消息框</el-button>  
  </div>  
</template>  
  
<script>  
import AComponent from './a.vue';  
import { MessageBox } from 'element-ui';  
  
export default {  
  components: {  
    AComponent,  
    'el-message': MessageBox, // 注册el-message组件  
  },  
  methods: {  
    showMessage() {  
      // 在全局范围内定义一个处理点击事件的函数  
      window.handleLinkClick = () => {  
        this.open(); // 调用 open() 方法  
      };  
      MessageBox({  
        message: '<a href="#" onclick="handleLinkClick()">这是一个消息框</a>', // 使用原生的 onclick 事件来绑定点击事件到全局函数 handleLinkClick()  
        type: 'info', // 设置消息框类型为info  
        center: true, // 将消息框居中显示  
        showClose: true, // 显示关闭按钮  
        confirmButtonText: '确定',  
        cancelButtonText: '取消',  
        closeOnClickModal: true, // 点击模态框外部不关闭  
        callback: () => {  
          console.log('消息框被点击');  
        }, // 点击消息框触发的事件  
        dangerouslyUseHTMLString: true, // 使用HTML字符串渲染消息框内容  
      });  
    },  
    open() {  
      console.log('open()方法被触发');  
      // 在这里编写打开操作的逻辑  
      // 触发 <a-component /> 组件的方法或属性  
      // 关闭消息框的逻辑  
      MessageBox.close(); // 调用 MessageBox API 的 close 方法关闭消息框  
      this.$refs.aComponentRef.showModal(); // 假设 <a-component /> 组件有一个名为 showModal() 的方法  
    },  
  },  
};  
</script>