style: 分页样式调整

This commit is contained in:
RubyLiu 2023-08-07 16:33:12 +08:00 committed by fit2-zhao
parent 42f1752dec
commit c814fa697d
3 changed files with 13 additions and 3 deletions

View File

@ -502,12 +502,12 @@
&-list { &-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px;
} }
&-jumper { &-jumper {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 2px 8px; padding: 2px 8px;
width: 160px;
background: var(--color-text-n9); background: var(--color-text-n9);
gap: 8px; gap: 8px;
.ms-pagination-jumper-input { .ms-pagination-jumper-input {
@ -542,6 +542,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer;
&-previous { &-previous {
margin-left: 14px !important; margin-left: 14px !important;
} }

View File

@ -15,7 +15,9 @@
@change="handleChange" @change="handleChange"
/> />
<span v-if="$slots['jumper-append']" :class="`${prefixCls}-append`"><slot name="jumper-append" /></span> <span v-if="$slots['jumper-append']" :class="`${prefixCls}-append`"><slot name="jumper-append" /></span>
<span :class="`${prefixCls}-total-page`">{{ t('msPagination.page', { page: pages }) }}</span> <span :class="`${prefixCls}-total-page`" :style="{ width: totalPageWidth }">{{
t('msPagination.page', { page: pages })
}}</span>
</span> </span>
</template> </template>
@ -23,6 +25,7 @@
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { getPrefixCls } from './utils'; import { getPrefixCls } from './utils';
import useLocale from '@/locale/useLocale';
defineOptions({ name: 'PageJumper' }); defineOptions({ name: 'PageJumper' });
@ -44,6 +47,8 @@
(e: 'change', value: number): void; (e: 'change', value: number): void;
}>(); }>();
const { currentLocale } = useLocale();
const prefixCls = getPrefixCls('pagination-jumper'); const prefixCls = getPrefixCls('pagination-jumper');
const { t } = useI18n(); const { t } = useI18n();
const inputValue = ref(props.simple ? props.current : undefined); const inputValue = ref(props.simple ? props.current : undefined);
@ -70,4 +75,8 @@
[`${prefixCls}-simple`]: props.simple, [`${prefixCls}-simple`]: props.simple,
}, },
]); ]);
const totalPageWidth = computed(() => {
return currentLocale.value === 'en-US' ? '64px' : '43px';
});
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<MsCard simple> <MsCard simple>
<h1>BugManagement is waiting for development </h1> <h1>BugManagement is waiting for development </h1>
<ms-pagination size="small" :total="100" show-jumper /> <ms-pagination size="small" :total="100" show-total show-jumper show-page-size />
</MsCard> </MsCard>
</template> </template>