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-dialog
      width="104rem"
      style="height: 67%;min-height: 620px;min-width: 900px;"
      :title="props.title"
      v-model="props.show"
      v-dialogDrag
      v-if="props.show"
      :before-close="close"
    >
      <!-- 自定义插槽 noFooter为true的时候，不显示footer的插槽-->
      <slot name="dia_Content"></slot>
      <div
        class="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: number
    currentPage: number
    pageSizes: number[]
    pageSize: number
    layout: string
  }
  
  interface PaginationData {
    total?: number
    currentPage?: number
    pageSizes?: number[]
    pageSize?: number
    layout?: 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" />