vue手把手教学封装分页器

最新推荐文章于 2025-01-14 16:42:13 发布

原创最新推荐文章于 2025-01-14 16:42:13 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue实战专栏收录该内容

4 篇文章

订阅专栏

本文详细描述了在Vue项目中如何使用模板、数据绑定和计算属性创建一个动态分页组件，包括上一页、下一页按钮的逻辑处理，以及使用Less进行样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue中前台

<template>
    <div>
        <h6>"start":{{ pageStartEnd.start }},"当前页"：{{ pagenow }}"end":{{ pageStartEnd.end }}</h6>
        <!-- 如果点击上一页按钮，当前页减去1，并且如果当前页等于1后，禁止点击(下面我为disabled添加类名) -->
        <button @click="pagenow--" :disabled="pagenow == 1">上一页</button>
        <!-- 如果起始页大于1，展示，点击它，就会将当前页变成1，逻辑书写下面 -->
        <button v-show="pageStartEnd.start > 1" @click="clickPage(1)">1</button>
        <!-- 如果起始页大于2，才会展示... -->
        <button v-show="pageStartEnd.start > 2">...</button>
        <!-- 遍历end页，page>=start才会展示 -->
        <button :class="{ active: pagenow == page }" v-for="(page, index) in pageStartEnd.end"
            v-show="page >= pageStartEnd.start" @click="clickPage(page)">{{ page }}</button>
        <!-- 如果end小于最后一页减去1就展示 -->
        <button v-show="pageStartEnd.end < totalpage - 1">....</button>
        <!-- 如果end小于最后一页，才会展示，点击将会把当前页替换成最后一页 -->
        <button v-show="pageStartEnd.end < totalpage" @click="clickPage(totalpage)">{{ totalpage }}</button>
        <!-- 如果点击下一页，页码增加，当页码等于总页码数就禁用 -->
        <button @click="pagenow++" :disabled="pagenow == totalpage">下一页</button>
        <button>共{{ totalpage }}页</button>
    </div>
</template>

2.vue中js页面

export default {
    name: 'study',

    data() {
        return {
            // 当前页数
            pagenow: 3,
            //  一页的数据
            pagesize: 3,
            //  总共数据
            totaldata: 78,
            // 连续的页数
            continues: 5,


        };
    },

    mounted() {

    },

    methods: {
        clickPage(page) {
            this.pagenow = page
        }
    },
    computed: {
        // 总共的页数
        totalpage() {
            return Math.ceil(this.totaldata / this.pagesize)
        },
        // 声明起始和结束的页码函数
        pageStartEnd() {
            let start, end = 0
            //  如果总页数小于连续页数
            if (this.totalpage < this.continues) {
                start = 1
                end = this.totalpage

            } else {
                // 下面总页数大于连续页数
                start = this.pagenow - parseInt(this.continues / 2)
                end = this.pagenow + parseInt(this.continues / 2)

                // 当起始页数小于1
                if (start < 1) {
                    start = 1
                    //  1 2 3 4 5 
                    end = this.continues
                }
                // 当end页大于了总页数
                if (end > this.totalpage) {
                    end = this.totalpage;
                    start = this.totalpage - this.continues + 1
                }
            }
            return { start, end }
        }
    }
};

3.vue中less样式

div {

    text-align: center;

    button {
        width: 50px;
        height: 30px;

        &[disabled] {
            background: red;
        }
    }

    .active {
        background: green;
    }
}

4.源码展示

<template>
    <div>
        <h6>"start":{{ pageStartEnd.start }},"当前页"：{{ pagenow }}"end":{{ pageStartEnd.end }}</h6>
        <!-- 如果点击上一页按钮，当前页减去1，并且如果当前页等于1后，禁止点击(下面我为disabled添加类名) -->
        <button @click="pagenow--" :disabled="pagenow == 1">上一页</button>
        <!-- 如果起始页大于1，展示，点击它，就会将当前页变成1，逻辑书写下面 -->
        <button v-show="pageStartEnd.start > 1" @click="clickPage(1)">1</button>
        <!-- 如果起始页大于2，才会展示... -->
        <button v-show="pageStartEnd.start > 2">...</button>
        <!-- 遍历end页，page>=start才会展示 -->
        <button :class="{ active: pagenow == page }" v-for="(page, index) in pageStartEnd.end"
            v-show="page >= pageStartEnd.start" @click="clickPage(page)">{{ page }}</button>
        <!-- 如果end小于最后一页减去1就展示 -->
        <button v-show="pageStartEnd.end < totalpage - 1">....</button>
        <!-- 如果end小于最后一页，才会展示，点击将会把当前页替换成最后一页 -->
        <button v-show="pageStartEnd.end < totalpage" @click="clickPage(totalpage)">{{ totalpage }}</button>
        <!-- 如果点击下一页，页码增加，当页码等于总页码数就禁用 -->
        <button @click="pagenow++" :disabled="pagenow == totalpage">下一页</button>
        <button>共{{ totalpage }}页</button>
    </div>
</template>

<script>
export default {
    name: 'study',

    data() {
        return {
            // 当前页数
            pagenow: 3,
            //  一页的数据
            pagesize: 3,
            //  总共数据
            totaldata: 78,
            // 连续的页数
            continues: 5,


        };
    },

    mounted() {

    },

    methods: {
        clickPage(page) {
            this.pagenow = page
        }
    },
    computed: {
        // 总共的页数
        totalpage() {
            return Math.ceil(this.totaldata / this.pagesize)
        },
        // 声明起始和结束的页码函数
        pageStartEnd() {
            let start, end = 0
            //  如果总页数小于连续页数
            if (this.totalpage < this.continues) {
                start = 1
                end = this.totalpage

            } else {
                // 下面总页数大于连续页数
                start = this.pagenow - parseInt(this.continues / 2)
                end = this.pagenow + parseInt(this.continues / 2)

                // 当起始页数小于1
                if (start < 1) {
                    start = 1
                    //  1 2 3 4 5 
                    end = this.continues
                }
                // 当end页大于了总页数
                if (end > this.totalpage) {
                    end = this.totalpage;
                    start = this.totalpage - this.continues + 1
                }
            }
            return { start, end }
        }
    }
};
</script>

<style lang="less" scoped>
div {

    text-align: center;

    button {
        width: 50px;
        height: 30px;

        &[disabled] {
            background: red;
        }
    }

    .active {
        background: green;
    }
}
</style>