elementplus-vue-审核按钮-对话框（Dialog ）

在Vue中使用Element Plus创建一个带有审核按钮和对话框的组件可以通过以下步骤实现：

1. 安装Element Plus：

npm install element-plus --save

2. 在Vue组件中引入所需组件：

<template>
  <el-button @click="auditDialogVisible = true">审核</el-button>
  <el-dialog
    title="审核"
    :visible.sync="auditDialogVisible"
    width="30%"
  >
    <!-- 审核内容 -->
    <span>请进行审核操作</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="auditDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitAudit">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
 
export default {
  components: {
    ElButton,
    ElDialog
  },
  setup() {
    const auditDialogVisible = ref(false);
 
    const submitAudit = () => {
      // 执行审核操作
      console.log('审核操作执行');
      auditDialogVisible.value = false;
    };
 
    return { auditDialogVisible, submitAudit };
  }
};
</script>

在这个例子中，我们定义了一个简单的Vue组件，其中包含了一个审核按钮和一个对话框。当用户点击审核按钮时，对话框变为可见。在对话框中，用户可以执行审核操作，当点击确定按钮时，会触发submitAudit方法。这个方法会模拟执行审核操作，并在操作完成后关闭对话框。