vue.js - 带有 HTML 消息的 Vue ElementUI MessageBox？

Question

我正在尝试在我的 Vue 应用程序中使用 ElementUI 的 MessageBox 来显示动态 HTML 内容。内容来自作为 HTML 字符串的 JSON 数据，本质上需要将其解析为 HTML。通常，您可以使用指令 v-html 执行此操作，但 MessageBox 组件没有这样明显的选项。

显然，您可以在消息中呈现 HTML，但您必须使用 VNode 方法(？)。我看到的示例展示了如何执行此操作如果您在脚本中编写 HTML，但是当我从 JSON 数据中将预格式化的 HTML 作为字符串提取时，我不知道看看我如何利用它来发挥我的优势。

我可能只需要切换到另一个模态组件，但由于我已经在使用多个 ElementUI 组件，所以我宁愿将它们全部保留在同一系统中。

这是我的脚本:

<template>
    <div>
        <el-button
            v-if="body"
            type="text"
            @click="openModal"
        >More Info
        </el-button>
    </div>
</template>

<script>
export default {

    methods: {
        openModal() {
            const h = this.$createElement;

            this.$msgbox( {
                title: this.title,
                message: this.body,
                confirmButtonText: 'OK',
                closeOnClickModal: true,
                showCancelButton: false
            } );
        }
    },
    props: {
        body: String, // The MessageBox message
        title: String // The MessageBox title
    }
}
</script>

Answer 1

一个潜在的解决方案是将 HTML 编译成渲染函数并将其传递给 Vue 的 createElement。

message: this.$createElement(Vue.compile(this.body))

这里是 an example基于文档。