当前位置: 首页 > news >正文

vue 封装一个Dialog组件

基于element-plus封装一个Dialog组件

<template><section class="dialog-wrap"><el-dialog :title="title" v-model="visible" :close-on-click-modal="false"><section class="content-wrap"><Form :propList="props.propList" ref="editForm"@close="cancel"></Form></section><template #footer><MyButton @click="cancel">取消</MyButton><MyButton type="primary" @click="confirm">确定</MyButton></template></el-dialog></section>
</template><script setup>
import { ref, reactive, toRefs, watch, inject } from 'vue'
import MyButton from '@/components/MyButton.vue';
import Form from '@/components/Form.vue'const visible = ref(false)const { title } = inject('formObj')const propList = ref([{id: 1,type: 'input',label: '姓名',prop: 'name',width: '100%',placeholder: '请输入姓名',disabled: false,show: true,},{id: 2,type: 'input',label: '用户名',prop: 'username',width: '100%',placeholder: '请输入用户名',disabled: false,show: true,},{id: 3,type: 'input',label: '联系电话',prop: 'phone',width: '100%',placeholder: '请输入联系电话',disabled: false,show: true,},{id: 4,type: 'input',label: '网址',prop: 'website',width: '100%',placeholder: '请输入网址',disabled: true,show: true,},{id: 5,type: 'input',label: '邮箱',prop: 'email',width: '100%',placeholder: '请输入邮箱地址',disabled: false,show: true,}])const props = defineProps({propList: {type: Array,default: []}// formData: {//     type: Object,//     default: () => { }// },// title: {//     type: String,//     default: '',//     required: true// }
})const editForm = ref()watch([() => props.formData, () => props.title], ([newFormData, newTitle]) => {// if (props.title === '编辑') {//     formData.value = newFormData// }
})// const data = reactive({
//     formData: {
//         name: '',
//         username: '',
//         phone: '',
//         website: '',
//         email: ''
//     }
// })const cancel = () => {visible.value = falseeditForm.value.resetForm()
}// 提交表单
const confirm = async () => {editForm.value.formValidate()
}const openDialog = () => {visible.value = true
}// const { formData } = toRefs(data)defineExpose({openDialog
})</script>
<style lang="scss" scoped>
.dialog-wrap {padding: 5px;.content-wrap {margin: 5px;}.footer {margin: 5px;}
}
</style>

相关文章:

vue 封装一个Dialog组件

基于element-plus封装一个Dialog组件 <template><section class"dialog-wrap"><el-dialog :title"title" v-model"visible" :close-on-click-modal"false"><section class"content-wrap"><Form…...

外包干了2个月,技术退步明显。。。。。

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...

python科研作图

1、气泡图 气泡图是一种在xy轴上显示三个维度的数据的有效方式。在气泡图中&#xff0c;基本上&#xff0c;每个气泡代表一个数据点。横坐标和纵坐标的位置代表两个维度&#xff0c;气泡的大小则代表第三个维度。 在这个例子中&#xff0c;我们用numpy库生成了一些随机数据&a…...

视锥体裁剪射线的算法

射线Ray(直线情况)需要满足的条件: 在视野中显示的粗细均匀,需要分段绘制,每段的粗细根据到视野的距离计算射线model的顶点尽量少以节省性能损耗要满足条件2的话需要对射线进行裁剪,只绘制射线在视锥体内的部分,因此需要计算射线被视锥体裁剪后新的起点和终点 1. 计算三角…...

程序员在线周刊(投稿篇)

嗨&#xff0c;大家好&#xff01;作为一名程序员&#xff0c;并且是一名互联网文章作者&#xff0c;我非常激动地向大家宣布&#xff0c;我们计划推出一份在线周刊&#xff0c;专门为程序员们提供有趣、实用的文章和资讯。而现在&#xff0c;我们正在征集投稿&#xff01; 是…...

uniapp——实现聊天室功能——技能提升

这里写目录标题 效果图聊天室功能代码——html部分代码——js部分代码——其他部分 首先声明一点&#xff1a;下面的内容是从一个uniapp的程序中摘录的&#xff0c;并非本人所写&#xff0c;先做记录&#xff0c;以免后续遇到相似需求抓耳挠腮。 效果图 聊天室功能 发送图片 …...

脚本:用python实现五子棋

文章目录 1. 语言2. 效果3. 脚本4. 解读5. FutureReference 1. 语言 Python 无环境配置、无库安装。 2. 效果 以第一回合为例 玩家X 玩家0 3. 脚本 class GomokuGame:def __init__(self, board_size15):self.board_size board_sizeself.board [[ for _ in range(board_…...

Java-华为真题-预定酒店

需求&#xff1a; 放暑假了&#xff0c;小王决定到某旅游景点游玩&#xff0c;他在网上搜索到了各种价位的酒店&#xff08;长度为n的数组A&#xff09;&#xff0c;他的心理价位是x元&#xff0c;请帮他筛选出k个最接近x元的酒店&#xff08;n>k>0&#xff09;&#xff…...

win10 自带虚拟机软件 虚拟CentOS系统

win10 下使用需要虚拟一个系统&#xff0c;不需要额外安装VMware、Virtual box等软件。使用win10 自带虚拟机软件即可 步骤1 确保启动Hyper-V 功能启用 控制面板 -> 程序 -> 启用或关闭Windows功能 步骤 2 创建虚拟机 2.1 打开Typer-V 2.2 创建虚拟机 2.2.1 操作 -&g…...

【深度学习】 Python 和 NumPy 系列教程(十):NumPy详解:2、数组操作(索引和切片、形状操作、转置操作、拼接操作)

目录 一、前言 二、实验环境 三、NumPy 0、多维数组对象&#xff08;ndarray&#xff09; 1. 多维数组的属性 1、创建数组 2、数组操作 1. 索引和切片 a. 索引 b. 切片 2. 形状操作 a. 获取数组形状 b. 改变数组形状 c. 展平数组 3. 转置操作 a. 使用.T属性 b…...

3D视觉测量:复现Gocator的间隙面差

文章目录 0. 测试效果1. Gocator实现基本内容1.1 实现步骤1.2 参数说明 2. 未作 or TODO3. 开发说明 目标&#xff1a;使用C PCL复现Gocator中的间隙面差前置说明&#xff1a;因为没有拿到Gocator中用到的原始数据&#xff0c;仅是拿到与之类似的数据&#xff0c;因此最后测试的…...

文献综述怎么写?(以利用Zotero的文献管理软件为例)

文章目录 文章内容总结前言一. 利用文献管理软件建立文献库1. 创建文献分类2. 在论文库中搜索关键词并导入到文献管理软件中以web of science 为例以 IEEE Xplore为例 二、 导出文献、阅读摘要并记录关键字三、寻找一两篇本方向的文献综述&#xff0c;分析借鉴其文章结构四、写…...

中尺度混凝土二维有限元求解——运行弯曲、运行光盘、运行比较、运行半圆形(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

Python文件存读取

Python文件存读取 想整理一下存读取函数&#xff0c;方便以后直接调用。 读取 1、读xls、csv、xlsx到dataframe 这段代码非常好用&#xff0c;这个函数直接把各种格式文件给汇总了 def readDataFile(readPath): # readPath: 数据文件的地址和文件名try:if (readPath[-4:]…...

SpringBoot整合Easy-ES实现对ES操作

请确保已有可用的ES&#xff0c;若没有&#xff0c;请移步&#xff1a;Docker安装部署ElasticSearch&#xff08;ES&#xff09; 新建SpringBoot项目 这里是用的springboot版本是2.6.0 引入依赖 <!-- 排除springboot中内置的es依赖,以防和easy-es中的依赖冲突--><…...

让NPU跑起来迅为RK3588开发板设置交叉编译器

让NPU跑起来迅为RK3588开发板设置交叉编译器 编译器下载地址是网盘资料“iTOP-3588 开发板\02_【iTOP-RK3588 开发板】开发资料 \12_NPU 使用配套资料\03_编译所需工具\Linux”。 拷贝 gcc-arm-10.3-2021.07-x86_64-aarch64-none-linux-gnu.tar.gz 到 Ubuntu 的/opt/tool_ch…...

yyyy-MM-dd‘T‘HH:mm:ssZ的T是什么意思?为什么要用单引号引着

背景 Java里的日期格式&#xff0c;通常我们看到 yyyy-MM-ddTHH:mm:ssZ 的写法是什么意思&#xff1f; 尤其这个T作为分隔符为什么左右有单引号&#xff0c;这个单引号会打印出来吗&#xff1f; 这个Z又是什么意思&#xff1f;是时区吗&#xff1f;如果是时区&#xff0c;输…...

SIT1145AQ收发器芯片CAN FD Passive功能详解(摘自官网)

芯力特在SIT1145AQ/FD版本中加入了CAN FD Passive功能&#xff0c;CAN FD Passive功能简单来说就是SIT1145AQ/FD在休眠或待机模式下屏蔽总线上的CAN FD报文。 为什么需要CAN FD Passive功能呢&#xff1f; SIT1145AQ的特定帧唤醒只支持CAN报文&#xff0c;当SIT1145AQ休眠模式…...

安卓毕业设计各种app项目,Android毕设设计,Android课程设计,毕业论文

作为一位从事软件开发多年的专业人士&#xff0c;您积累了丰富的经验和技能&#xff0c;解决了许多不同类型的问题。除了开发原创项目&#xff0c;您还愿意分享您的知识&#xff0c;指导实习生和在校生。这种乐于助人的行为对于行业的发展和新一代软件开发者的成长都起着积极的…...

c++下的ros通信(cmake的报错问题多)

1.自定义msg 这里的自定义msg和python的其实是一样的&#xff1a; 首先在src目录下 catkin_create_pkg car_interfaces rospy roscpp std_msgs message_runtime message_generation然后新建一个msg文件夹&#xff0c;然后建立相应的msg文件&#xff0c;接着就可以修改编译所需…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

Python异步编程:深入理解协程的原理与实践指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…...

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起&#xff0c;为了跨网段推流&#xff0c;千辛万苦配置好了网络参数。 但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...

更新 Docker 容器中的某一个文件

&#x1f504; 如何更新 Docker 容器中的某一个文件 以下是几种在 Docker 中更新单个文件的常用方法&#xff0c;适用于不同场景。 ✅ 方法一&#xff1a;使用 docker cp 拷贝文件到容器中&#xff08;最简单&#xff09; &#x1f9f0; 命令格式&#xff1a; docker cp <…...

unipp---HarmonyOS 应用开发实战

HarmonyOS 应用开发实战指南 1. 开篇&#xff1a;为什么选择 HarmonyOS&#xff1f; 最近在开发鸿蒙应用时&#xff0c;发现很多开发者都在问&#xff1a;为什么要选择 HarmonyOS&#xff1f;这里分享一下我的看法&#xff1a; 生态优势 华为手机用户基数大&#xff0c;市场潜…...