Vue.js组件实现分页

最新推荐文章于 2024-04-26 17:54:13 发布

代码搬砖

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量896

点赞数 3

文章标签： vue.js 前端分页

本文链接：https://blog.csdn.net/qq_38667538/article/details/82114310

版权

通过vue.js组件实现的一个前端分页插件

index.html文件

<!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, maximum-scale=1, user-scalable=no">
    <title>Vue分页组件</title>
    <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
</head>
<body>
    <div id="app" class="text-center" style="margin-top: 200px">
        <navigation :pages="pages" :current.sync="pageNo" @navpage="msgListView"></navigation>
        <p>当前是第<span v-text="pageNo"></span>页</p>
    </div>
    <script type="text/javascript" src="http://www.jq22.com/jquery/vue.min.js"></script>
    <script type="text/javascript" src="js/pagination.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                pageNo: 1,
                pages:15
            },
            methods:{
                msgListView(curPage){
                    //根据当前页获取数据
                    this.pageNo = curPage;
                }
            }
        })
    </script>
</body>
</html>

pagination.js文件

//分页组件
var pageComponent = Vue.extend({
    template: `<nav>
        <ul class="pagination">
            <li :class="{\'disabled\':curPage==1}">
                <a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous" >
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="page in showPageBtn" :class="{\'active\':page==curPage}" >
                <a href="javascript:;" v-if="page" @click="goPage(page)" >{{page}}</a>
                <a href="javascript:;" v-else >...</a>
            <li>
            <li :class="{\'disabled\':curPage==pages}">
                <a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next" >
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>`,
    props: {
        pages: {
            type: Number,
            default: 1,
        },
        current: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            curPage: 1,
        };
    },
    computed: {
        //设置页码
        showPageBtn() {
            let pageNum = this.pages;
            let index = this.curPage;
            let arr = [];
            if (pageNum <= 5) {
                for (let i = 0; i <= pageNum; i++) {
                    arr.push(i);
                }
                return arr;
            }
            if (index <= 2) return [1, 2, 3, 0, pageNum];
            if (index >= pageNum - 1)
                return [1, 0, pageNum - 2, pageNum - 1, pageNum];
            if (index === 3) return [1, 2, 3, 4, 0, pageNum];
            if (index === pageNum - 2)
                return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
            return [1, 0, index - 1, index, index + 1, 0, pageNum];
        }
    },
    methods: {
        goPage(page) {
            if (page != this.curPage) {
                console.log(page);
                this.curPage = page;
                this.$emit('navpage', this.curPage);
            } else {
                console.log('Already in the current page');
            }
        }
    }
});
Vue.component("navigation", pageComponent);

代码搬砖

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Vue.js组件实现分页

通过vue.js组件实现的一个前端分页插件 index.html文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=e
复制链接

扫一扫