分享一个 基于vuejs的分页组件 ,可用于苹果cms对接vuejs网页版

发布于 2021-10-09 21:31:06

最近在做 苹果cms v10 对接vuejs 前端分离项目,这种前后端分离网站的好处就是,不会被挂马所侵扰,后台和前端完全分开,数据通过api传输,原理和 对接app一样。
后台端去掉所有前台页面,前端网站纯静态运行,任何一方被挂马都是无法施展其目的... 好了扯得有点远了。

这是我实际项目中应用的例子,用于常见的vuejs列表分页,老铁们可能更具需要调整

效果

image.png

publicPagination.vue

<template>
  <div class="el-pagination is-background" style="margin-top: 20px;">
     <button type="button" @click="oNprev" class="btn-prev"  :disabled="number <= 1"><i class="el-icon el-icon-arrow-left"></i></button>
     <ul class="el-pager">
        <a href="javascript:;" class="number" @click="oNpage(1)" v-if="page.index >= 5">1</a>
        <a class="el-icon more btn-quicknext el-icon-more" v-if="page.index >= 5"></a>
        <a class="number " 
        :class="key == page.index ? 'active' :''" 
        v-for="key in indexs" :key="key"
        @click="oNpage(key)"
        >{{key}}</a>
        <a class="el-icon more btn-quicknext el-icon-more" v-if="page.index <= 5"></a>
        <a class="number" @click="oNpage(page.pagecount)" >{{page.pagecount}}</a>
        </ul>
      <button type="button" @click="oNnext" class="btn-next" :disabled="number >= page.pagecount"><i class="el-icon el-icon-arrow-right"></i></button>
   </div>
</template>

<script>
// vuejs高级分页组件
   export default {
      props: {
         page:{
            default :{}
         }
      },
      data(){
         return{
            number:0
         }
      },
      computed: {
         indexs: function(){
            // 定义开始的数字
            var left = 1;
            // 定义结束的数字
            var right = this.page.pagecount

            // 存储返回值
            var ar = [];

            // 前提条件:每次都显示condition条页码
            // 最好是个单数
            var condition = 5;

            // 向上取整->就能获取到中间的数字
            var middle = Math.ceil(condition/2);

            // 要分清情况
            //1、在最左边或者在middle的前面
            //2、在中间
            //3、最右边的情况

            // 当总页数超过condition时,需要判断分页情况
            if(this.page.pagecount >= condition){    
                // 中间的时候
                // 左右都加上(middle-1)
                if(this.number > middle && this.number < this.page.pagecount - (middle-1)){
                        left = this.number - (middle-1)
                        right = this.number + (middle-1)
                }else{
                    //最左边或者在condition的中间
                    if(this.number <= middle){
                        left = 1
                        right = condition
                    // 最右边的情况
                    // 结束是总条数,开始是condition减去1
                    }else{
                        right = this.page.pagecount
                        left = this.page.pagecount -(condition-1)
                    }
                }
            }
            while (left <= right){
                ar.push(left)
                left ++
            }
        return ar
        }
      },
      methods: {
         oNpage(key){
            this.number = key;
            this.$emit('showCityName',{key:this.number})
         },
         oNnext(){
            var key = this.number + 1;
            this.oNpage(key)
         },
         oNprev(){
            var key = this.number - 1;
            this.oNpage(key)
         }
      },
      watch: {
         page: function(e) {
            
         }
      },
   }
</script>

<style>
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}
.el-pagination {
    display: flex;
    justify-content: center;
}


.el-pager, .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev {
    padding: 0;
}
.el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager a.disabled {
    color: #c0c4cc;
}
.el-pager, .el-pager a {
    vertical-align: top;
    margin: 0;
    display: inline-block;
}
.el-pager a {
    padding: 0 4px;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    text-align: center;
}
.el-pager a.active+a {
    border-left: 0;
}
.el-pagination.is-background .el-pager a:not(.disabled):hover {
    color: #eb4a76
}
.el-pagination.is-background .el-pager a:not(.disabled).active {
    background-color: #eb4a76;
    color: #fff
}
</style>

使用方法

<template>
   <div>
     <publicPagination :page="page" @showCityName="pageCity"></publicPagination>
   </div>
</template>
 <script>
 import publicPagination from "@/components/modules/publicPagination";
 export default {
   components: { publicPagination },
   data(){
      return{
          page:{
            "index" : 1, // 当前页
            "pagecount" : 50, // 总页数
            "total" : 0 // 总数量
          }  
      }
  }
 </script>
0 条评论

发布
问题