refactor: 分页子组件改为setup
This commit is contained in:
RubyLiu
rubylliu
parent
9ea2a05d19
commit
0c165eb746
|
|
@ -17,9 +17,3 @@
|
|||
extraProps: { ...props },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.arco-icon {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,53 +6,37 @@
|
|||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { getPrefixCls, getLegalPage } from './utils';
|
||||
import MsIcon from '../ms-icon-font/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EllipsisPager',
|
||||
components: {
|
||||
MsIcon,
|
||||
},
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
pages: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const prefixCls = getPrefixCls('pagination-item');
|
||||
|
||||
const nextPage = computed(() =>
|
||||
getLegalPage(props.current + props.step, {
|
||||
min: 1,
|
||||
max: props.pages,
|
||||
})
|
||||
);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
emit('click', nextPage.value);
|
||||
};
|
||||
|
||||
const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
cls,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
defineOptions({
|
||||
name: 'PageItemElipsis',
|
||||
});
|
||||
|
||||
export interface PageItemElipsisProps {
|
||||
current: number;
|
||||
step: number;
|
||||
pages: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<PageItemElipsisProps>(), {
|
||||
step: 5,
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', value: number): void;
|
||||
}>();
|
||||
|
||||
const prefixCls = getPrefixCls('pagination-item');
|
||||
const nextPage = computed(() =>
|
||||
getLegalPage(props.current + props.step, {
|
||||
min: 1,
|
||||
max: props.pages,
|
||||
})
|
||||
);
|
||||
const handleClick = () => {
|
||||
emit('click', nextPage.value);
|
||||
};
|
||||
const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,88 +1,68 @@
|
|||
<template>
|
||||
<component :is="simple ? 'span' : 'li'" :class="cls" @click="handleClick">
|
||||
<slot :type="isNext ? 'next' : 'previous'">
|
||||
<MsIcon v-if="isNext" type="icon-icon_right_outlined" />
|
||||
<MsIcon v-else type="icon-icon_left_outlined" />
|
||||
<MsIcon v-if="isNext" size="12px" type="icon-icon_right_outlined" />
|
||||
<MsIcon v-else size="12px" type="icon-icon_left_outlined" />
|
||||
</slot>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { getPrefixCls, getLegalPage } from './utils';
|
||||
import MsIcon from '../ms-icon-font/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'StepPager',
|
||||
components: {
|
||||
MsIcon,
|
||||
},
|
||||
props: {
|
||||
pages: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const prefixCls = getPrefixCls('pagination-item');
|
||||
const isNext = props.type === 'next';
|
||||
const mergedDisabled = computed(() => {
|
||||
if (props.disabled) {
|
||||
return props.disabled;
|
||||
}
|
||||
if (!props.pages) {
|
||||
return true;
|
||||
}
|
||||
if (isNext && props.current === props.pages) {
|
||||
return true;
|
||||
}
|
||||
return !isNext && props.current <= 1;
|
||||
});
|
||||
const nextPage = computed(() =>
|
||||
getLegalPage(props.current + (isNext ? 1 : -1), {
|
||||
min: 1,
|
||||
max: props.pages,
|
||||
})
|
||||
);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (!mergedDisabled.value) {
|
||||
emit('click', nextPage.value);
|
||||
}
|
||||
};
|
||||
|
||||
const cls = computed(() => [
|
||||
prefixCls,
|
||||
`${prefixCls}-${props.type}`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: mergedDisabled.value,
|
||||
},
|
||||
]);
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
cls,
|
||||
isNext,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
defineOptions({
|
||||
name: 'PageItemStep',
|
||||
});
|
||||
|
||||
export interface PageItemStepProps {
|
||||
pages: number;
|
||||
current: number;
|
||||
type: 'next' | 'previous';
|
||||
disabled: boolean;
|
||||
simple: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<PageItemStepProps>(), {
|
||||
disabled: false,
|
||||
simple: false,
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', value: number): void;
|
||||
}>();
|
||||
const prefixCls = getPrefixCls('pagination-item');
|
||||
const isNext = props.type === 'next';
|
||||
const mergedDisabled = computed(() => {
|
||||
if (props.disabled) {
|
||||
return props.disabled;
|
||||
}
|
||||
if (!props.pages) {
|
||||
return true;
|
||||
}
|
||||
if (isNext && props.current === props.pages) {
|
||||
return true;
|
||||
}
|
||||
return !isNext && props.current <= 1;
|
||||
});
|
||||
const nextPage = computed(() =>
|
||||
getLegalPage(props.current + (isNext ? 1 : -1), {
|
||||
min: 1,
|
||||
max: props.pages,
|
||||
})
|
||||
);
|
||||
|
||||
const handleClick = () => {
|
||||
if (!mergedDisabled.value) {
|
||||
emit('click', nextPage.value);
|
||||
}
|
||||
};
|
||||
|
||||
const cls = computed(() => [
|
||||
prefixCls,
|
||||
`${prefixCls}-${props.type}`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: mergedDisabled.value,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,59 +6,47 @@
|
|||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType, CSSProperties } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { getPrefixCls } from './utils';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'Pager',
|
||||
props: {
|
||||
pageNumber: {
|
||||
type: Number,
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
style: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
},
|
||||
activeStyle: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
},
|
||||
});
|
||||
|
||||
export interface PageItemProps {
|
||||
pageNumber?: number;
|
||||
current?: number;
|
||||
disabled: boolean;
|
||||
style?: CSSProperties;
|
||||
activeStyle?: CSSProperties;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<PageItemProps>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', value: number, event: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (!props.disabled) {
|
||||
emit('click', props.pageNumber as number, e);
|
||||
}
|
||||
};
|
||||
|
||||
const prefixCls = getPrefixCls('pagination-item');
|
||||
const isActive = computed(() => props.current === props.pageNumber);
|
||||
const cls = computed(() => [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-active`]: props.current === props.pageNumber,
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const prefixCls = getPrefixCls('pagination-item');
|
||||
const isActive = computed(() => props.current === props.pageNumber);
|
||||
]);
|
||||
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (!props.disabled) {
|
||||
emit('click', props.pageNumber, e);
|
||||
}
|
||||
};
|
||||
|
||||
const cls = computed(() => [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-active`]: isActive.value,
|
||||
},
|
||||
]);
|
||||
|
||||
const mergedStyle = computed(() => {
|
||||
return isActive.value ? props.activeStyle : props.style;
|
||||
});
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
cls,
|
||||
mergedStyle,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
const mergedStyle = computed(() => {
|
||||
return isActive.value ? props.activeStyle : props.style;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -22,82 +22,60 @@
|
|||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, nextTick, PropType, ref, watch } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { getPrefixCls } from './utils';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PageJumper',
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
pages: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<'small' | 'mini' | 'medium' | 'large' | undefined>,
|
||||
},
|
||||
onChange: {
|
||||
type: Function as PropType<(value: number) => void>,
|
||||
},
|
||||
},
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
const prefixCls = getPrefixCls('pagination-jumper');
|
||||
const { t } = useI18n();
|
||||
const inputValue = ref(props.simple ? props.current : undefined);
|
||||
defineOptions({ name: 'PageJumper' });
|
||||
|
||||
const handleFormatter = (value: number) => {
|
||||
const parseIntVal = parseInt(value.toString(), 10);
|
||||
return Number.isNaN(parseIntVal) ? undefined : String(parseIntVal);
|
||||
};
|
||||
export interface PageJumperProps {
|
||||
current: number;
|
||||
simple: boolean;
|
||||
disabled: boolean;
|
||||
pages: number;
|
||||
size?: 'small' | 'mini' | 'medium' | 'large';
|
||||
onChange?: (value: number) => void;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const handleChange = (value: number | undefined) => {
|
||||
emit('change', inputValue.value);
|
||||
nextTick(() => {
|
||||
if (!props.simple) {
|
||||
inputValue.value = undefined;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.current,
|
||||
(value) => {
|
||||
if (props.simple && value !== inputValue.value) {
|
||||
inputValue.value = value;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const cls = computed(() => [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-simple`]: props.simple,
|
||||
},
|
||||
]);
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
cls,
|
||||
t,
|
||||
inputValue,
|
||||
handleChange,
|
||||
handleFormatter,
|
||||
};
|
||||
},
|
||||
const props = withDefaults(defineProps<PageJumperProps>(), {
|
||||
simple: false,
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'change', value: number): void;
|
||||
}>();
|
||||
|
||||
const prefixCls = getPrefixCls('pagination-jumper');
|
||||
const { t } = useI18n();
|
||||
const inputValue = ref(props.simple ? props.current : undefined);
|
||||
const handleFormatter = (value: number) => {
|
||||
const parseIntVal = parseInt(value.toString(), 10);
|
||||
return Number.isNaN(parseIntVal) ? undefined : String(parseIntVal);
|
||||
};
|
||||
const handleChange = () => {
|
||||
emit('change', inputValue.value as number);
|
||||
nextTick(() => {
|
||||
if (!props.simple) {
|
||||
inputValue.value = undefined;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.current,
|
||||
(value) => {
|
||||
if (props.simple && value !== inputValue.value) {
|
||||
inputValue.value = value;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const cls = computed(() => [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-simple`]: props.simple,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue