vue3+ts封裝彈窗及封裝分頁的示例代碼

更新時間：2023年08月31日 10:49:48 作者：brave,

這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁的示例代碼,本文通過定義defaultDialog .vue,結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

定義defaultDialog .vue

  
<script lang="ts" setup>
import { ref,toRefs,onUpdated } from 'vue'
import { ElMessageBox } from 'element-plus'
const props =defineProps({//接收參數(shù)，父組件傳的時候用: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()'的形式監(jiān)聽
  close: [] // 具名元組語法
  cancel: []
  save: []
}>()
const close = () => {//這里是觸發(fā)事件，觸發(fā)父組件監(jiān)聽的方法
  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>

分頁

首先創(chuàng)建個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 = {}) {
  /** 默認的分頁參數(shù) */
  const defaultPaginationData: DefaultPaginationData = {
    total: 0,
    currentPage: 1,
    pageSizes: [10, 20, 50],
    pageSize: 18,
    layout: "prev, pager, next, jumper, total, sizes"
  }
  /** 合并分頁參數(shù) */
  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" })```
//下面是監(jiān)聽頁面變化然后觸發(fā)查詢
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" />

到此這篇關(guān)于vue3+ts封裝彈窗分頁封裝的文章就介紹到這了,更多相關(guān)vue3 ts封裝分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: