vue3+ts封装弹窗,分页封装

定义defaultDialog .vue

  
<script lang="ts" setup>
import { ref,toRefs,onUpdated } from 'vue'
import { ElMessageBox } from 'element-plus'
const props =defineProps({//接收参数,父组件传的时候用:msg='123'的形式msg:String,show:{type:Boolean,default:false},title: {type:String,require: '',default: '中型弹窗'},noFooter: {type:Boolean,require: false,default: false}// "diaVisible", "title", "width", "noFooter","top"
})
const emit = defineEmits<{//定义组件含有的方法,父组件用@close='closefn()'的形式监听close: [] // 具名元组语法cancel: []save: []
}>()
const close = () => {//这里是触发事件,触发父组件监听的方法emit('close')
}
const save = () =>{emit('save')
}
const cancel = (val:any) => {emit('cancel')
}
const createForm1 = ref(null)
const createForm2 = ref(null)
onUpdated(()=>{document.getElementById("div");let height1 = createForm1.value
})
</script>
<template><div class="myDialog"><el-dialogwidth="104rem"style="height: 67%;min-height: 620px;min-width: 900px;":title="props.title"v-model="props.show"v-dialogDragv-if="props.show":before-close="close"><!-- 自定义插槽 noFooter为true的时候,不显示footer的插槽--><slot name="dia_Content"></slot><divclass="dialog-footer"v-if="noFooter ? false : true"><el-button type="primary" size="large" @click="save" color="#4088FE"> 确 定 </el-button><div style="width: 4rem;"></div><el-button size="large" @click="cancel" color="rgba(132, 158, 199, 1)"> 取 消 </el-button></div></el-dialog></div>
</template><style lang="scss" scoped>
.el-form-item__content{width: 100%;
}
:deep(.el-cascader.el-tooltip__trigger.el-tooltip__trigger){width: 100% !important;
}
:deep(.el-input.el-input--prefix.el-input--suffix.el-date-editor.el-date-editor--date.el-tooltip__trigger.el-tooltip__trigger){width: 100% !important;
}
.myDialog{
color: #26315E;
}
.dialog-footer{display: flex;justify-content: center;align-items: center;
}
:deep(.el-button--large){padding: 1.6rem 4rem;font-size: 2rem;color: white;// background-color: #4088FE;
}
:deep(.el-dialog__title){font-size: 24px;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #26315E;
}
:deep(.el-dialog) {border-radius: 8px !important;}
:deep(.el-dialog__body){padding-top: 2.4rem;height: 100%;
}
:deep(.el-dialog__headerbtn) {top: 8px !important;background: url('@/assets/img/componentImg/off.png') left no-repeat;
}
:deep(.el-dialog__headerbtn i) {// content: '修改下面的font-size可以改变图片的大小';font-size: 25px;visibility: hidden;
}
// :deep(.el-form .el-form--default .el-form--label-right .el-form--inline){
//   margin: 1.8rem 0px 1.2rem !important;
// }
:deep(.el-form-item){// margin-top: 0 !important;
} 
:deep(.el-overlay){background: rgba(0,0,0,0.8);
}
:deep(.el-input__inner){height: 40px; 
}</style>

页面使用

import defaultDialog from "@/components/Dialog/defaultDialog.vue"<defaultDialog :title="EquipmentEditData.title"  @save="saveUserEdit(createFormRef)" :show="EquipmentEditData.visible" :noFooter=false @cancel="closeUserEdit"@close="closeUserEdit"><template #dia_Content></template></defaultDialog>

分页

首先创建个usePagination.ts

import { reactive } from "vue"
interface DefaultPaginationData {total: numbercurrentPage: numberpageSizes: number[]pageSize: numberlayout: string}interface PaginationData {total?: numbercurrentPage?: numberpageSizes?: number[]pageSize?: numberlayout?: string}export function usePagination(initialPaginationData: PaginationData = {}) {/** 默认的分页参数 */const defaultPaginationData: DefaultPaginationData = {total: 0,currentPage: 1,pageSizes: [10, 20, 50],pageSize: 18,layout: "prev, pager, next, jumper, total, sizes"}/** 合并分页参数 */const paginationData = reactive({ ...defaultPaginationData, ...initialPaginationData })/** 改变当前页码 */const handleCurrentChange = (value: number) => {paginationData.currentPage = value}/** 改变页面大小 */const handleSizeChange = (value: number) => {paginationData.pageSize = value}return { paginationData, handleCurrentChange, handleSizeChange }
}

使用页面

import { usePagination } from "@/hooks/usePagination"const { paginationData, handleCurrentChange, handleSizeChange } = usePagination({ pageSize: 15, pageSizes: [15, 30, 50], layout: "prev, pager, next, jumper, total, sizes" })```
//下面是监听页面变化然后触发查询
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
//下面是页面使用<el-pagination background :layout="paginationData.layout" :page-sizes="paginationData.pageSizes":total="paginationData.total" :page-size="paginationData.pageSize":currentPage="paginationData.currentPage" @size-change="handleSizeChange"@current-change="handleCurrentChange" />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60322.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cesium Entity、dataSource添加与删除

Cesium Entity、dataSource添加与删除 一、Entity1. 添加实体2. 获取实体3. 删除实体 二、dataSource1. 添加数据源&#xff1a;2. 删除数据源 一、Entity 在Cesium中&#xff0c;要添加和删除实体和数据源可以使用以下代码&#xff1a; 1. 添加实体 var entity viewer.ent…

c++ qt--线程(一)(第八部分)

c qt–线程&#xff08;一&#xff09;&#xff08;第八部分&#xff09; 一.进程&#xff08;Process&#xff09; 在任务管理器中的进程页下&#xff0c;可以看到进程&#xff0c;任务管理器将进程分为了三类&#xff0c;应用、后台进程、window进程 应用&#xff1a; 打开…

针对java中list.parallelStream()的多线程数据安全问题我们采用什么方法最好呢?

当使用List.parallelStream()方法进行多线程处理时&#xff0c;可能会涉及到数据安全问题。下面是一些常见的方法来处理parallelStream()的多线程数据安全问题&#xff1a; 1. 使用线程安全的集合&#xff1a;Java中提供了线程安全的集合类&#xff0c;如CopyOnWriteArrayList…

Docker(三) 创建Docker镜像

一、在Docker中拉取最基本的Ubuntu系统镜像 搜索Ubuntu镜像 Explore Dockers Container Image Repository | Docker Hub 下载镜像 docker pull ubuntu:22.04 二、在镜像中添加自己的内容 使用ubuntu镜像创建容器 docker run -it ubuntu:20.04 /bin/bash 在容器中创建了一个文…

【高性能计算】opencl语法及相关概念(二):索引,队列,核函数

目录 数据并行及任务并行异构编程语言的共性opencl的划分方式opencl上下文定义以字符串为主的程序对象同一设备&#xff0c;多个命令队列同时执行多个核函数的示例 数据并行及任务并行 数据并行是将大规模的计算任务划分为多个子任务&#xff0c;并将这些子任务同时应用于不同…

Android AGP版本

做个记录&#xff1a; Android AGP版本 https://developer.android.com/studio/releases/gradle-plugin?hlzh-cn

Android动态可编辑长度列表

概述 在界面实现一个列表&#xff0c;用户可以随意给列表新增或者删除项目&#xff0c;在开发中比较常用&#xff0c;但是真正做起来又有点花时间&#xff0c;今天花时间做一个&#xff0c;以便在以后的开发中用到。 详细 运行效果&#xff1a; 二、实现思路&#xff1a; 1…

官方推荐使用的OkHttp4网络请求库全面解析(Android篇)

作者&#xff1a;cofbro 前言 现在谈起网络请求&#xff0c;大家肯定下意识想到的就是 okhttp 或者 retrofit 这样的三方请求库。诚然&#xff0c;现在有越来越多的三方库帮助着我们快速开发&#xff0c;但是对于现在的程序员来说&#xff0c;我们不仅要学会如何去用&#xff…

uniapp:蓝牙模块

模拟的是蓝牙设备签到/签出&#xff1a; 获取指定蓝牙设备蓝牙初始搜索次数限制&#xff0c;超过限制就停止搜索蓝牙连接失败次数限制&#xff0c;超过限制标识蓝牙连接失败&#xff08;离开蓝牙范围或其他原因&#xff09;自动重连指定蓝牙 const device ref<any>(nu…

MMSegmentation训练自己的语义分割数据集

全流程&#xff0c;训练语义分割数据集 数据标注json转mask 运行源码MMSegmentation模型选择运行部分 数据标注 # 安装 pip install labelme # 启动labelme labelme然后 ctrl N 开启多边形标注即可&#xff0c;命名类为person 之后会保存到同目录下json文件&#xff1a; js…

go-grpc环境编译搭建

1、安装protoc工具 # 地址 https://github.com/protocolbuffers/protobuf/releases # 下载Win64版本的 https://github.com/protocolbuffers/protobuf/releases/download/v3.19.4/protoc-3.19.4-win64.zip # 设置环境变量2、安装protoc-gen-go插件 > go get -u github.com…

【YOLOV5】YOLOV5添加SPPCSPC

当前YOLOV5版本为7.0 第一步 在models/common.py添加SPPCSPC class SPPCSPC(nn.Module):# CSP https://github.com/WongKinYiu/CrossStagePartialNetworksdef __init__(self, c1, c2, n1, shortcutFalse, g1, e0.5, k(5, 9, 13)):super(SPPCSPC, self).__init__()c_ int(2 *…

java.lang.classnotfoundexception: com.android.tools.lint.client.api.vendor

Unity Android studio打包报错修复 解决方式 java.lang.classnotfoundexception: com.android.tools.lint.client.api.vendor 解决方式 在 launcherTemplate 目录下找到 Android/lintOptions 选项 加上 checkReleaseBuilds false lintOptions { abortOnError false checkRelea…

Spring Bean 生命周期顺序验证

看到一篇写的很好的 Spring Bean 生命周期的博客&#xff1a;一文读懂 Spring Bean 的生命周期&#xff0c;在此写个简单的 Bean 进行验证。 1. 创建Springboot项目 基于 springboot 的2.1.8.RELEASE 创建一个简单项目&#xff0c;只添加 spring-aop 包以引入spring依赖。 &…

Redis下载和安装(Windows系统)

文章目录 创建Redis临时服务1) 启动服务端程序2) 启动客户端程序命令创建Redis服务3) 启动Redis客户端4) 检查是否连接成功 为便于大多数读者学习本套教程&#xff0c;教程中采用 Windows 系统对 Redis 数据库进行讲解。虽然 Redis 官方网站没有提供 Windows 版的安装包&#x…

进程间通信

一、进程间通信&#xff08;interprocess communication&#xff0c;简称 IPC&#xff09;指两个进程之间的通信。 系统中每个进程都有自己的地址空间&#xff0c;并且相互独立、隔离&#xff0c;每个进程都处于自己的地址空间中。 二、通信机制 Linux 内核提供了多种 IPC 机制…

无涯教程-Android - List View函数

Android ListView 是垂直滚动列表中显示的视图&#xff0c;使用 Adapter 从列表(如数组或数据库)中获取内容的列表项会自动插入列表中。 适配器(Adapter)实际上是UI组件和将数据填充到UI组件中的数据源之间的桥梁&#xff0c;适配器保存数据并将数据发送到适配器视图&#xff0…

WordPress(3)会员插件安装

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、服务器中上传插件二、使用步骤1.启动插件前言 提示:会员插件的安装不能在网站后台插件中心中直接安装原因我还没有排查 原因:会导致网站停止运行 一、服务器中上传插件 二、使用步骤 …

ubuntu 上安装flutter dart android studio

因为国内网站不能使用 使用一下&#xff1a; vi ~/.bashrc 最后添加 export FLUTTER_STORAGE_BASE_URLhttps://mirrors.cloud.tencent.com/flutter export PUB_HOSTED_URLhttps://mirrors.tuna.tsinghua.edu.cn/dart-pub export PATH$PATH:/usr/local/go/bin export GOPROXY…

Python钢筋混凝土结构计算.pdf-混凝土强度设计值

计算原理&#xff1a; 需要注意的是&#xff0c;根据不同的规范和设计要求&#xff0c;上述公式可能会有所差异。因此&#xff0c;在进行混凝土强度设计值的计算时&#xff0c;请参考相应的规范和设计手册&#xff0c;以确保计算结果的准确性和合规性。 代码实现&#xff1a; …