BIN-UI-DESIGN

Appearance

On this page

分页器 Page ​

空显示状态，用于给内部无数据情况的展示。十分简单

基础用法 ​

直接用组件默认插槽插入即可

  • 1
  • 2
  • 3
  • 4
  • 10
<template>
  <b-page v-model:current="current" :total="100"></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page v-model:current="current" :total="100"></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

每页数量 ​

  • 1
  • 2
  • 3
  • 4
  • 10
<template>
  <b-page v-model:current="current" :total="100" show-sizer></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page v-model:current="current" :total="100" show-sizer></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

电梯 ​

  • 1
  • 2
  • 3
  • 4
  • 10
    • 跳至 页 
<template>
  <b-page v-model:current="current" :total="100" show-elevator></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page v-model:current="current" :total="100" show-elevator></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

总数 ​

  • 共 100 条
  • 1
  • 2
  • 3
  • 4
  • 10
<template>
  <b-page v-model:current="current" :total="100" show-total></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page v-model:current="current" :total="100" show-total></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

mini型 ​

  • 共 100 条
  • 1
  • 2
  • 3
  • 4
  • 10
    • 跳至 页 
<template>
  <b-page
    v-model:current="current"
    :total="100"
    size="small"
    show-elevator
    show-sizer
    show-total
  ></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page
    v-model:current="current"
    :total="100"
    size="small"
    show-elevator
    show-sizer
    show-total
  ></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

上一页下一页文字 ​

  • 上一页
  • 1
  • 2
  • 3
  • 4
  • 10
  • 下一页
<template>
  <b-page v-model:current="current" :total="100" prev-text="上一页" next-text="下一页"></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page v-model:current="current" :total="100" prev-text="上一页" next-text="下一页"></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

简洁模式 ​

  • / 10
<template>
  <b-page v-model:current="current" :total="100" simple></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>
<template>
  <b-page v-model:current="current" :total="100" simple></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Props ​

参数说明类型可选值默认值
current当前页码 支持v-model:current修饰Number—1
total数据总数Number—0
page-size每页条数Number—10
page-size-opts每页条数切换的配置Array—[10, 20, 30, 40]
placement条数切换弹窗的展开方向stringbottom 和 topbottom
size可选值为small（迷你版）或不填（默认）string——
simple简洁版Boolean—false
show-total显示总数Boolean—false
show-elevator显示电梯，可以快速切换到某一页Boolean—false
show-sizer显示分页，用来改变page-sizeBoolean—false
class-name自定义 class 名称String——
styles自定义 style 样式Object——
prev-text替代图标显示的上一页文字String——
next-text替代图标显示的下一页文字String——

Events ​

事件名说明返回值
change页码改变的回调，返回改变后的页码页码
size-change切换每页条数时的回调，返回切换后的每页条数page-size

Slot ​

名称说明
default自定义显示总数的内容

MIT Licensed | Copyright © 2023-present bin-ui-design