一、新建组件

新建AddRoleEditerDrawer.vue

<template><div><el-drawer v-model="dialog" title="添加角色" :before-close="handleClose" direction="rtl" @colse="cancelForm"class="demo-drawer" modal-class="add-drawer"><div class="drawerContent"><!-- 表单 --><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"><el-form-item prop="roleName" label="角色名：" :label-width="formLabelWidth"><el-input v-model="ruleForm.roleName" autocomplete="off" /></el-form-item><!-- 按钮 --><el-form-item :label-width="formLabelWidth"><el-button @click="cancelForm">取消</el-button><el-button type="primary" :loading="loading" @click="submitFom(ruleFormRef)">{{ loading ? '提交中 ...' : '提交' }}</el-button></el-form-item></el-form></div></el-drawer></div></template>

1. 这里定义了抽屉的dialog，这个变量是控制抽屉打开和关闭的。
2. 定义了:before-close，这个参数控制抽屉关闭前的动作，一般是用来清空表单
3. 定义了@close，这个参数，在关闭时进行一些操作
4. 其他的是表单内容，可以自定义修改

二、添加ts

<script setup lang="ts">import { reactive, ref } from 'vue'import { ElDrawer, ElMessage, ElMessageBox } from 'element-plus'import type { FormInstance, FormRules } from 'element-plus';import { $updateRole, $addRole } from '../../api/role.ts'import { useRoute } from 'vue-router';const formLabelWidth = '80px'const route = useRoute()const ruleFormRef = ref<FormInstance>()const ruleForm = ref({roleId: null,roleName: ''})const dialog = ref(false)const loading = ref(false)// 控制表单规则const validRoleNames = (rule: any, value: any, callback: any) => {if (value === '') {// 清除定时器loading.value = falsecallback(new Error('角色名不能为空'))} else {callback()}}// 定义规则const rules = ref<FormRules<typeof ruleForm>>({roleName: [{ validator: validRoleNames, trigger: 'blur' }]})// 清空表单const resetForm = () => {ruleForm.value = {roleId: null,roleName: ''}}// 定义传入父组件对象，const emit = defineEmits(['success'])const submitFom = (FormEl?: FormInstance | undefined) => {loading.value = true// 提交添加角色，获取结果if (!FormEl) return trueFormEl.validate(async (valid) => {if (valid) {let ret = await $addRole(ruleForm.value)if (ret.code == 200) {ElMessage.success(ret.msg)resetForm()loading.value = falsedialog.value = falseemit('success', 'add')}else {ElMessage.error(`code: ${ret.code}  信息：${ret.msg}`)}}else {return false}})}const handleClose = (done) => {if (loading.value) {return}ElMessageBox.confirm('您想要提交再关闭吗?').then(() => {loading.value = true// 提交结果let ret = submitFom(ruleFormRef.value)if (ret) {loading.value = falsedone()}}).catch(() => {dialog.value = falseElMessage.error('用户取消提交')ruleForm.value = {roleId: null,roleName: ''}// catch error})}// 关闭抽屉const cancelForm = () => {loading.value = falsedialog.value = falseresetForm()// clearTimeout(timer)}// 打开抽屉const open = (obj: any) => {dialog.value = true}defineExpose({open})</script>

这里暴露了一个open方法，参数是obj，如果想从父组件传值过来，可以通过obj传，比如编辑表单，则需要传入对应的值，这里的obj就可以收到值，从而反应到表单中。如果不传值，就直接传个空对象即可

三、父组件设置

在合适的位置添加抽屉组件

<!-- 角色添加抽屉 --><AddRoleEdiderDrawer ref="AddRoleRef" @success="onSuccess"></AddRoleEdiderDrawer>

这里设置了两个参数，一个是ref=AddRoleRef,这个值，可以获取暴露的方法open
这个success可以同步方法处理结果，比如子组件在提交的时候传来了emit('success', 'add')，此时就可以根据这个add的类型，更新分页器组件，如果增加了新页，就可以更新当前页。1.打开抽屉操作

	// 定义子组件暴露出的方法对象const AddRoleRef = ref()// 打开抽屉const handleAdd = () => {// 传入空值，则此时子组件的obj参数是空对象，可以通过判断来采取对应的操作AddRoleRef.value.open({})}

2.处理添加页面后的分页操作

	// 处理添加和编辑后的页面刷新const onSuccess = (type:any) => {if (type === 'add') {// 调用分页器暴露出来的方法，处理当前页面变化pageRef.value.handleChange()}}

结果就是这样，当添加角色后，页面会发生对应的变化