当前组件依赖引导样式,使用前请先引用相关css。
Vue.component(“分页”{
模板:“& lt; nav aria-label=耙趁娴己健北?
& lt; ul类=胺忠场北?
& lt;李:class="{“禁用”:pageNum==1}“祝辞& lt; a href=" https://www.yisu.com/zixun/" v: click.prevent=皌urnToPage (1)“title=笆滓场癮ria-label=笆滓场白４? lt;我类=癴a fa-fast-backward祝辞& lt;/i> & lt;/a> & lt;/li>
& lt;李:class="{“禁用”:pageNum==1}“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum - 1)“title=吧弦灰场癮ria-label=鄙弦灰场白４? lt;我类=癴a fa-backward”祝辞& lt;/i> & lt;/a> & lt;/li>
李& lt; v=" pageNum祝辞4“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum - 4)“在……& lt;/a> & lt;/li>
李& lt; v=" pageNum & lt;=4,,pageNum祝辞1”祝辞& lt; a href=" https://www.yisu.com/zixun/" v: click.prevent=" turnToPage(1)“在1 & lt;/a> & lt;/li>
李& lt; v=" pageNum - 3比;1“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum - 3)”在{{pageNum-3}} & lt;/a> & lt;/li>
李& lt; v=" pageNum - 2在1“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum - 2)”在{{pageNum-2}} & lt;/a> & lt;/li>
李& lt; v=" pageNum - 1比;1“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum - 1)”在{{pageNum-1}} & lt;/a> & lt;/li>
& lt;李类="活跃"祝辞& lt; a href=" https://www.yisu.com/zixun/" v: click.prevent=皌urnToPage (pageNum)”在{{pageNum}} & lt;/a> & lt;/li>
李& lt; v=" pageNum + 1 & lt;pageTotal”祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum + 1)”在{{pageNum + 1}} & lt;/a> & lt;/li>
李& lt; v=" pageNum + 2 & lt;pageTotal”祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum + 2)”在{{pageNum + 2}} & lt;/a> & lt;/li>
李& lt; v=" pageNum + 3 & lt;pageTotal”祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum + 3)”在{{pageNum + 3}} & lt;/a> & lt;/li>
李& lt; v=" pageNum祝辞=pageTotal - 4,,pageNum & lt;pageTotal”祝辞& lt; a href=" https://www.yisu.com/zixun/" v: click.prevent=" turnToPage (pageTotal)”在{{pageTotal}} & lt;/a> & lt;/li>
李& lt; v=" pageNum & lt;pageTotal - 4“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum + 4)“在……& lt;/a> & lt;/li>
& lt;李:class="{“禁用”:pageNum==pageTotal}“祝辞& lt; a href=" https://www.yisu.com/zixun/" v:点击。防止=" turnToPage (pageNum + 1)“title=跋乱灰场癮ria-label=跋乱灰场白４? lt;我类=癴a fa-forward”祝辞& lt;/i> & lt;/a> & lt;/li>
& lt;李:class="{“禁用”:pageNum==pageTotal}“祝辞& lt; a href=" https://www.yisu.com/zixun/" v: click.prevent=皌urnToPage pageTotal " title=拔病币砤ria-label=拔病币匙４? lt;我类=癴a fa-fast-forward祝辞& lt;/i> & lt;/a> & lt;/li>
& lt;/ul>
& lt;/nav>”
道具:{
pageNum:数量,
页大小:数量,
totalItemCount:数量,
}，
计算:{
pageTotal:函数(){
返回Math.ceil(这一点。totalItemCount/this.pageSize)
}
}，
方法:{
turnToPage:函数(num) {
如果(num比;这一点。pageTotal | | num & lt;=0) {//toastr。错误(“当前页码超出了范围。页码:$ {num} ', '错误的)
返回假
}
这一点。发出(‘改变’,num)美元
}
}
})
<强>道具定义三个属性:当前页码,当前页显示数量,总数量
计算定义了一个计算方法:获取总数量/当前页显示数量,向上取整,默认取10个
方法定义了一个根据页码跳转方法:最终用于触发改变事件,发出用美元于抛出自定义事件,组件外可以捕获当前定义的改变事件
html组件显示:
代码如下:& lt;分页:page-num=" criteria.page。num”:页面大?" criteria.page。大小”:total-item-count=" itemsCount skiptoPage“v:改变=祝辞& lt;/pagination>
以上的值为自己传入的值
让vm=new Vue ({
埃尔:“#应用”,
数据:{
标准:{
关键字:”,
页面:{num: 1,尺寸:10}
}，
itemsCount: 0
}，
方法:{
skiptoPage:函数(num) {
this.criteria.page。num=num;
}
}
});
之前
以上方法是自定义事件变化的方法,你们可以自己去修改内容。
效果图
