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

style中的内容.page-bar{text-align：中心;宽度：100%；高度：36px；保证金：0自动；位置：相对；}.page-barul{最小宽度：700px；显示：块；溢出：隐藏；位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；}.page-barli{显示：块；宽度：36px；高度：36px；边界半径：4px；列表样式：无；溢出：隐藏；位置：相对；向左飘浮;margin-left:8px;}.page-bar.first{display:block;宽度：170px；高度：36px；字体大小：14px；行高：36px；text-align:center;}.page-bar.last_li{宽度：85px;高度：36px；border:1pxsolid#ddd;}.page-bar.last_lispan{宽度：100%;高度：100%；行高：36px；文本对齐：居中；float:left;}.page-barli:first-child{margin-left:0px}.page-bara{width:34px;高度：34px；边框：1px实心#ddd；文字修饰：无；位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；/*margin-left:-1px;*/line-height:34px;颜色：#333；cursor:pointer}.page-bar.li_aa:hover{background-color:#eee;边框：1px实心#40A9FF；颜色：#40A9FF；}.page-bara.banclick{光标：不允许；}.page-bar.activea{颜色：#fff；游标：默认；背景色：#1890FF；border-color:#1890FF;}.page-bari{font-style:normal;颜色：#d44950；边距：0px4px；字体大小：14px；}scriptexportdefault{//显示的声明组件名称："paging",//从父组件传值过来，可以自己设置名称，但是需要和父组件传入的名称一致！props:["dataAll","dataCur","datanum","dataDatanum"],data(){return{all:this.dataAll,//总页码cur:this.dataCur,//当前页码num:this.datanum,//一页显示的奇数个数dataNum:this.dataDatanum,//数据个数}},watch:{cur:function(oldValue,newValue){//父组件通过change方法接受当前页码this.$emit('change',oldValue)//这里是直接点击执行函数}},methods:{btnClick:function(data){//页面点击事件if(data!=this.cur){this.cur=data}},pageClick:function(){console.log('now'+this.cur+'页'）;//父组件通过change方法接受当前页码//这里是点击下一页执行函数this.$emit('change',this.cur)}},computed:{indexes:function(){左变量=1;varright=this.all;变量ar=[];if(this.all>=this.num){if(this.cur>3&&this.cur//这个是自己设置的，不需要根据situation//这里通过props传值给child，还有回调函数，自己去获取传给parent的值