基于Vue如何封装分页组件

网络编程 2025/11/4 佚名

3 2 1

使用Vue做双向绑定的时候，可能经常会用到分页功能

接下来我们来封装一个分页组件

先定义样式文件 pagination.css

ul, li {
  margin: 0px;
  padding: 0px;
}
.page-bar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.page-button-disabled {
  color:#ddd !important;
}
.page-bar li {
  list-style: none;
  display: inline-block;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}

js文件 pagination.js

(function (vue) {
  // html模板信息
  var template = '<div class="page-bar">            <ul>             <li><a class="{{ setButtonClass(0) }}" v-on:click="prvePage(cur)">上一页</a></li>             <li v-for="index in indexs" v-bind:class="{ active: cur == index }">              <a v-on:click="btnClick(index)">{{ index < 1 "..." : index }}</a>             </li>             <li><a class="{{ setButtonClass(1) }}" v-on:click="nextPage(cur)">下一页</a></li>            </ul>           </div>'
  var pagination = vue.extend({
    template: template,
    props: ['cur', 'all'],
    computed: {
      indexs: function () {
        var left = 1
        var right = this.all
        var ar = []
        if (this.all >= 11) {
          if (this.cur > 5 && this.cur < this.all - 4) {
            left = this.cur - 5
            right = this.cur + 4
          } else {
            if (this.cur <= 5) {
              left = 1
              right = 10
            } else {
              right = this.all
              left = this.all - 9
            }
          }
        }
        while (left <= right) {
          ar.push(left)
          left++
        }
        if (ar[0] > 1) {
          ar[0] = 1;
          ar[1] = -1;
        }
        if (ar[ar.length - 1] < this.all) {
          ar[ar.length - 1] = this.all;
          ar[ar.length - 2] = 0;
        }
        return ar
      }
    },
    methods: {
      // 页码点击事件
      btnClick: function (data) {
        if (data < 1) return;
        if (data != this.cur) {
          this.cur = data
          this.$dispatch('btn-click', data)
        }
      },
      // 下一页
      nextPage: function (data) {
        if (this.cur >= this.all) return;
        this.btnClick(this.cur + 1);
      },
      // 上一页
      prvePage: function (data) {
        if (this.cur <= 1) return;
        this.btnClick(this.cur - 1);
      },
      // 设置按钮禁用样式
      setButtonClass: function (isNextButton) {
        if (isNextButton) {
          return this.cur >= this.all "page-button-disabled" : ""
        }
        else {
          return this.cur <= 1 "page-button-disabled" : ""
        }
      }
    }
  })
  vue.Pagination = pagination
})(Vue)

pagination分页组件就封装好了，需要使用的时候，引入以上两个文件即可

接下来我们测试下效果

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title></title>
  <script src="/UploadFiles/2021-04-02/vue.js">

最终效果

页码切换事件在listen中处理即可
点击此处下载源码：源码下载地址
以上所述是小编给大家介绍的基于Vue如何封装分页组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue如何封装组件,vue,组件

标签：

vue如何封装组件,vue,组件

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“基于Vue如何封装分页组件”

基于Vue如何封装分页组件

暂无“基于Vue如何封装分页组件”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

2025年11月04日

基于Vue如何封装分页组件

vue如何封装组件,vue,组件

JS返回只包含数字类型的数组实例分析

使用ionic切换页面卡顿的解决方法

评论“基于Vue如何封装分页组件”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新动态

友情链接