zoukankan      html  css  js  c++  java
  • 基于Vue封装分页组件

    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;
    }
    View Code

    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)
    View Code

    使用方法如下

    <!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下载

  • 相关阅读:
    海康威视复赛题
    [转] A*寻路算法C++简单实现
    [转]程序进行性能分析工具gprof使用入门
    [转]KMP 算法
    boolalpha的用法和作用
    python与数据科学有多少“暧昧情事”?14个Q&A告诉你
    Python来袭,教你用Neo4j构建“复联4”人物关系图谱!
    深入理解BERT Transformer ,不仅仅是注意力机制
    Python开发者年度调研,结果出乎意料!
    R和Python,对抗or融合?
  • 原文地址:https://www.cnblogs.com/jh007/p/6185599.html
Copyright © 2011-2022 走看看