Vue 3分页库的使用教程

这是一个分页库，为在Vue 3应用程序中创建轻量级、可定制、SEO友好的分页系统提供了一种简单的方法。

如何使用它。

1.导入并注册分页库。

import { createApp } from "vue";
import App from "./App.vue";
import VueAwesomePaginate from "vue-awesome-paginate";
// necessary css file
import "vue-awesome-paginate/dist/style.css";

createApp(App).use(VueAwesomePaginate).mount("#app");

2.2.将vue-awesome-paginate组件添加到模板中并设置分页。

<template>
  <vue-awesome-paginate
    :total-items="100"
    :items-per-page="10"
    :max-pages-shown="5"
    :current-page="1"
    :on-click="onClickHandler"
  />
</template>

const onClickHandler = (page: number) => {
  console.log(page);
};

3.可用道具来定制分页。

totalItems: {
  type: Number,
  required: true,
},
itemsPerPage: {
  type: Number,
  default: 10,
  validator: (value: number) => {
    if (value <= 0) {
      const message = "itemsPerPage attribute must be greater than 0.";
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
currentPage: {
  type: Number,
  default: 1,
  validator: (value: number) => {
    const message = "currentPage attribute must be greater than 0.";
    if (value <= 0) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
maxPagesShown: {
  type: Number,
  default: 5,
  validator: (value: number) => {
    const message = "maxPagesShown attribute must be greater than 0.";
    if (value <= 0) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
dir: {
  type: String,
  default: "ltr",
  validator: (value: string) => {
    const message = 'dir attribute must be either "ltr" or "rtl".';
    if (value !== "ltr" && value !== "rtl") {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
type: {
  type: String,
  default: "button",
  validator: (value: string) => {
    const validTypess = ["link", "button"];
    const message =
      "type attribute must be one of the following: " +
      validTypess.join(", ");
    if (validTypess.indexOf(value) === -1) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
onClick: {
  type: Function,
  default: () => {},
},
locale: {
  type: String,
  default: "en",
  validator: (value: string) => {
    const validLocales = ["en", "ar", "ir"];
    const message =
      "locale attribute must be one of the following: " +
      validLocales.join(", ");
    if (validLocales.indexOf(value) === -1) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
prevButtonContent: {
  type: String,
  default: "<",
},
nextButtonContent: {
  type: String,
  default: ">",
},
hidePrevNext: {
  type: Boolean,
  default: false,
},
hidePrevNextWhenEnds: {
  type: Boolean,
  default: false,
},
showBreakpointButtons: {
  type: Boolean,
  default: true,
},
disableBreakpointButtons: {
  type: Boolean,
  default: false,
},
startingBreakpointContent: {
  type: String,
  default: "...",
},
endingBreakpointButtonContent: {
  type: String,
  default: "...",
},
showJumpButtons: {
  type: Boolean,
  default: false,
},
linkUrl: {
  type: String,
  default: "#",
},
backwardJumpButtonContent: {
  type: String,
  default: "<<",
},
forwardJumpButtonContent: {
  type: String,
  default: ">>",
},
// Class props
backButtonClass: {
  type: String,
  default: "back-button",
},
nextButtonClass: {
  type: String,
  default: "next-button",
},
// not included in the documentation yet
firstButtonClass: {
  type: String,
  default: "first-button",
},
// not included in the documentation yet
lastButtonClass: {
  type: String,
  default: "last-button",
},
numberButtonsClass: {
  type: String,
  default: "number-buttons",
},
startingBreakpointButtonClass: {
  type: String,
  default: "starting-breakpoint-button",
},
endingBreakPointButtonClass: {
  type: String,
  default: "ending-breakpoint-button",
},
// use this selector above all the other selectors because of css specificity
paginateButtonsClass: {
  type: String,
  default: "paginate-buttons",
},
activePageClass: {
  type: String,
  default: "active-page",
},
paginationContainerClass: {
  type: String,
  default: "pagination-container",
},
disabledBreakPointButtonClass: {
  type: String,
  default: "disabled-breakpoint-button",
},
backwardJumpButtonClass: {
  type: String,
  default: "backward-jump-button",
},
forwardJumpButtonClass: {
  type: String,
  default: "forward-jump-button",
},

预览。

更新日志。

v1.0.3 (09/22/2022)

• 更新

v1.0.0 (07/23/2022)

• 为构建时间配置了typescript声明

v0.0.10 (07/14/2022)

• 增加了禁用按钮的类

The postAwesome Pagination Library For Vue 3appeared first onVue Script.