Vue2 Element-UI el-dialog 弹窗标题设置 - 代码示例

el-dialog 是 element-ui 中的组件，用于实现弹窗功能。在 Vue2 中使用 el-dialog 弹窗时，可以通过设置 title 属性来设置弹窗的标题，示例代码如下：

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <span>这是弹窗内容</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '弹窗标题',
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

在上面的代码中，el-dialog 的 title 属性绑定了 data 中的 dialogTitle 变量，在弹窗打开时，弹窗标题就会显示为'弹窗标题'。当然，你也可以在打开弹窗时通过传参的方式来设置弹窗标题，示例代码如下：

<template>
  <div>
    <el-button @click="openDialog('新的弹窗标题')">打开弹窗</el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <span>这是弹窗内容</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '弹窗标题',
    };
  },
  methods: {
    openDialog(title) {
      this.dialogTitle = title;
      this.dialogVisible = true;
    },
  },
};
</script>

上面的代码中，我们在 openDialog 方法中接收一个参数 title，然后将其赋值给 dialogTitle 变量，这样在弹窗打开时，弹窗标题就会显示为传入的 title 值。