vue中的自定义分页插件组件的示例

介绍一下，已经有很多的某视频剪辑软件分页的组件了，大家都是大同小易，那么我就结合自身的使用，写出了一片文章

首先在新建一个分页模块

在模块中引入相应的代码，(内有详细的注释)

模板中

div=' page-bar ' ul Li class=' first ' span共{{dataNum}}条记录第{{cur}}/{{all}}页/span/Li Li v-if=' cur 1 ' a v-: click=' cur-，pageClick()'/a/点击上一页/Li Li v-if=' cur==1 ' a class=' ban click '/a/点击第一页时显示/Li Li class=' Li _ a ' v-for=' indexs ' v-bind : class=' { ' active ' : cur==index } ' a v-: click=' btnClick(index)' { { index } }/a//页码/li li v-if='cur！=all ' a v-: click=' cur，pageClick()'/a/点击下一页/Li Li v-if=' cur==all ' a class=' ban click '/a/点击最后一页时显示/li li class='last_li' span共我{{all}}/i页/span //共有多少页/li /ul/divstyle中的内容。页面栏a { width : 34 px h8 : 34 pxborder : 1px固体# ddd文本装饰：无；绝对位置：前：名50%；左侧： 50%;transform: translate(-50%，-50%)；/*边距-左侧：-1px；*/行高： 34px颜色： # 333颜色：指针}。页面栏李_ a :悬停{背景色： # eeeborder: 1px实心# 40A9FFcolor: # 40A9FF}。页面栏a.banclick { cursor:不允许；}.页面栏。激活a { color: # fffcursor:默认值；背景-颜色： # 1890 ff边框-颜色： # 1890 ff}.页面栏i { font-style:正常；color : # d 44950 margin 3360 0px 4px font-size : 14px；}脚本

导出默认值{ //显示的声明组件名称： '分页',//从父级组件中传值过来的，你可以自己设置名字，但是需要跟父级传入的名字一致！props : ['dataAll '，' dataCur '，' datanum '，' datadatadatadatanum ']，data(){ return { all : this。dataAll，//总页数cur: this.dataCur，//当前页码num: this.datanum，//一页显示的数量奇数dataNum: this.dataDatanum，//数据的数量} }，watch: { cur:函数(旧值，新值){ //父组件通过变化方法来接受当前的页码这个$emit('change '，oldValue) //这里是直接点击执行函数} }，methods: { btnClick:函数（数据){ //页码点击事件如果(数据！=this.cur) { this.cur=data } }，页面点击： function(){ console。日志('现在在"这个。cur "页');//父组件通过变化方法来接受当前的页码//这里是点击下一页执行函数这个$emit('change '，this.cur) } }，计算出： { indexs 3360 function(){ var left=1；var right=this . all var ar=[]；如果(这个。所有=这个。num){ if(this。弯曲这个。弯曲这个。all-2){ left=this。cur-(这个。num-1)/2右=这个。cur(这个。num-1)/2 } else { if(this。cur=3){ left=1 right=this。num } else { right=this。剩下的=这个。所有-(这个。num-1)；} } } while(左=右){ ar.push(左)左}返回ar } }}父级的组件内容

模板//这是我自己设置的，不需要根据情况设置不同的样式。div class='page' /这里，值是通过道具传递给孩子的，并且有一个函数可以回调change。若要获取传递给父级的值，请分页： data all=' all ' : data cur=' cur ' : datum=' num ' : datum=' datanum ' @ change=' page change '/paging/div/template style scoped . page { width 3360 100%。最小宽度： 1068 px；height: 36pxmargin: 40px自动；}/style script从“”导入分页。/Paging ' export default { name : ' home page }，components: { Paging }，data() { return { all: 40，//总页数cur: 1，//当前页num3360 7，//一页显示的数字必须是奇数datanum3360 400，//数据个数} }，methods: {//从子代传递给父代的动态值被带到pagechange3360函数(page) {this。cur=page。

国家预防机制运行开发

注意

你可以根据自己的喜好自己做分页符。我是在别人的基础上加了页码和当前页码，还是加了跳过的页数(还没做)，还是改了css样式改的！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。