分页组件
# vue3 的v-model 原理
分页组件
<template> <div class="page"> 总数: {{ total }} <select v-model="nowPagesize" @change="changeSize"> <option v-for="item in pageSizes" :value="item"> 每页/{{item}}条 </option> </select> <div class="pre" @click="changeActive(currentPage - 1)"> < </div> <div class="page-num" v-for="item in pageNum " :key="item" :class="item == currentPage ? 'active' : ''" @click="changeActive(item)"> {{ item }} </div> <div class="next" @click="changeActive(currentPage + 1)"> > </div> <div class="lf10"> 前往 <input class="jump-imp" v-model.number="jumpNum"> <span @click="jumpBtn"> 跳转</span> </div> </div> </template> <script setup> import { defineProps, defineEmits, toRefs, computed ,ref} from 'vue'; // 如果你xxxx去定义这个子传父的事件类型 ,后面就可以 通过v-model 来简化 代码了 const emit = defineEmits(['update:currentPage','update:pageSize']) const props = defineProps({ total: { type: Number, default: 0 }, currentPage: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 }, pageSizes:{ type:Array, default:()=>[100,200,300,400] } }) // 解构里面的变量并保证原有的 响应式 const { total, currentPage, pageSize,pageSizes } = toRefs(props) const jumpNum = ref(1) const nowPagesize = ref(pageSize.value) //计算出应该出现的页码个数 const pageNum = computed(() => { return Math.ceil(total.value / pageSize.value) }) //点击页码 盒子 选中一个 const changeActive = (page) => { //边界: 只要目标页 小于等于 计算出来的 最大页码值 都让他更改当前页 if (page <= pageNum.value && page>=1) { console.log('当前选中 ', page); emit('update:currentPage', page) } } //点击跳转 const jumpBtn = ()=>{ changeActive(jumpNum.value) } //改变页码长度 const changeSize = ()=>{ console.log(nowPagesize.value); emit('update:pageSize',nowPagesize.value) } </script> <style lang="scss" scoped> .lf10{ margin-left: 10px; } .jump-imp{ width: 30px; text-align: center; } .page { width: 100%; height: 50px; display: flex; align-items: center; justify-content: flex-start; } .page-num { margin-left: 10px; width: 30px; height: 30px; text-align: center; line-height: 30px; background: #88dddd; //#409eff color: #fff; cursor: pointer; &:hover { background: #409eff; } } /* 当前页被选中的效果 */ .active { background: #409eff; } .pre, .next { width: 30px; height: 30px; background: #88dddd; color: #fff; font-weight: 700; cursor: pointer; margin-left: 10px; } .pre:hover, .next:hover { background: #f44; }</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137父组件
<template> <div> <PageNum :current-page="pageData.currentPage" @update:current-page="(data)=>{pageData.currentPage =data }" v-model:page-size="pageData.pageSize" :total="pageData.total" :page-sizes="[10,20,30,40,111,1,5,45,5,423]" @size-change="handleSizeChange" @current-change="handleCurrentChange" > <!-- <PageNum v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize" :total="pageData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" > --> </PageNum> </div> </template> <script setup> import PageNum from './components/PageNum.vue' import { reactive } from 'vue'; const pageData = reactive({ currentPage:1, pageSize:10, total:50 }) const handleSizeChange = (size)=>{ console.log('长度发生改变啦!!',size); } const handleCurrentChange = (currentPage)=>{ console.log('当前页面是:',currentPage); } </script> <style lang="scss" scoped> </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
编辑 (opens new window)
上次更新: 2023/11/01, 22:15:03