欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件

 更新時間:2023年02月23日 09:59:25   作者:BreenCL  
開發(fā)中難免會遇到寬度很窄的列表需要使用分頁器的情況。本文將利用Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件,感興趣的可以了解一下

開發(fā)中難免會遇到寬度很窄的列表需要使用分頁器的情況,這時若使用Element Plus組件的分頁器會導致分頁器內容超出展示的區(qū)域,而Element Plus組件中目前沒有Acro Design那樣小巧的分頁器(Arco Design Vue)如下圖所示,如果再引入一個新的UI組件庫未免導致項目臃腫,所以基于Vue3.x和Element Plus封裝了一個即拿即用的”簡潔模式“分頁器組件以便不時之需

分頁器組件代碼部分:

<!-- (簡潔模式)分頁器組件 -->
<template>
  <div class="smallpagination">
    <!-- 總數(shù)統(tǒng)計 -->
    <span>{{ '共' + total + '條' }}</span>
    <!-- 翻頁 -->
    <div class="smallpagination-pager">
      <!-- 左翻頁 -->
      <el-icon @click="pageTurning('down')" :class="curPage <= 1 ? 'forbid-pageturning' : ''">
        <ArrowLeft />
      </el-icon>
      <!-- 頁碼 -->
      <el-input-number @change="handlePageChange" v-model="pageNum" :min="1" :max="pageTotal" :step-strictly="true"
        :controls="false" />
      <b>{{ '/ ' + pageTotal }}</b>
      <!-- 右翻頁 -->
      <el-icon @click="pageTurning('up')" :class="curPage >= pageTotal ? 'forbid-pageturning' : ''">
        <ArrowRight />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { useAttrs, computed, ref } from 'vue';
import {
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue';

// 接收父組件參數(shù)
const attrs = useAttrs();
// 父組件事件
const em = defineEmits(['handlePageChange']);
// 當前頁
const pageNum = ref(1);
// 父組件傳遞-當前頁碼
const curPage = computed(() => {
  pageNum.value = attrs.curPage;
  return attrs.curPage;
});
// 父組件傳遞-總數(shù)
const total = computed(() => {
  return attrs.total;
});
// 總頁碼數(shù)
const pageTotal = computed(() => {
  return attrs.total > 0 ? Math.ceil(attrs.total / attrs.pageSize) : 1;
});

/* 改變頁碼 */
const handlePageChange = (e) => {
  if (pageTotal.value <= 1) {
    return;
  }
  em('handlePageChange', e);
};
/* 翻頁 */
const pageTurning = (type) => {
  // 向前翻頁
  if (type === 'up') {
    if (curPage.value >= pageTotal.value || pageTotal.value <= 1) {
      return;
    }
    em('handlePageChange', pageNum.value + 1);
  }
  // 向后翻頁
  else {
    if (pageTotal.value <= 1 || curPage.value <= 1) {
      return;
    }
    em('handlePageChange', pageNum.value - 1);
  }
};
</script>

<style lang="less" scoped>
.smallpagination {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;

  >span {
    margin-right: 11px;
    font-size: 14px;
    font-weight: 400;
    color: #4E5969;
    line-height: 21px;
  }

  .smallpagination-pager {
    display: flex;
    align-items: center;

    .el-icon {
      width: 30px;
      height: 30px;
      font-size: 14px;
      color: #4E5969;
      cursor: pointer;

      &:hover {
        background: rgb(247, 248, 250);
        color: #0082ff;
      }
    }

    .forbid-pageturning {
      opacity: 0.4;
      cursor: not-allowed;

      &:active {
        color: #4E5969;
        background: rgb(255, 255, 255);
      }
    }

    >b {
      margin: 0 5px;
      font-size: 14px;
      font-weight: 400;
      color: #4E5969;
    }
  }
}
</style>
<style lang="less">
.smallpagination {
  .smallpagination-pager {
    .el-input-number {
      width: 40px;
      margin-left: 5px;

      span {
        display: none;
      }

      .el-input__wrapper {
        padding: 0;
        height: 30px;
        font-size: 14px;
        box-sizing: border-box;
        background: #f2f3f5;
        box-shadow: none !important;
      }
    }
  }
}
</style>

使用簡潔模式分頁器組件代碼如下:

<template>
    <div class="xxx-list">
    	...
        <div class="list-bottom-common-page">
          <SmallPagination :total="total" :curPage="curPage" :pageSize="pageSize" @handlePageChange="handleCurrentChange">
          </SmallPagination>
        </div>
    </div>
</template>

<script setup>
import SmallPagination from '@/components/xxx/SmallPagination.vue';
import { ref } from 'vue';

// 當前頁
const curPage = ref(1);
// 每頁條數(shù)
const pageSize = ref(20);
// 列表總數(shù)
const total = ref(0);

/* 當前頁改變 */
const handleCurrentChange = (val) => {
  curPage.value = val;
  ...
};
</script>

最終效果如下:

到此這篇關于Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件的文章就介紹到這了,更多相關Vue Element分頁器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 可能是全網vue?v-model最詳細講解教程

    可能是全網vue?v-model最詳細講解教程

    Vue官網教程上關于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關于vue?v-model最詳細講解的相關資料,需要的朋友可以參考下
    2022-11-11
  • vue路由跳轉router-link清除歷史記錄的三種方式(總結)

    vue路由跳轉router-link清除歷史記錄的三種方式(總結)

    這篇文章主要介紹了vue路由跳轉router-link清除歷史記錄的三種方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼)

    詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼)

    本篇文章主要介紹了詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼),具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • element中drawer模板的實現(xiàn)

    element中drawer模板的實現(xiàn)

    本文主要介紹了element中drawer模板的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • 淺談vue引用靜態(tài)資源需要注意的事項

    淺談vue引用靜態(tài)資源需要注意的事項

    今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue在IIS服務器部署后路由無法跳轉

    vue在IIS服務器部署后路由無法跳轉

    在IIS服務器上部署Vue項目時,可能會遇到路由無法正常跳轉的問題,解決方法有兩種,下面就來具體介紹一下解決方法,感興趣的可以了解一下
    2024-10-10
  • vue?webpack打包原理解析(全網最新最全)

    vue?webpack打包原理解析(全網最新最全)

    webpack是讓我們可以進行模塊化開發(fā),并且會幫助我們處理模塊間的依賴關系,這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點長,希望大家耐心閱讀
    2023-02-02
  • 詳解vite+ts快速搭建vue3項目以及介紹相關特性

    詳解vite+ts快速搭建vue3項目以及介紹相關特性

    這篇文章主要介紹了vite+ts快速搭建vue3項目以及介紹相關特性,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-02-02
  • vue中使用event.target.value踩坑記錄

    vue中使用event.target.value踩坑記錄

    這篇文章主要介紹了vue中使用event.target.value踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • VeeValidate 的使用場景以及配置詳解

    VeeValidate 的使用場景以及配置詳解

    這篇文章主要介紹了VeeValidate 的使用場景以及配置詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01

最新評論