sannongzixunwang_web/components/home/Pagination.vue

<template>
    <!-- 新闻详情页 页码 -->
    <div class="pagination">
        <el-pagination size="small" background layout="prev, pager, next" :total="props.total" class="mt-4" prev-text="上一页"
            next-text="下一页" @change="change" />
    </div>
</template>

<script setup>
import { ElPagination } from 'element-plus'

// 当前页码
const emit = defineEmits(['sendData'])
let page = useState("page", () => 1)

const props = defineProps({
  total: Number
});

let change = (value) => {
    console.log("当前页码",value);
    page.value = value
    console.log(page.value);

    const data = { value: page.value }

    // 触发自定义事件
    emit('sendData', data)
}



</script>

<style lang="less" scoped>
.pagination {
    width: 508px;
    height: 34px;
    margin: 0 auto;

    // 鼠标移入后字体颜色
    .el-pagination::v-deep :hover {
        color: #139609;
    }

    .el-pagination.is-background::v-deep .btn-next,
    .el-pagination.is-background::v-deep .btn-prev {
        width: 70px;
        height: 34px;
        margin: 0px 10px;
        border-radius: 4px;
    }

    .el-pagination.is-background::v-deep .el-pager li {
        margin: 0px 10px;
        width: 38px;
        height: 34px;
        border-radius: 4px;
    }

    .el-pagination.is-background::v-deep .btn-next.is-active,
    .el-pagination.is-background::v-deep .btn-prev.is-active,
    .el-pagination.is-background::v-deep .el-pager li.is-active {
        background-color: #028e21;
        color: #fff;
    }
}
</style>