Explorar el Código

update src/components/Pagination/index.vue.
解决了当全局size为small的时候分页组件样式太大的问题,当组件为small时,则会显示小的分页组件,具体请参照ep官网:https://element-plus.org/zh-CN/component/pagination.html#%E9%99%84%E5%8A%A0%E5%8A%9F%E8%83%BD

Signed-off-by: AKING <2734339436@qq.com>

AKING hace 1 año
padre
commit
ff8a8e7243
Se han modificado 1 ficheros con 11 adiciones y 1 borrados
  1. 11 1
      src/components/Pagination/index.vue

+ 11 - 1
src/components/Pagination/index.vue

@@ -8,6 +8,7 @@
     :page-sizes="[10, 20, 30, 50, 100]"
     :pager-count="pagerCount"
     :total="total"
+    :small="isSmall"
     class="float-right mt-15px mb-15px"
     layout="total, sizes, prev, pager, next, jumper"
     @size-change="handleSizeChange"
@@ -15,10 +16,19 @@
   />
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
+import { useAppStore } from '@/store/modules/app'
 
 defineOptions({ name: 'Pagination' })
 
+// 此处解决了当全局size为small的时候分页组件样式太大的问题
+const appStore = useAppStore()
+const layoutCurrentSize = computed(() => appStore.currentSize)
+const isSmall = ref<boolean>(layoutCurrentSize.value === 'small')
+watchEffect(() => {
+  isSmall.value = layoutCurrentSize.value === 'small'
+})
+
 const props = defineProps({
   // 总条目数
   total: {