Vue封装分页组件

来源：互联网发布：淘宝助理5.6.6.0 编辑：程序博客网时间：2024/06/02 05:15

原文地址：http://www.cnblogs.com/jh007/p/6185599.html

css样式文件 pagination.css

ul, li {    margin: 0px;    padding: 0px;}.page-bar {    -webkit-touch-callout: none;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}.page-button-disabled {    color:#ddd !important;}.page-bar li {    list-style: none;    display: inline-block;}.page-bar li:first-child > a {    margin-left: 0px;}.page-bar a {    border: 1px solid #ddd;    text-decoration: none;    position: relative;    float: left;    padding: 6px 12px;    margin-left: -1px;    line-height: 1.42857143;    color: #337ab7;    cursor: pointer;}.page-bar a:hover {    background-color: #eee;}.page-bar .active a {    color: #fff;    cursor: default;    background-color: #337ab7;    border-color: #337ab7;}.page-bar i {    font-style: normal;    color: #d44950;    margin: 0px 4px;    font-size: 12px;}

js文件 pagination.js

(function (vue) {    // html模板信息    var template = '<div class="page-bar"> \                     <ul> \                       <li><a class="{{ setButtonClass(0) }}" v-on:click="prvePage(cur)">上一页</a></li> \                       <li v-for="index in indexs"  v-bind:class="{ active: cur == index }"> \                          <a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a> \                       </li> \                       <li><a class="{{ setButtonClass(1) }}" v-on:click="nextPage(cur)">下一页</a></li> \                     </ul> \                   </div>'    var pagination = vue.extend({        template: template,        props: ['cur', 'all'],        computed: {            indexs: function () {                var left = 1                var right = this.all                var ar = []                if (this.all >= 11) {                    if (this.cur > 5 && this.cur < this.all - 4) {                        left = this.cur - 5                        right = this.cur + 4                    } else {                        if (this.cur <= 5) {                            left = 1                            right = 10                        } else {                            right = this.all                            left = this.all - 9                        }                    }                }                while (left <= right) {                    ar.push(left)                    left++                }                if (ar[0] > 1) {                    ar[0] = 1;                    ar[1] = -1;                }                if (ar[ar.length - 1] < this.all) {                    ar[ar.length - 1] = this.all;                    ar[ar.length - 2] = 0;                }                return ar            }        },        methods: {            // 页码点击事件            btnClick: function (data) {                if (data < 1) return;                if (data != this.cur) {                    this.cur = data                    this.$dispatch('btn-click', data)                }            },            // 下一页            nextPage: function (data) {                if (this.cur >= this.all) return;                this.btnClick(this.cur + 1);            },            // 上一页            prvePage: function (data) {                if (this.cur <= 1) return;                this.btnClick(this.cur - 1);            },            // 设置按钮禁用样式            setButtonClass: function (isNextButton) {                if (isNextButton) {                    return this.cur >= this.all ? "page-button-disabled" : ""                }                else {                    return this.cur <= 1 ? "page-button-disabled" : ""                }            }        }    })    vue.Pagination = pagination})(Vue)

使用方法如下

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <title></title>    <script src="vue.js"></script>    <link href="pagination.css" rel="stylesheet" />    <script src="pagination.js"></script></head><body>    <div id="app">        <vue-pagination :cur.sync="cur" :all.sync="all" v-on:btn-click="listen"></vue-pagination>        <p>{{msg}}</p>    </div>    <script type="text/javascript">        var app = new Vue({            el: '#app',            data: {                // 当前页码                cur: 1,                // 总页数                all: 100,                msg: ''            },            components: {                // 引用组件                'vue-pagination': Vue.Pagination            },            methods: {                listen: function (data) {                    // 翻页事件                    this.msg = '当前页码：' + data                }            }        })    </script></body></html>

测试效果

Demo下载：https://github.com/yangchunjian/pagedemo

阅读全文

0 0