如何将Vue自定义翻页组件方法改写为长尾词？

本文共计657个文字，预计阅读时间需要3分钟。

原文：本文字例为大家分享了vue自定义翻页组件的具体代码，供大家参考，具体内容如下+效果图如下：

1、在components目录下建立page.vue文件

templatediv class=pagination!-- -- 上 --!button>上一页!-- -- 下 --!button>下一页

修改后：

1、在components目录下创建page.vue文件

template

本文实例为大家分享了vue自定义翻页组件的具体代码，供大家参考，具体内容如下

效果图如下：

1、在components建立page.vue文件

<template>     <div class="pagination">         <!-- 上 -->         <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">             上一张         </button>         <button                 v-if="startNumAndEndNum.start > 1"                 @click="getPageNo(1)"                 :class="{ active: pageNo == 1 }"         >1         </button>         <button                 v-if="startNumAndEndNum.start > 2"                 @click="getPageNo(pageNo - continues)"         >···         </button>         <!-- 中间部分 -->         <button                 v-for="(page, index) in generateMiddlePage"                 :key="index"                 @click="getPageNo(page)"                 :class="{ active: pageNo == page }">             {{ page }}         </button>           <!-- 下 -->         <button                 v-if="startNumAndEndNum.end < totalPage - 1"                 @click="getPageNo(pageNo +continues)"         >···         </button>         <button                 v-if="startNumAndEndNum.end < totalPage"                 @click="getPageNo(totalPage)"                 :class="{active:pageNo==totalPage}">             {{ totalPage }}         </button>         <button                 :disabled="pageNo == totalPage"                 @click="getPageNo(pageNo + 1)">             下一张         </button>     </div> </template>   <script>       export default {         name: "Pagination",         props: ["pageNo", "pageSize", "total", "continues"],         computed: {             //计算出总页数             totalPage() {                  //向上取整                 return Math.ceil(this.total / this.pageSize);             },                  //计算出页码的起始和结束数字             startNumAndEndNum() {                 const {continues, pageNo, totalPage} = this;                     //先定义两个变量存储起始数字与结束数字                 let start = 0,                     end = 0;                 if (continues > totalPage) {                     start = 1;                     end = totalPage;                 } else {                           //起始数字                     start = pageNo - parseInt(continues / 2);                          //结束数字                     end = pageNo + parseInt(continues / 2);                                          if (start < 1) {                         start = 1;                         end = continues;                     }                                          if (end > totalPage) {                         end = totalPage;                         start = totalPage - continues + 1;                     }                 }                 return {start, end};             },             //过滤掉小于起始页的页码             generateMiddlePage() {                 let arr = [];                 //避免页面中同时使用 v-for和v-if                  for (let i = 0; i <= this.startNumAndEndNum.end; i++) {                     arr.push(i)                 }                 let temp = arr.filter(item => {                     return item >= this.startNumAndEndNum.start                 })                 return temp             }         },         methods: {             getPageNo(val) {                 //自定义事件子页面向父页面传参，计算属性值                 this.$emit('getPageNo', val)             },         }     }; </script>   <style lang="scss" scoped>     .pagination {         text-align: center;         width: 70px;         button {             margin:12px 0px 0px 0px;             background-color: #fff;             color: #409eff;             border:1px solid #409eff;             outline: none;             border-radius: 2px;             padding: 0 4px;             vertical-align: top;             display: inline-block;             font-size: 14px;             width: 60px;             height: 38px;             line-height: 38px;             cursor: pointer;             box-sizing: border-box;             text-align: center;               &[disabled] {                 color: #c0c4cc;                 cursor: not-allowed;                  border:1px solid #ddd;             }             &:hover{               background: #ddeffb;             }             &[disabled]:hover{ background: none;}             &.active {                 cursor: not-allowed;                 background-color: #409eff;                 color: #fff;             }         }     } </style>

2、在页面中引入组件

<page         :pageNo="pageNo"         :pageSize="pageSize"         :total="pageTotal"         :continues="5"  //超过5时中建按钮有省略号         @getPageNo="getPageNo"         />   import page from '@/components/page'   data(){    return{      pageNo:1,      pageSize:1,       pageTotal:5,    } }   //方法中 methods:{      getPageNo(pageNo){         this.pageNo=pageNo       },   }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。