zoukankan      html  css  js  c++  java
  • vue-分页组件

    <template>
        <div class="pages-box">
            <div class="page">
                <div class="pagelist">
                  <span class="jump" :class="{disabled:pstart}" @click="`${current_page--}`">上一页</span>
                  <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
                  <span class="ellipsis"  v-show="efont">...</span>
                  <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
                  <span class="ellipsis"  v-show="ebehind">...</span>
    
                  <span :class="{disabled:pend}" class="jump" @click="`${current_page++}`">下一页</span>
                  <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
    
                  <span class="jumppoint">跳转到:</span>
                  <span class="jumpinp"><input type="text" v-model="changePage"></span>
                  <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
                </div>
              </div>
        </div>
    </template>
    
    <script>
        export default{
            name:'pages',
            data(){
                return{
                    current_page: 1, //当前页
                    pages: 50, //总页数
                    changePage:'',//跳转页
                    nowIndex:0
                }
          },
          computed:{
            show:function(){
                 return this.pages && this.pages !=1
            },
            pstart: function() {
                return this.current_page == 1;
            },
            pend: function() {
                return this.current_page == this.pages;
            },
            efont: function() {
                if (this.pages <= 7) return false;
                return this.current_page > 5
            },
            ebehind: function() {
                if (this.pages <= 7) return false;
                var nowAy = this.indexs;
                return nowAy[nowAy.length - 1] != this.pages;
            },
            indexs: function() {
                var left = 1,
                 right = this.pages,
                 ar = [];
                if (this.pages >= 7) {
                     if (this.current_page > 5 && this.current_page < this.pages - 4) {
                           left = Number(this.current_page) - 3;
                           right = Number(this.current_page) + 3;
                     } else {
                           if (this.current_page <= 5) {
                             left = 1;
                             right = 7;
                           } else {
                             right = this.pages;
    
                             left = this.pages - 6;
                           }
                     }
                }
                while (left <= right) {
                     ar.push(left);
                     left++;
                }
                return ar;
            },
        },
          methods: {
            jumpPage: function(id) {
                  this.current_page = id;
            },
          },
    
    }
    </script>
    
    <style scoped lang="less">
        .page {
          font-weight: 900;
          height: 40px;
          text-align: center;
          color: #888;
          margin: 20px auto 0;
          position: absolute;
          bottom: 20px;
          right: 40px;
        }
    
        .pagelist {
          font-size: 0;
          height: 50px;
          line-height: 50px;
        }
    
        .pagelist span {
          font-size: 14px;
        }
        .pagelist .jump:hover{
            background: #ec6538;
            color: #fff;
        }
        .pagelist .jump {
          transition: 0.3s;
          border:1px solid #ec6538;
          padding: 5px 8px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          cursor: pointer;
          margin-left: 5px;
        }
    
        .pagelist .bgprimary {
          cursor: default;
          color: #fff;
          background: #ec6538;
          transition: 0.3s;
        }
    
        .jumpinp input {
          width: 55px;
          height: 26px;
          font-size: 13px;
          border: 1px solid #ccc;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          text-align: center;
        }
    
        .ellipsis {
          padding: 0px 8px;
        }
    
        .jumppoint {
          margin-left: 30px;
        }
    
        .pagelist .gobtn {
          font-size: 12px;
        }
    
        .bgprimary {
          cursor: default;
          color: #fff;
          background: #337ab7;
          border-color: #337ab7;
        }
        .pagelist .jump.disabled{
          pointer-events: none;
          background: #ddd;
          border-color: #ddd;
        }
    
    
    </style>
  • 相关阅读:
    希腊字母写法
    The ASP.NET MVC request processing line
    lambda aggregation
    UVA 10763 Foreign Exchange
    UVA 10624 Super Number
    UVA 10041 Vito's Family
    UVA 10340 All in All
    UVA 10026 Shoemaker's Problem
    HDU 3683 Gomoku
    UVA 11210 Chinese Mahjong
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/8951128.html
Copyright © 2011-2022 走看看