目录
直接上案例: 分页器
vue2(Minxin)
mixin文件:
//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
)
}
}
}
在页面中使用:
说明:
(1)这时候data中就不需要上面mixin文件中的
pageSize: 20, // 每页的条数
pageSizes: Array.from({ length: 6 }, (v, i) => (i + 1) * 20),
currentPage: 1, // 当前页数
total: 0
使用时直接this.***使用即可
(2)至于mixin中的方法的使用,这直接this.方法使用即可
Vue3(hook)
hooks文件
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
}
}
在页面中使用
//引入
import { usePage } from '@/hooks/usePage'
export default {
setup() {
const { startWith, loading, limit, messageTotal, currentPage, pageSizes, sizeChange, currentChange, pagiChange } = usePage()
}
}
说明:
(1)reactive中的数据需要***.value使用
(2)方法使用
(3)若在上方template 中使用,则要return出去