vue2 (Minxin)

mixin file:

//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
      )
    }
  }
}

In the page use:

illustrate:

(1) At this time, the data in the mixin file above does not need

pageSize: 20, // the number of entries per page
pageSizes: Array.from({ length: 6 }, (v, i) => (i + 1) * 20),
currentPage: 1, // the current page
total: 0

When using it, you can use this.*** directly

(2) As for the use of the method in mixin, this. method can be used directly

Vue3(hook)

hooks file

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
  }
}

use in the page

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

    }

}

illustrate:

(1) The data in reactive needs ***.value to use

(2) Method usage

(3) If it is used in the template above, it must be returned

About Minxin and hooks