vue3使用element dialog弹窗组件

vue3使用dialog弹窗组件

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 测试弹窗
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
              <el-button type="primary" @click="add">点击</el-button>
              <!-- 编辑弹出框 -->
              <el-dialog title="个人信息" v-model="editVisible" width="35%">
                    <el-form label-width="100px" ref="formData" :rules="rules" :model="dialogForm">
                         <el-form-item label="用户名" prop="name" clearable>
                               <el-input v-model="dialogForm.name"></el-input>
                         </el-form-item>
                         <el-form-item label="年龄" prop="age" clearable>
                               <el-input v-model="dialogForm.name"></el-input>
                         </el-form-item>
                         <el-form-item label="地址" prop="address" clearable>
                               <el-input v-model="dialogForm.address"></el-input>
                         </el-form-item>
                    </el-form>
                    <template #footer>
                         <span class="dialog-footer">
                               <el-button @click="cancel">取 消</el-button>
                               <el-button type="primary" @click="affirm">确 定</el-button>
                         </span>
                    </template>
          </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
    name: "dialog",
    setup() {
        const rules = {
            name: [
                { required: true, message: "请输入名称", trigger: "blur" },
                { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
            ],
            age: [
                { required: true, message: "请输入年龄", trigger: "blur" },
                { min: 3, max: 5, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            address: [
                { required: true, message: "请输入地址", trigger: "blur" },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
        };
        // 删除操作
        const handleDelete = () => {
            // 二次确认删除
            ElMessageBox.confirm("确定要新增吗？", "提示", {
                type: "warning",
            })
                .then(() => {
                    ElMessage.success("新增成功");
                })
                .catch(() => {});
        };
        // 表格编辑时弹窗和保存
        const editVisible = ref(false);
        const formData = ref(null);
        let dialogForm = reactive({
            name: "",
            age: "",
            address: "",
        });
        const add=()=>{
                ElMessageBox.confirm("确定要新增吗？", "提示", {
                     type: "warning",
                })
                .then(() => {
                    editVisible.value=true
                })
                .catch(() => {
                    ElMessage.success("取消成功");
                });
        };
        const cancel = () => {
            editVisible.value = false;
            ElMessage.success(`取消成功！`);
        };
        const affirm = () => {
               // 表单校验
               formData.value.validate((valid) => {
                   if (valid) {
                       editVisible.value = false;
                       ElMessage.success("提交成功！");
                   } else {
                      return false;
                   }
               });
        };

        return {
            editVisible,
            dialogForm,
            formData,
            rules,
            handleDelete,
            affirm,
            add,
            cancel

        };
    },
};
</script>

<style scoped>
</style>