vue dialog

<template>
  <div>
    <!-- 触发对话框的按钮 -->
    <button @click="dialogVisible = true">打开对话框</button>

    <!-- 对话框组件 -->
    <el-dialog :visible.sync="dialogVisible" title="提示">
      <p>这是一段信息。</p>
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制对话框显示/隐藏的变量
      dialogVisible: false
    };
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个按钮，点击后会触发对话框的显示。
   • 使用了 el-dialog 组件来创建对话框。el-dialog 是 Element UI 提供的一个对话框组件。
   • :visible.sync="dialogVisible" 绑定了对话框的显示状态到 dialogVisible 数据属性上，这样可以通过改变 dialogVisible 的值来控制对话框的显示和隐藏。

2. 脚本部分 (<script>):

   • 在 data() 中定义了一个 dialogVisible 属性，默认为 false，表示对话框初始状态下是隐藏的。
   • 当用户点击按钮时，dialogVisible 被设置为 true，从而显示对话框；当用户点击对话框中的“取消”或“确定”按钮时，dialogVisible 被设置为 false，从而隐藏对话框。

3. 样式部分 (<style scoped>):

   • 这里可以添加自定义样式，但在这个示例中没有具体样式，可以根据需要进行扩展。

这个示例展示了如何使用 Vue 和 Element UI 来创建一个简单的对话框，并通过数据绑定和事件处理来控制对话框的显示和隐藏。