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" />