一、新建组件
新建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 = false
callback(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 true
FormEl.validate(async (valid) => {
if (valid) {
let ret = await $addRole(ruleForm.value)
if (ret.code == 200) {
ElMessage.success(ret.msg)
resetForm()
loading.value = false
dialog.value = false
emit('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 = false
done()
}
})
.catch(() => {
dialog.value = false
ElMessage.error('用户取消提交')
ruleForm.value = {
roleId: null,
roleName: ''
}
// catch error
})
}
// 关闭抽屉
const cancelForm = () => {
loading.value = false
dialog.value = false
resetForm()
// 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()
}
}
结果就是这样，当添加角色后，页面会发生对应的变化
