<强> 1。起因
今日看完元素中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习。
<强> 2。实现难点
分页器的实现难点主要是什么时候显示分页器的省略,我的思路是:规定一个值foldPage,意为当前最多显示的标签数,当总页数超过即显示省略。省略分为左边省略(folder1)和右边省略(folder2),布局代码如下:
& lt; div类=胺忠场盄click=皃ageClick”比;
& lt;按钮类="以前"在上一页& lt;/button>
& lt; ul类=耙趁妗北?
& lt;李:class="[‘第一次’,{“活跃”:当前==1}]“v=白堋北?
1
& lt;/li>
& lt;李:class=" [testLeft, goback]”
v-show=" showPreMore "
@mouseenter=" testLeft=更多左”
@mouseleave=" testLeft=更多”祝辞& lt;/li>
& lt;李:class=" [page-item,{“活跃”:当前==项}]”)=跋钜趁妗泵涝?
{{项}}
& lt;/li>
& lt;李:class=" [testRight,火星)”
v-show=" showNextMore "
@mouseenter=" testRight=ɡ?
@mouseleave=" testRight=更多”祝辞& lt;/li>
& lt;李:class="[最后,{“活跃”:当前==$去年}]“v=白堋北?
{{$去年}}
& lt;/li>
& lt;/ul>
& lt;按钮类=跋乱桓觥痹谙乱灰? lt;/button>
& lt;/div>
页面是美元的一个计算属性,用于动态生成中间的页码,以及控制folder1和folder2的显示,代码如下:
计算:{//中间页数组
$页面(){
const foldPage=this.foldPage
恒流=号(this.current)
const halfFoldPage=Math.floor ((foldPage-2)/2)
如果这一点。去年在美元;foldPage) {
如果(电流- halfFoldPage祝辞2){
这一点。showPreMore=true
其他}{
这一点。showPreMore=false
}
如果(当前+ halfFoldPage & lt;这个。去年美元){
这一点。showNextMore=true
其他}{
这一点。showNextMore=false
}
}
让=[]数组//folder1显示
如果这一点。showNextMore,,! this.showPreMore) {
(让我=2;我& lt;foldPage;我+ +){
array.push(我)
}//folder1和folder2都显示
如果(这其他}。showPreMore,,这一点。showNextMore) {
(让我=当前- halfFoldPage;我& lt;=当前+ halfFoldPage;我+ +){
array.push(我)
}//folder2显示
}如果!这。showNextMore,,this.showPreMore) {//当folder2显示的时候,页码不能大于去年美元,需要往前多显示差额
让说=当前+ halfFoldPage——这。最后一次+ 1美元;
(让我=当前- halfFoldPage说;我& lt;这个。去年美元;我+ +){
array.push(我)
}//都不显示
其他}{
(让我=2;我& lt;这个。去年美元;我+ +){
array.push(我)
}
}
返回数组
}，//总页数
去年美元(){
返回Math.ceil (this.total/size)
}
}
所有的点击都用一个函数处理,根据e。target判断点击的目标。从而做出相应的逻辑:
方法:{
pageClick (e) {
让newPage=号(e.target.textContent)
这一点。当前数量=(this.current);
如果(! isNaN (newPage),,newPage) {
这一点。当前=newPage
其他}{//下一页
如果(e.target.className.indexOf (“next”) !=1) {
如果这一点。当前美元==这个。最后){
返回;
}
这一点。当前的+ +
}//上一页
else if (e.target.className.indexOf(前)!=1){
如果这一点。当前==1){
返回
}
这一点。当前,
}//省略向左
else if (e.target.className.indexOf(左)!=1){
这一点。当前-=oldPage - 2
如果这一点。当前& lt;=1) {
这一点。当前=1
返回
}
}//省略向右
else if (e.target.className.indexOf(右)!=1){
这一点。当前+=oldPage - 2
如果这一点。当前在=Ｈツ昝涝?{
这一点。当前美元=?
返回
}
}
}
}
},
<强> 3。总结
分页组件在元素中算是一个很简单的组件,静下心来看不是很复杂,理解其思路以后可以自己尝试去写出来,细节可以无需在意。
以上所述是小编给大家介绍的vue仿元素实现分页器效果,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
