请问下这种Vue分页器怎么实现

img


有点击双箭头跳转到首页/末页的功能，还有页码输入跳转。能提供代码最好了，😄感谢

可以用第三方库UI组件库实现么

可以用element
https://blog.csdn.net/felicity_zll/article/details/115699325

现在一般都是直接使用ui组件库去做，像elementUI，iviewui，antdv
可以只是用其中的分页组件
https://element.eleme.cn/#/zh-CN/component/pagination
http://v4.iviewui.com/components/page
https://1x.antdv.com/components/pagination-cn/

请参考vue+element-ui实现列表分页功能https://blog.csdn.net/SmartJunTao/article/details/107842638

elementUI中有组件的



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pagination {
            padding: 0 20px;
            white-space: nowrap;
        }

        .left-color {
            color: #ccc;
            font-size: 16px;

        }

        .cursor {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="pagination">
        <span onclick="pa.pre()" class="left-color cursor">|&lt;</span>&nbsp;
        <span onclick="pa.first()" class="left-color cursor">首页</span>&nbsp;
        <span onclick="pa.pre()" class="left-color cursor">&lt;&lt;</span>&nbsp;
        <span onclick="pa.pre()" class="left-color cursor">上一页</span>&nbsp;
        <span onclick="pa.next()" class="left-color cursor">下一页</span>&nbsp;
        <span onclick="pa.next()" class="left-color cursor">&gt;&gt;</span>&nbsp;
        <span onclick="pa.last()" class="left-color cursor">末页</span>&nbsp;
        <span onclick="pa.next()" class="left-color cursor">&gt;|</span>&nbsp;
        &emsp;
        <span id="curretPage">页码:&nbsp;1&nbsp;页</span>&nbsp;/&nbsp;
        <span id="totalPage"> 共&nbsp;1&nbsp;页 </span>&nbsp;|&nbsp;
        <span><input id="jump" onchange="pa.change(this)" style="width: 20px;" type="text"></span>
        <span onclick="pa.jump()" class="cursor">跳转</span>&nbsp;|&nbsp;
        <span onclick="pa.load()" class="cursor">刷新</span>
    </div>
    <script>


        class Page {
            constructor(obj) {
                this.curretPage = obj.curretPage;
                this.totalPage = obj.totalPage;
                this.total = obj.total;
                this.current = obj.current;
                this.jump = obj.jump;
            }
            init() {
                this.totalPage.innerHTML = `共&nbsp;${this.total}&nbsp;页`
                this.curretPage.innerHTML = `页码:&nbsp;${this.current}&nbsp;页`
                this.jump.value = this.current
            }
            // 首页
            first() {
                this.current = 1
                this.init()
            }
            // 上一页
            pre() {
                if (this.current > 1) {
                    this.current--
                    this.init()
                }

            }
            // 下一页
            next() {
                if (this.current < this.total) {
                    this.current++
                    this.init()
                }
            }
            // 最后一页
            last() {
                this.current = this.total
                this.init()
            }
            // 变化
            change(val) {
                console.log(val.value, '===val')
                this.current = val.value
            }
            // 跳转
            jump() {
                this.init()
            }
            // 刷新
            load() {
                this.init()
            }
        }

        let pa = new Page({
            curretPage: document.getElementById('curretPage'),
            totalPage: document.getElementById('totalPage'),
            jump: document.getElementById('jump'),
            total: 100,
            current: 1,
        })

        pa.init()

    </script>

</body>

</html>

现在大大小小的公司都是用组件库的，你可以用elementui，antd等等

利用分页器即可


<div class="block">
    <span class="demonstration">完整功能</span>
   <el-pagination
              :page-size.sync="pageSize"
              :current-page.sync="currentPage"
              :page-sizes="[5,10,15]"
              layout="total,sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :page-count="5"
              :total="total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
  data() {
      return {
        pagesize:5,
       currentPage: 1,
       total: 0,
      };
    },
methods:{
// 分页相关
            //跳转或当前页改变
            handleCurrentChange(current) {
                this.selectByPage(current, this.pageSize,条件.....);
            },
            //下拉框页数改变
            handleSizeChange(val) {
                this.selectByPage(this.currentPage, val,条件.....);
            },
selectByPage(pageNo,pageSize,条件.....){}
},
created:{
this.selectByPage(1,5)
}
  }
</script>