FileManage/web/src/components/Pagination/page.vue

<template>
    <div style="display: flex;display: -webkit-flex; align-items: center;-webkit-align-items: center;">
        <div :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }" style="display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;">
            共{{ total }}条</div>
        <el-select @change="changesize" v-model="pcode" filterable class="product-input"
            @keyup.enter="changeSize" allow-create style="margin-left: 10px;width: 80px;">
            <el-option v-for="(item, index) in arr_product" :key="index" :label="item.lable" :value="item.value" />
        </el-select>
        <div
        :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }"  style="margin-left:10px;display: flex;display: -webkit-flex;align-items: center; -webkit-align-items: center;">
            <div>条/页</div>
        </div>
        <el-pagination style="margin-left: 10px;" background layout="prev, pager, next" :total="total"
            v-model:current-page="currentPage" v-model:page-size="pageSize" @current-change="pagechange" />
        <div
            style="display: flex; display: -webkit-flex; align-items: center;-webkit-align-items: center; margin-left: 10px; "  :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }">
            <div>前往</div><el-input v-model="inputgo" style="width:40px;margin-left:5px ; " @blur="sizechange($event)"
                @keyup.enter="sizechange($event)" />
            <div style="margin-left:5px ; ">页</div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, PropType, defineEmits, computed ,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
const props = defineProps({
    total: {
        required: true,
        type: Number as PropType<number>,
        default: 0
    },
    size: {
        type: Number,
        default: 1
    },
    current: {
        type: Number,
        default: 20
    },
});
const pcode = ref(10)
const inputgo = ref()
const arr_product = ref([
    {
        lable: 10,
        value: 10
    },
    {
        lable: 20,
        value: 20
    },
    {
        lable: 30,
        value: 30
    },
    {
        lable: 40,
        value: 40
    }, {
        lable: 50,
        value: 50
    }, {
        lable: 100,
        value: 100
    }, {
        lable: 300,
        value: 300
    }
])
const emit = defineEmits(['update:current', 'update:size', 'pagination']);

const currentPage = computed<number | undefined>({
    get: () => props.current,
    set: value => {
        emit('update:current', value);
    }
});

const pageSize = computed<number | undefined>({
    get() {
        return props.size;
    },
    set(val) {
        emit('update:size', val);
    }
});

function changesize(val: any) {
    if (val.length !== 0) {
        pcode.value = val
        emit('update:size', val);
        emit('pagination');
    }
}
function changeSize(event: any) {
    if (event.target.value.length !== 0) {
        pcode.value = event.target.value
        emit('update:size', event.target.value);
        emit('pagination');
    }
}
function pagechange(val: any) {
    emit('update:current', val);
    emit('pagination');
}
function sizechange(event: any) {
    if (event.target.value.length !== 0) {
        if (event.target.value > Math.ceil(props.total / props.size) ) {
            ElMessage({
                    message: '请输入正确的页数',
                    type: 'warning',
                })
            
        }else{
            emit('update:current', event.target.value);
            emit('pagination');

        }
    }

}

onMounted(()=>{
    pcode.value = props.size
})

</script>
  
<style scoped>
</style>