vue2 (Minxin)

archivo de mezcla:

//pagination.js
import utils from '@/components/ShadowBase/utils'
const { getRangeText } = utils
export default {
  data() {
    return {
      pageSize: 20, // 每页的条数
      pageSizes: Array.from({ length: 6 }, (v, i) => (i + 1) * 20),
      currentPage: 1, // 当前页数
      total: 0// 总条数
    }
  },
  methods: {
    // 每页条数设置
    sizeChange(val1, val2, val) {
      this.pageSize = val
      const rangeStr = getRangeText(1, val)
      this.initRange = rangeStr
      this.getPageDataList(
        rangeStr,
        this.keyword,
        this.status,
        this.disabled,
        this.startTime,
        this.endTime,
        val2,
        val1
      )
    },
    // 跳页
    currentChange(val1, val2, val) {
      const rangeStr = getRangeText(val, this.pageSize)
      this.getPageDataList(
        rangeStr,
        this.keyword,
        this.status,
        this.disabled,
        this.startTime,
        this.endTime,
        val2,
        val1
      )
    }
  }
}

En la página usa:

ilustrar:

(1) En este momento, los datos en el archivo mixin anterior no necesitan

pageSize: 20, // el número de entradas por página
pageSizes: Array.from({ length: 6 }, (v, i) => (i + 1) * 20),
currentPage: 1, // el
total de la página actual: 0

Cuando lo use, puede usar esto. *** directamente

(2) En cuanto al uso del método en mixin, este método se puede usar directamente

Vue3 (gancho)

archivo de ganchos

import { reactive, toRefs } from '@vue/composition-api'
export function usePage() {
  const state = reactive({
    startWith: 0,
    loading: true,
    limit: 20,
    messageTotal: 0,
    currentPage: 1,
    pageSizes: Array.from({ length: 6 }, (v, i) => (i + 1) * 20)
  })
  const sizeChange = (fn, val) => {
    state.limit = val
    fn()
  }
  const currentChange = (fn, val) => {
    state.startWith = (val - 1) * state.limit
    fn()
  }
  const pagiChange = (fn, val) => {
    state.startWith = state.startWith + val * state.limit
    fn()
  }
  return {
    ...toRefs(state),
    sizeChange,
    currentChange,
    pagiChange
  }
}

usar en la pagina

//引入
import { usePage } from '@/hooks/usePage'
export default {
    setup() {
      const { startWith, loading, limit, messageTotal, currentPage, pageSizes, sizeChange, currentChange, pagiChange } = usePage()

    }

}

ilustrar:

(1) Los datos en necesidades reactivas ***.valor a utilizar

(2) Uso del método

(3) Si se utiliza en la plantilla anterior, debe devolverse

Sobre Minxin y ganchos