zoukankan      html  css  js  c++  java
  • vue 2.0 在普通html页面的分页

    CSS部分

    /* 分页样式 */
    .page {
        font-weight: 900;
        height: 40px;
        text-align: center;
        color: #888;
        margin: 20px auto 0;
        background: #f2f2f2;
        moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
      }
    
      .pagelist {
        font-size: 0;
        background: #fff;
        height: 50px;
        line-height: 50px;
      }
    
      .pagelist span {
        font-size: 12px;
      }
    
      .pagelist .jump {
        /* border: 1px solid #ccc; */
        padding: 2px 3px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 5px;
      }
    
      .pagelist .bgprimary {
        cursor: default;
        color: #fff;
        background: #337ab7;
        border-color: #337ab7;
      }
    
      .jumpinp input {
         35px;
        height: 20px;
        font-size: 12px;
        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 {}
    
      .bgprimary {
        cursor: default;
        color: #fff;
        background: #337ab7;
        border-color: #337ab7;
      }
    

    html部分

    <div>
                    <div class="page"  v-show="show">
                      <div class="pagelist">
                        <span class="jump"v-show="current_page>1" @click="pre()">上一页</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="efont&&current_page<pages-4">...</span>
    
                        <span class="jump" @click="next()">下一页</span>
                        <span v-show="current_page<pages-1" class="jump" 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>

    js部分 

    var app = new Vue({
      el: '#app',
      data: {
          pages: 50, // 总页数
          current_page: 1, // 当前页
          changePage: '', // 跳转页
      },
      computed: {
          show: function() {
              return this.pages && this.pages != 1
          },
          efont: function() {
          if (this.pages <= 7) return false;
          return this.current_page > 5
          },
          indexs: function() {
          var left = 1;
              var right = this.pages;
              var 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: {
          // 上一页
          pre() {
              this.current_page--;
          },
          // 下一页
          next() {
              this.current_page++;
          },
          // 跳转页面
          jumpPage: function(id) {
              this.current_page = id;
          },
    
      },
    })
    

      

  • 相关阅读:
    Notes about "Exploring Expect"
    Reuse Sonar Checkstyle Violation Report for Custom Data Analysis
    Eclipse带参数调试的方法
    MIT Scheme Development on Ubuntu
    Manage Historical Snapshots in Sonarqube
    U盘自动弹出脚本
    hg的常用配置
    Java程序员的推荐阅读书籍
    使用shared memory 计算矩阵乘法 (其实并没有加速多少)
    CUDA 笔记
  • 原文地址:https://www.cnblogs.com/lml2017/p/13267470.html
Copyright © 2011-2022 走看看