element-ui之dialog对话框组件title插槽的使用

dialog对话框组件title属性的slot使用方法

使用背景

需要单独控制title中某个数据显示及样式

      <el-dialog
        // 也可以这样写,但是没有办法单独控制name age的显示
        // title="name+ '' + age"
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        // 这里的插槽会替换title显示的内容
        <div slot="title" class="header-title">
            <span v-show="name" class="title-name">name {{ name }}</span>
            <span class="title-age">age {{ age }}</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: 'freely',
        age: 20
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>