|
|
import { defineComponent, computed } from "vue-demi";
|
|
|
import { h } from "../../../utils";
|
|
|
import "../styles/search-page.scss";
|
|
|
|
|
|
export const SearchPage = defineComponent({
|
|
|
props: {
|
|
|
/** 当前页码 */
|
|
|
current: { type: Number, default: 1 },
|
|
|
/** 每页条数 */
|
|
|
size: { type: Number, default: 10 },
|
|
|
/** 总条数 */
|
|
|
total: { type: Number, default: 0 }
|
|
|
},
|
|
|
emits: {
|
|
|
"update:current": (e: number) => true
|
|
|
},
|
|
|
setup(props, { emit }) {
|
|
|
// 总页数
|
|
|
const pageCount = computed(() => {
|
|
|
return Math.ceil(Number(props.total) / Number(props.size));
|
|
|
});
|
|
|
|
|
|
const pageCurrent = computed({
|
|
|
get() {
|
|
|
return props.current;
|
|
|
},
|
|
|
set(val: number) {
|
|
|
let current = val;
|
|
|
if (val < 1) current = 1;
|
|
|
if (val > pageCount.value) current = pageCount.value;
|
|
|
emit("update:current", current);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
return () =>
|
|
|
h(
|
|
|
"div",
|
|
|
{
|
|
|
class: "tdt-search-page"
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
class: "tdt-search-page__btn first-page",
|
|
|
on: {
|
|
|
click: () => (pageCurrent.value = 1)
|
|
|
}
|
|
|
},
|
|
|
"«"
|
|
|
),
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
class: "tdt-search-page__btn prev-page",
|
|
|
on: {
|
|
|
click: () => pageCurrent.value--
|
|
|
}
|
|
|
},
|
|
|
"‹"
|
|
|
),
|
|
|
h("span", null, pageCurrent.value),
|
|
|
h("span", null, " / "),
|
|
|
h("span", null, pageCount.value),
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
class: "tdt-search-page__btn next-page",
|
|
|
on: {
|
|
|
click: () => pageCurrent.value++
|
|
|
}
|
|
|
},
|
|
|
"›"
|
|
|
),
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
class: "tdt-search-page__btn last-page",
|
|
|
on: {
|
|
|
click: () => (pageCurrent.value = pageCount.value)
|
|
|
}
|
|
|
},
|
|
|
"»"
|
|
|
)
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
});
|
