refactor: 使用defineModel替换useVModel
This commit is contained in:
@@ -16,20 +16,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
total: {
|
total: {
|
||||||
required: true,
|
required: true,
|
||||||
type: Number as PropType<number>,
|
type: Number as PropType<number>,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
page: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
default: 20,
|
|
||||||
},
|
|
||||||
pageSizes: {
|
pageSizes: {
|
||||||
type: Array as PropType<number[]>,
|
type: Array as PropType<number[]>,
|
||||||
default() {
|
default() {
|
||||||
@@ -54,19 +46,25 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["pagination", "update:page", "update:limit"]);
|
const emit = defineEmits(["pagination"]);
|
||||||
|
|
||||||
const currentPage = useVModel(props, "page", emit);
|
const currentPage = defineModel("page", {
|
||||||
|
type: Number,
|
||||||
const pageSize = useVModel(props, "limit", emit);
|
required: true,
|
||||||
|
default: 1,
|
||||||
|
});
|
||||||
|
const pageSize = defineModel("limit", {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
default: 10,
|
||||||
|
});
|
||||||
|
|
||||||
function handleSizeChange(val: number) {
|
function handleSizeChange(val: number) {
|
||||||
emit("pagination", { page: currentPage, limit: val });
|
emit("pagination", { page: currentPage.value, limit: val });
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCurrentChange(val: number) {
|
function handleCurrentChange(val: number) {
|
||||||
currentPage.value = val;
|
emit("pagination", { page: val, limit: pageSize.value });
|
||||||
emit("pagination", { page: val, limit: props.limit });
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user