[VueJS] 一个Vue.js的简易分页组件

直接贴代码.

组件Js代码

    (function(){
        var template = '<div class="page-bar">'+
                    '<ul class="bar">'+
                    '<li><button ripple="circle" v-bind:disabled="cur===1" @click="btnClick(cur-1)">上一页</button></li>'+
                    '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+
                      '<a ripple="circle" v-on:click="btnClick(index)">{{ index }}</a>'+
                      '</li>'+
                      '<li ><button ripple="circle" v-bind:disabled="cur===all" @click="btnClick(cur+1)">下一页</button></li>'+
                      '<li><button ripple="circle" v-bind:disabled="cur===all" @click="callback(all)">共<i>{{all}}</i>页</button></li>'+
                    '</ul>'+
                  '</div>'
        
        var navBar = Vue.extend({
            template: template,
            props: {
              cur: {
                type: [String, Number],
                required: true
              },
              all: {
                type: [String, Number],
                required: true
              },
              callback: {
                default() {
                  return function callback() {
                    
                  }
                }
              }
            },
            computed: {
              indexs() {
                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 ++
                }   
                return ar
              }
            },
            methods: {
              btnClick(page) {
                if (page != this.cur) {
                  this.callback(page)
                }
              }
            }
        })
        
        window.Vnav = navBar
        
    })()

VM代码:

    var vm = new Vue({
          el: '#app',
          data:{
            cur: 1,
            all: 8,
            msg: ''
          },
          components:{
            'vue-nav': Vnav
          },
          methods:{
            callback(data) {
              this.cur = data;//返回的data就是改变后的当前页码
              //这里可使用页码从服务器拉取数据
            }
          }
    })
  

Template代码:


    <div id="app">
       <vue-nav :cur="cur" :all="all" :callback="callback"></vue-nav>
    </div>
    

6 条评论

  1. 野生 web developer

    博主请问 应该在哪里写与后台通讯的代码合适 小白一个看不太懂还望加个小注释ヾ(≧∇≦*)ゝ

    1. Mr.D

      @野生 web developer 啊这个啊,后台通讯就在Vm > methods > callback 里写 ,
      在组件里发生点击事件后子组件会向父 VM 返回一个叫data的数据,它就是当前的页码,你可以用这个页码去请求服务器。
      例如:

       callback:function(data) {
                      var _self = this;
                      _self.cur = data;
                      $.getJSON('simple.php?page='+data,function (res) {
                          if (res.erron === "0"){
                              _self.somelist = res.response;
                          }
                      })
                  }
      

  2. Lock

    从v2看到博主的度盘直链程序过来的,非常需要这个技术。能否开源?或者付费使用都可以,希望您能联系我。 QQ:MjA3Njk2MDYx

    1. Mr.D

      @Lock 不知道你说的是哪方面的,如果说你想要的只是生成直链的方法的话Github上就有现成的。

      1. Lock

        @Mr.D 我是指雷云这个程序。

  3. rer

    OωO不错 还有颜文字表情 代码我肯定看不懂的啦 站中间插一脚还是要的啦

发表评论