H5W3
当前位置:H5W3 > 其他技术问题 > 正文

用vue做一个分页组件的思路有什么好的思路吗?

其实组件的分页的问题和用什么框架没有关系,分页组件的需求如同,目前开发到一半,觉得目前的方式逻辑有点复杂,想请教大牛们有什么好的思路没??
目前我的思路是该组件除去上一页和下一页是中间是固定七个按钮,点击第四或者第五个按钮,重新push数据渲染,但是这样的话感觉分的情况太多了图片描述

回答:

正好这几天写了一个,分享一下,prop接收三个参数:当前第几页,总共多少个,每页多少个。对外暴露一个切换页面的事件。

Vue.component('paging', {
    template: '#ComPaging',
    props: ['now', 'total', 'each'],    // 当前第几页, 总共多少个数据, 每页显示多少个
    data: function() {
        return {
            turnTo: this.now
        }
    },
    computed: {
        // 计算总共有多少页
        page_all: function() {
            return Math.ceil(this.total / this.each);
        }
    },
    methods: {
        // 直接跳到第几页
        turnPage: function(page) {
            page = parseInt(page);
            if (page >= 1 && page <= this.page_all) {
                this.changePage(page);
            } else {
                this.changePage(1);
            }
        },
        // 切换页码
        changePage: function(page) {
            if (this.now != page) {
                this.now = page;
                this.turnTo = page;
                this.$dispatch('paging-change');
            }
        },
        changeEach: function() {
            this.now = 1;
            this.$dispatch('paging-change');
        },
        prev: function() {
            if (this.now > 1) {
                this.changePage(this.now - 1);
            }
        },
        next: function() {
            if (this.now < this.page_all) {
                this.changePage(this.now + 1);
            }
        }
    }
});
<template id="ComPaging">    
    <div class="ComPaging noselect clear">
        每页显示
        <select v-model="each" @change="changeEach()">
            <option value="10">10条</option>
            <option value="20">20条</option>
            <option value="30">30条</option>
        </select>
        
        <div class="page_flip">
            <span @click="prev()">&lt;</span>
            <span v-if="page_all < 11" v-for="item in page_all" :class="{on: now == (item+1)}" @click="changePage(item+1)">{{ item + 1 }}</span>
    
            <template v-if="page_all >= 11">
                <span :class="{on: now == 1}" @click="changePage(1)">1</span>
                <span v-if="now - 3 > 1">…</span>
    
                <span v-if="now - 2 > 1" @click="changePage(now - 2)">{{ now - 2 }}</span>
                <span v-if="now - 1 > 1" @click="changePage(now - 1)">{{ now - 1 }}</span>
                <span class="on" v-if="now != 1 && now != page_all">{{ now }}</span>
                <span v-if="now + 1 < page_all" @click="changePage(now + 1)">{{ now + 1 }}</span>
                <span v-if="now + 2 < page_all" @click="changePage(now + 2)">{{ now + 2 }}</span>
    
                <span v-if="now + 3 < page_all">…</span>
                <span :class="{on: now == page_all}" @click="changePage(page_all)">{{ page_all }}</span>
            </template>
            <span @click="next()">&gt;</span>
        </div>
        
        <input type="text" placeholder="跳转到第几页" v-model="turnTo" @keyup.enter="turnPage(turnTo)" style="display: none;">
    </div>
</template>

本文地址:H5W3 » 用vue做一个分页组件的思路有什么好的思路吗?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址