Question

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

显然，您可以在邮件中呈现HTML，但您必须使用VNode方法（？）。我看到的示例显示如何执行此操作如果您在脚本中编写HTML，但是因为我将预先格式化的HTML作为字符串从JSON数据中提取出来我不知道怎样才能利用这个优势。

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

带有HTML消息的Vue ElementUI MessageBox？

1 个答案: