Element+Dialog 使用插槽自定义弹窗标题

前提：我想给 Element 的弹窗标题动态字段加个样式。官网给出了插槽，但只有 footer 插槽的例子，于是在此做个记录。

https://element.eleme.cn/2.15/#/zh-CN/component/dialog

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
  <!-- 自定义title -->
  <div slot="title" class="header-title">
    <span class="title-text"><span style="color: red">{{ title }}</span> - 标题</span>
    <span class="title-close" @click="dialogVisible = false"></span>
  </div>
  
  <!-- 弹窗内容 -->
  <span>这是一段信息</span>

  <!-- 自定义footer -->
  <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,
        title: "自定义"
      };
    },
    methods: {
    }
  };
</script>

<style scoped lang="scss">
.header-title {
  font-size: 18px;
  line-height: 24px;
  color: #303133;

  .title-text {}
  .title-close {}
}
.dialog-footer {}
</style>