前端开发 Vue.js 分页组件

vue移动前端开发实战|vue前端开发招聘|vue前端框架开发文档

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>前端 主流web开发框架有哪些:vue分页</title>
    <style>
        a {
            display: inline-block;
            margin: 0 5px;
            height: 20px;
            color: #666;
            background: #eee;
            text-decoration: none;
            padding: 0 10px;
            text-align: center;
            line-height: 20px;
            background: #ccc
        }
        a.active {
            background: #008B8B;
            color: #fff
        }
    </style>
</head>
<body>
    <div id=”app”>
        <page-component :pageCount=”page.pageCount” :pagesize=”page.pageSize” :pageIndex=”page.pageIndex” @getdata=’getData’ @get=”getPage”></page-component>
    </div>
</body>
<script src=”//cdn.bootcss.com/vue/2.1.10/vue.js”></script>
<script>
    Vue.component(‘page-component’, {
        props: [‘pagecount’, ‘pageindex’, ‘pagesize’],
        data() {
            return {
                current: this.pageindex,
                showItem: this.pagesize,
                allPage: this.pagecount
            }
        },
        template: `
<div class=”page”>
<a href=”javascript:” v-show=”current != 1″ @click=”current– && goto(current)”>上一页</a>
<a href=”javascript:” v-for=”index in pages” :class=”{active:(index == current)}” @click=”goto(index)” :key=”index”>{{index}}</a>
<a href=”javascript:” v-show=”current != allPage && allPage!= 0″ @click=”current++ && goto(current)”>下一页</a>
</div>
`,
        computed: {
            pages: function () {
                var pag = [];
                if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem, this.allPage);
                    while (i) {
                        pag.unshift(i–);
                    }
                }
                else { //当前页数大于显示页数了
                    var middle = this.current – Math.floor(this.showItem / 2),//从哪里开始
                        i = this.showItem;
                    if (middle > (this.allPage – this.showItem)) {
                        middle = (this.allPage – this.showItem) + 1
                    }
                    while (i–) {
                        pag.push(middle++);
                    }
                }
                return pag
            }
        },
        methods: {
            goto: function (index) {
                this.current = index;
                this.$emit(‘get’, index)
                this.$emit(‘getdata’)
            }
        }
    });
    new Vue({
        el: ‘#app’,
        data: {
            page: {
                pageCount: 10, //总页数
                pageIndex: 1, //默认页
                pageSize: 5 //每次显示页数
            }
        },
        methods: {
            getPage: function (inx) {
                this.page.pageIndex = inx;
            },
            getData: function () {
                alert(“这里面写请求第” + this.page.pageIndex + “页数据”);
                //这里面执行ajax请求的分页信息
            }
        }
    })
</script>
</html>

前端快速开发框架|vue 前端开发工具|前端开发最新框架vue

» 本文来自:前端开发者 » 《前端开发 Vue.js 分页组件》
» 本文链接地址:https://www.rokub.com/4758.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!