带有 HTML 消息的 Vue ElementUI MessageBox？答案

【问题标题】：Vue ElementUI MessageBox with HTML Message?带有 HTML 消息的 Vue ElementUI MessageBox？
【发布时间】：2017-07-07 14:53:11
【问题描述】：

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

显然，您可以在消息中呈现 HTML，但您必须使用 VNode 方法（？）。我见过的例子展示了如何做到这一点'不知道如何利用它来发挥我的优势。

我可能只需要切换到另一个模态组件，但由于我已经使用了几个 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>

【问题讨论】：

我不明白你所说的“它必须被解析成 HTML”是什么意思。您是从服务器接收到要显示在消息框中的 HTML 片段，还是从需要构建 HTML 的数据接收？
我收到了一个 HTML 格式的字符串（例如<p>Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit. <a href="http://www.google.com">Eligendi, quia</a>.</p>）。如果我将它传递给选项中的 MessageBox 组件，它只会显示为原始文本，而不是格式化的 HTML。这有助于澄清吗？
是的。它会在其中包含 Vue 还是只是普通的 HTML？
不，它将是静态（原版）HTML。

标签： vue.js html-parsing

【解决方案1】：

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

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

这里是基于文档的an example。

【讨论】：

好东西！我不得不将它添加到我的 Webpack 配置中，但它有效！谢谢！ resolve: { alias: { 'vue$': 'vue/dist/vue' } }