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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

页面使用

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>
1
2
3
4
5
6
7
8
9
10
11
12

分页

首先创建个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 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

使用页面

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

1
2
3
4
5
6
7
8
9
10
11