vue3分页组件与中文化详解

import zhCn from "element-plus/es/locale/lang/zh-cn"
import {ref} from 'vue'
const locale = ref(zhCn)
<template>
  <div class="table-footer">
<el-config-provider :locale="locale">

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleChange"
      @current-change="handleChange"
    />
</el-config-provider>

  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    /* 当前页，支持 v-model:page */
    currentPage: { type: Number, default: 1 },
    /* 每页条数，支持 v-model:limit */
    pageSize: { type: Number, default: 10 },
    /* 总条数 */
    total: { type: Number, default: 0 },
    /* 可选每页条数 */
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    }
  },
  emits: ['update:currentPage', 'update:pageSize', 'change'],
  computed: {
    currentPage: {
      get()  { return this.currentPage },
      set(v) { this.$emit('update:currentPage', v) }
    },
    pageSize: {
      get()  { return this.pageSize },
      set(v) { this.$emit('update:pageSize', v) }
    }
  },
  methods: {
    handleChange() {
      /* 对外暴露一个 change 事件，参数：{ page, limit } */
      this.$emit('change', { currentPage: this.currentPage, pageSize: this.pageSize })
    }
  }
}
</script>

<style scoped>
.table-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}


</style>
<script setup>

import Pagination from '@/components/Pagination.vue'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 统一获取数据
function getData() {
  // 这里调用接口 list
  console.log('拉取第', currentPage.value, '页', pageSize.value, '条')
}
</script>

<template>
<div>
   <Pagination
      v-model:currentPage="currentPage"
      v-model:pageSize="pageSize"
      :total="total"
      @change="getData"
    />
  </div>
</template>

import { reactive, ref, getCurrentInstance, ComponentInternalInstance } from 'vue'
import { useGlobalStore } from "../store"
import type { MessageBox, Message, DictType, ApiType } from '../types' // 假设有这些类型定义

interface PageParams {
  currentPage: number
  pageSize: number
  total: number
}

interface TableData<T = any> {
  list: T[]
}

interface UserInfo {
  // 定义用户信息结构
  [key: string]: any
}

export default function useGlobalUtils() {
  const instance = getCurrentInstance()!
  const globalProp = instance.appContext.config.globalProperties
  const globalStore = useGlobalStore()
  
  // 类型化全局工具
  const getMessage = (): Message => globalProp.$message
  const getMessageBox = (): MessageBox => globalProp.$messageBox
  const getDict = (): DictType => globalProp.$dict
  const getApi = (): ApiType => globalProp.$api
  
  // 用户信息（带错误处理）
  const getUserInfo = (): UserInfo => {
    try {
      return JSON.parse(localStorage.userInfo || '{}')
    } catch (e) {
      console.error('解析用户信息失败:', e)
      return {}
    }
  }

  // 确认对话框
  const confirm = async (prompt = "确认提交此次编辑吗?"): Promise<boolean> => {
    try {
      const isConfirm = await getMessageBox().confirm(prompt, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
      if (isConfirm) {
        console.log("操作已确认")
      }
      return isConfirm
    } catch (error) {
      console.error('确认对话框错误:', error)
      return false
    }
  }

  // 分页状态
  const page = reactive<PageParams>({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  // 表格状态
  const tableState = reactive({
    data: {
      list: []
    } as TableData,
    loading: false,
    itemData: {} as any,
    dialogLoading: false
  })

  // 日志方法
  const log = (...args: any[]) => {
    if (process.env.NODE_ENV !== 'production') {
      console.log(...args)
    }
  }

  return {
    globalStore,
    getApi,
    getMessage,
    getMessageBox,
    getDict,
    confirm,
    log,
    userInfo: getUserInfo(),
    page,
    ...tableState,
    // 或者分开暴露
    // tableData: tableState.data,
    // tableLoading: tableState.loading,
    // itemData: tableState.itemData,
    // dialogLoading: tableState.dialogLoading
  }
}

<script setup lang="ts">
const {
  page,
  tableData,
  confirm,
  getApi
} = useGlobalUtils()

// 使用示例
const handleDelete = async () => {
  if (await confirm('确定删除此项吗?')) {
    // 执行删除操作
  }
}
</script>

import { reactive, ref, getCurrentInstance } from 'vue'
import { useGlobalStore } from "../store"

export default function useGlobalUtils() {
  const instance = getCurrentInstance()
  const globalProp = instance.appContext.config.globalProperties
  const globalStore = useGlobalStore()
  
  // 获取全局工具方法
  const getMessage = () => globalProp.$message
  const getMessageBox = () => globalProp.$messageBox
  const getDict = () => globalProp.$dict
  const getApi = () => globalProp.$api
  
  // 安全获取用户信息
  const getUserInfo = () => {
    try {
      return JSON.parse(localStorage.userInfo || '{}')
    } catch (e) {
      console.error('解析用户信息失败:', e)
      return {}
    }
  }

  // 确认对话框封装
  const confirm = async (prompt = "确认提交此次编辑吗?") => {
    try {
      const isConfirm = await getMessageBox().confirm(prompt, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
      if (isConfirm) {
        console.log("操作已确认")
      }
      return isConfirm
    } catch (error) {
      console.error('确认对话框错误:', error)
      return false
    }
  }

  // 分页状态
  const page = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  // 表格相关状态
  const tableState = reactive({
    data: { list: [] },
    loading: false,
    itemData: {},
    dialogLoading: false
  })

  // 开发环境日志
  const log = (...args) => {
    if (process.env.NODE_ENV !== 'production') {
      console.log(...args)
    }
  }

  return {
    // 全局工具
    globalStore,
    getApi,
    getMessage,
    getMessageBox,
    getDict,
    
    // 方法
    confirm,
    log,
    
    // 状态
    userInfo: getUserInfo(),
    page,
    
    // 表格状态 (可展开或直接暴露)
    tableData: tableState.data,
    tableLoading: tableState.loading,
    itemData: tableState.itemData,
    dialogLoading: tableState.dialogLoading,
    
    // 也可以这样暴露
    // ...tableState
  }
}

// 在组件中使用
import useGlobalUtils from './useGlobalUtils'

export default {
  setup() {
    const {
      page,
      tableData,
      confirm,
      getApi,
      log
    } = useGlobalUtils()

    // 获取数据示例
    const fetchData = async () => {
      try {
        tableData.loading = true
        const response = await getApi().get('/data', {
          params: {
            page: page.currentPage,
            size: page.pageSize
          }
        })
        tableData.list = response.data.list
        page.total = response.data.total
      } catch (error) {
        log('获取数据失败:', error)
        getMessage().error('获取数据失败')
      } finally {
        tableData.loading = false
      }
    }

    // 删除确认示例
    const handleDelete = async (id) => {
      if (await confirm('确定删除此项吗?')) {
        try {
          await getApi().delete(`/data/${id}`)
          getMessage().success('删除成功')
          fetchData() // 刷新数据
        } catch (error) {
          log('删除失败:', error)
          getMessage().error('删除失败')
        }
      }
    }

    return {
      page,
      tableData,
      handleDelete,
      fetchData
    }
  }
}