VueJs + Element UI : 如何自定义 el-dialog 标题？

Question

我使用 el-icon 创建了一个带有自定义 el-dialog 标题的对话框，但 el-icon 没有出现。如何让图标出现？

这是我的代码

<el-dialog :title="titleData" :visible.sync="dialogVisible" width="30%">
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

methods: {
  setTitle() {
  this.titleData = '<el-icon-info></el-icon-info>' + 'Info'
}

这是我的fiddle：https://jsfiddle.net/dede402/y93kvew5/6/

Answer 1

只需使用 el-dialog 组件上可用的插槽 title。这是您的 fiddle 更新后的有效解决方案：https://jsfiddle.net/budgw/y93kvew5/10/

Answer 2

插槽

—:对话框内容

title：对话框标题的内容

footer：对话框页脚的内容

<el-dialog :visible.sync="dialogVisible" width="30%">
  <span slot="title"><el-icon-info></el-icon-info>Info</span>
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

VueJs + Element UI : 如何自定义 el-dialog 标题？

VueJs + Element UI : How to custom el-dialog title?

modal-dialog

vuejs2

element-ui

插槽