欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于vue2.0实现仿百度前端分页效果附实现代码

程序员文章站 2022-06-30 09:42:02
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先...

前言

上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件

先看实现效果图

基于vue2.0实现仿百度前端分页效果附实现代码

代码实现

按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路

1、需要提前设定哪些参数需要暴露出来给父组件传递

<paging 
   :name="name"
   @change="onpagechange"
   :page-size="size"
   :total="total"
   layout="jumper,total"
   :current-page="curpage"
  />

方法及参数说明
属性
page-size 每页显示条目个数
total 总条目数
current-page 当前页数
layout 布局 默认不显示 jumper,total

事件

change 当前页改变时触发

2、再一个就是涉及到的父子组件通信

这里主要通过props向子组件传递参数

 在子组件中使用emit自定义事件返回数据给父组件

a.字符串数组形式props

props: ['title', 'likes', 'ispublished', 'commentids', 'author']

或者指定每个prop的值类型

props: {
 title: string,
 likes: number,
 ispublished: boolean,
 commentids: array,
 author: object
}

b.props验证

props: {
  // 基础的类型检查 (`null` 匹配任何类型)
  propa: number,
  // 多个可能的类型
  propb: [string, number],
  // 必填的字符串
  propc: {
   type: string,
   required: true
  },
  // 带有默认值的数字
  propd: {
   type: number,
   default: 100
  },
  // 带有默认值的对象
  prope: {
   type: object,
   // 对象或数组默认值必须从一个工厂函数获取
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propf: {
   validator: function (value) {
    // 这个值必须匹配下列字符串中的一个
    return ['success', 'warning', 'danger'].indexof(value) !== -1
   }
  }
 }

使用props传递数据给子组件 ,子组件主要有三种形式来接收到父组件传递过来的参数
props字符串数组、指定每个prop值类型以及props验证,通常我们会使用props验证

分析完之后,接下来我们可以冻手实现了

1、这里我们用vue-cli先创建一个vue项目

安装vue-cli

$npm install -g vue-cli

创建vue项目

$vue init webpack my-project

项目运行

$cd my-project
$npm run dev

2、在components文件下创建一个paging组件

<template>
 <div class="paging clearfix">
   <div class="page-size fl" v-if="isshowtotal">共{{total}}条</div>
    <ul class="page-list fl clearfix">
      <li @click="changepage(currentpage-1)">上一页</li>
      <li :class="{'active':currentpage==item.val}" v-for="item in pagelist" v-text="item.text" @click="changepage(item.val)">1</li>
      <li @click="changepage(currentpage+1)">下一页</li>
    </ul>
    <div class="page-jump fl" v-if="isshowjumper">
      前往<input class="input" type="text" v-model="topage" @keydown="submit(topage,$event)">页
      <!-- <button @click="changepage(topage)">确定</button> -->
    </div>
 </div>
</template>

<script>
export default {
 name: 'paging',
 // props:[
 //  'name'
 // ],
 // prop验证
 props:{
  name:string,
  pagesize: {
   type: number,
   default: 10
  },
  total: {
   type: number,
   default: 0
  },
  currentpage: {
   type: number,
   default: 1
  },
  layout:{
    type: string
  }
 },
 data () {
  return {
      isshowjumper:false,
      isshowtotal:false,
    topage:'',//跳转到x页
      pagegroup:10//可见分页数量 默认10个分页数
  }
 },
 created: function () {
    console.log('created');
    this.isshowtotal = this.layout.indexof('total')!==-1;
    this.isshowjumper = this.layout.indexof('jumper')!==-1;
  },
  mounted: function () {
    console.log('mounted',this.layout);
  },
  computed:{
    totalpage:function(){
      return math.ceil(this.total / this.pagesize)
    },
    pagelist:function(){
      var list = [];
      var count = math.floor(this.pagegroup/2), center = this.currentpage;
      var left = 1,right = this.totalpage;

      if(this.totalpage>this.pagegroup){
        if(this.currentpage>count+1){
          if(this.currentpage < this.totalpage - count){
            left = this.currentpage - count;
            right = this.currentpage + count-1;
          }else{
            left = this.totalpage - this.pagegroup+1;
          }
        }else{
          right = this.pagegroup;
        }
      }

      // 遍历添加到数组里
      while(left<=right){
        list.push({
          text:left,
          val:left
        });
        left++;
      }
      return list;
    }
  },
 methods:{
  // 回车事件
  submit(topage,e){
    // console.log('e.keycode',topage,e.keycode)
    // key.code === 13表示回车键 
    if(e.keycode === 13){
      //逻辑处理
      this.changepage(topage);
    }
  },
  changepage:function(idx){
    if(idx!=this.currentpage && idx>0 && idx<=this.totalpage){
      // 触发父组件事件 pagechange会转换成小写pagechange
      this.$emit('change',{curpage:number(idx)});
      }
  }
  }
}
</script>

<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
*{
    padding: 0;
    margin: 0;
}
.fl{
  float: left;
}
.clearfix:after{
  display: block;
  content: '';
  clear: both;
}
.page-size{
    height: 26px;
  line-height: 26px;
}
.page-list{

}
.page-jump{
    height: 26px;
  line-height: 26px;
  margin-left: 20px;
}
.page-jump .input{
  width: 32px;
    padding: 4px 2px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  margin: 0 4px;
}
  ul{
    list-style: none;
  }
  ul li{
    float: left;
    color: #606266;
    background: #f4f4f5;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
    margin: 0 5px;
  }
  ul>li.active{
    background: #409eff;
    color:#fff;
  }
</style>

3、在父组件中引入并使用组件

<template>
 <div>
  <!-- 分页组件 -->
  <paging 
   :name="name"
   @change="onpagechange"
   :page-size="size"
   :total="total"
   layout="jumper,total"
   :current-page="curpage"
  />
 </div>
</template>
<!-- 
paging属性 
page-size 每页显示条目个数
total 总条目数
current-page 当前页数
layout 布局 默认不显示 jumper,total

paging事件

change 当前页改变时触发
 -->
<script>

import paging from '@/components/paging';
export default {
 name: 'index',
 components:{
  paging
 },
 data () {
  return {
   msg: 'hello',
   name:'阿健a',
   size:10,
   total:201,
   curpage:1
  }
 },
 methods:{
  onpagechange:function(page){
   this.curpage = page.curpage;
  }
 }
}
</script>

遇到的问题

1、在子组件中修改currentpage时报错

avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

在使用组件时,传入的prop,被组件内部又做了一次修改

 避免直接修改prop,因为当父组件重新呈现时,值将被覆盖

changepage:function(idx){
    if(idx!=this.currentpage && idx>0 && idx<=this.totalpage){
      this.currentpage = idx;
      // 触发父组件事件 pagechange会转换成小写pagechange
      this.$emit('change');
      }
  }

解决

 修改代码,通过emit传递curpage给父组件,让父组件修改

changepage:function(idx){
    if(idx!=this.currentpage && idx>0 && idx<=this.totalpage){
      // 触发父组件事件 pagechange会转换成小写pagechange
      this.$emit('change',{curpage:idx});
      }
  }

父组件监听事件更新curpage

onpagechange:function(page){
   this.curpage = page.curpage;
  }

最后

以上就是分页组件的整个实现过程 ,其实只要搞清楚父子组件是如何传参的,以及我们实现一个组件需要暴露哪些参数给父组件,整个实现过程还是不难的

总结

以上所述是小编给大家介绍的基于vue2.0实现仿百度前端分页效果附实现代码,希望对大家有所帮助