el-dialog对话框组件title插槽的使用

需求dialog对话框组件title属性的slot使用方法,需要单独控制title中某个数据显示及样式

解决方案如下:

 <el-dialog  :visible.sync="dialogVisible" >
    // 这里的插槽会替换title显示的内容 - 重点
    <div slot="title" class="header-title">
       <span  class="name">{{ name }}</span>
    </div>
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        name: 'XXX',
      };
    },
  };