Element Plus 弹出对话框示例 - Vue.js 代码 - 常规

<template>
  <div class='dialog-example'>
    <el-button @click='showDialog'>打开对话框</el-button>
    <el-dialog :visible.sync='dialogVisible' title='这是一个对话框' width='30%'>
      <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>
import { ElButton, ElDialog } from 'element-plus';

export default {
  components: { ElButton, ElDialog },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>
<style>
.dialog-example {
  margin: 20px;
}
</style>
<p>在这个示例中，我们使用了 Element Plus 的 'el-button' 和 'el-dialog' 组件来创建一个简单的弹出对话框。当点击按钮时，'showDialog' 方法会将 'dialogVisible' 数据属性设置为 'true'，从而显示对话框。对话框包含一个标题、一些内容和两个按钮（取消和确定），这些都是使用 'el-dialog' 组件的属性和插槽来设置的。'dialogVisible' 数据属性也通过 '.sync' 修饰符与 'el-dialog' 组件的 'visible' 属性进行了双向绑定，这使得对话框的显示状态可以在组件内部和外部进行控制。</p>