将添加功能的抽屉剥离,在父组件调用思路

2024-09-08 05:20

本文主要是介绍将添加功能的抽屉剥离,在父组件调用思路,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、新建组件

新建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()}}

在这里插入图片描述

结果就是这样,当添加角色后,页面会发生对应的变化
在这里插入图片描述

这篇关于将添加功能的抽屉剥离,在父组件调用思路的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147225

相关文章

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》:本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

SpringCloud之LoadBalancer负载均衡服务调用过程

《SpringCloud之LoadBalancer负载均衡服务调用过程》:本文主要介绍SpringCloud之LoadBalancer负载均衡服务调用过程,具有很好的参考价值,希望对大家有所帮助,... 目录前言一、LoadBalancer是什么?二、使用步骤1、启动consul2、客户端加入依赖3、以服务

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Python实现自动化表单填写功能

《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码

MySQL中闪回功能的方案讨论及实现

《MySQL中闪回功能的方案讨论及实现》Oracle有一个闪回(flashback)功能,能够用户恢复误操作的数据,这篇文章主要来和大家讨论一下MySQL中支持闪回功能的方案,有需要的可以了解下... 目录1、 闪回的目标2、 无米无炊一3、 无米无炊二4、 演示5、小结oracle有一个闪回(flashb

MySQL使用binlog2sql工具实现在线恢复数据功能

《MySQL使用binlog2sql工具实现在线恢复数据功能》binlog2sql是大众点评开源的一款用于解析MySQLbinlog的工具,根据不同选项,可以得到原始SQL、回滚SQL等,下面我们就来... 目录背景目标步骤准备工作恢复数据结果验证结论背景生产数据库执行 SQL 脚本,一般会经过正规的审批