forked from opentiny/tiny-vue
chore(docs): [pager] optimize pager demo and api (#776)
This commit is contained in:
gimmyhehe
GitHub
parent
e465e77410
commit
f5e7ff8ba0
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager align="left" :total="100"></tiny-pager>
|
||||
<tiny-pager align="center" :total="100"></tiny-pager>
|
||||
<tiny-pager align="right" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tiny-radio-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="number" :total="100"></tiny-pager>
|
||||
<tiny-pager align="left" :total="100"></tiny-pager>
|
||||
<tiny-pager align="center" :total="100"></tiny-pager>
|
||||
<tiny-pager align="right" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -18,4 +20,7 @@ export default {
|
|||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tiny-radio-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-pager layout="prev, pager, next" :total="50"></tiny-pager>
|
||||
|
||||
<tiny-pager align="center" layout="prev, pager, next" :total="100"></tiny-pager>
|
||||
<tiny-pager :total="50"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-pager layout="prev, pager, next" :total="50"></tiny-pager>
|
||||
|
||||
<tiny-pager align="center" layout="prev, pager, next" :total="100"></tiny-pager>
|
||||
<tiny-pager :total="50"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
is-before-page-change
|
||||
@before-page-change="onBeforePageChange"
|
||||
mode="number"
|
||||
:total="200"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="1000"
|
||||
@before-page-change="onBeforePageChange"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
is-before-page-change
|
||||
@before-page-change="onBeforePageChange"
|
||||
mode="number"
|
||||
:total="200"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="1000"
|
||||
@before-page-change="onBeforePageChange"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<tiny-pager layout="prev, pager, next" :current-page="2" :total="50"></tiny-pager>
|
||||
<tiny-pager :current-page="2" :total="50"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<tiny-pager layout="prev, pager, next" :current-page="2" :total="50"></tiny-pager>
|
||||
<tiny-pager :current-page="2" :total="50"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<tiny-pager layout="sizes,slot, prev, pager, next, jumper, ->, total" :total="1000">
|
||||
<tiny-pager layout="total, sizes, prev, pager, next, slot, jumper" :total="1000">
|
||||
<template #default>
|
||||
<span>我是插槽</span>
|
||||
<span>默认插槽</span>
|
||||
</template>
|
||||
</tiny-pager>
|
||||
<tiny-pager layout="sizes, prev, current, next, total" :total="1000"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<tiny-pager layout="sizes,slot, prev, pager, next, jumper, ->, total" :total="1000">
|
||||
<tiny-pager layout="total, sizes, prev, pager, next, slot, jumper" :total="1000">
|
||||
<template #default>
|
||||
<span>我是插槽</span>
|
||||
<span>默认插槽</span>
|
||||
</template>
|
||||
</tiny-pager>
|
||||
<tiny-pager layout="sizes, prev, current, next, total" :total="1000"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
<tiny-pager layout="prev, pager, next" prev-text="上一页" next-text="下一页" :total="100"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<tiny-pager layout="prev, pager, next" prev-text="上一页" next-text="下一页" :total="100"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
是否禁用：<tiny-switch v-model="isDisabled"></tiny-switch>
|
||||
<tiny-pager mode="number" :total="100" :disabled="isDisabled" />
|
||||
<tiny-pager mode="number" :total="100" size="mini" :disabled="isDisabled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Switch as TinySwitch } from '@opentiny/vue'
|
||||
|
||||
const isDisabled = ref(false)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
是否禁用：<tiny-switch v-model="isDisabled"></tiny-switch>
|
||||
<tiny-pager mode="number" :total="100" :disabled="isDisabled" />
|
||||
<tiny-pager mode="number" :total="100" size="mini" :disabled="isDisabled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pager, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager,
|
||||
TinySwitch: Switch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDisabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-switch v-model="isHide"></tiny-switch>
|
||||
是否隐藏：<tiny-switch v-model="isHide"></tiny-switch>
|
||||
<tiny-pager :hide-on-single-page="isHide" layout="prev, pager, next" :total="1"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Switch as TinySwitch } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-switch v-model="isHide"></tiny-switch>
|
||||
是否隐藏：<tiny-switch v-model="isHide"></tiny-switch>
|
||||
<tiny-pager :hide-on-single-page="isHide" layout="prev, pager, next" :total="1"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
<tiny-pager layout="prev, pager, next" :page-count="200"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<tiny-pager layout="prev, pager, next" :page-count="200"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
layout="sizes,prev, pager, next"
|
||||
mode="number"
|
||||
:page-size="5"
|
||||
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
|
||||
:total="50"
|
||||
></tiny-pager>
|
||||
:page-sizes="[5, 7, 10, 20, 50]"
|
||||
:total="100"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
<script setup>
|
||||
import { Pager as TinyPager, Modal } from '@opentiny/vue'
|
||||
|
||||
function handleSizeChange(val) {
|
||||
Modal.message({
|
||||
message: `size-change 事件，每页 ${val} 条`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,27 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
layout="sizes,prev, pager, next"
|
||||
mode="number"
|
||||
:page-size="5"
|
||||
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
|
||||
:total="50"
|
||||
></tiny-pager>
|
||||
:page-sizes="[5, 7, 10, 20, 50]"
|
||||
:total="100"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
Modal.message({
|
||||
message: `size-change 事件，每页 ${val} 条`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
<tiny-pager layout="prev, pager, next" :total="200" :pager-count="15"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<tiny-pager layout="prev, pager, next" :total="200" :pager-count="15"></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="number" :total="100" layout="total,sizes,prev,pager,next" disabled />
|
||||
<tiny-pager mode="number" :total="100" layout="total,sizes,prev,pager,next" size="mini" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="number" :total="100" layout="total,sizes,prev,pager,next" disabled />
|
||||
<tiny-pager mode="number" :total="100" layout="total,sizes,prev,pager,next" size="mini" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Modal } from '@opentiny/vue'
|
||||
|
||||
const currentPage = ref(5)
|
||||
|
||||
function handleSizeChange(val) {
|
||||
Modal.message({
|
||||
message: `size-change 事件，每页 ${val} 条`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@next-click="nextClick"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Modal } from '@opentiny/vue'
|
||||
|
||||
const currentPage = ref(5)
|
||||
|
||||
function nextClick(val) {
|
||||
Modal.message({
|
||||
message: `next-click 事件，当前页: ${val}`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页事件next-click', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pager#pager-events-nextclick')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const pager = preview.locator('.tiny-pager')
|
||||
const prev = pager.locator('.tiny-pager__btn-prev')
|
||||
const next = pager.locator('.tiny-pager__btn-next')
|
||||
const pageItem = pager.locator('.tiny-pager__pages li')
|
||||
const modalBox = page.locator('.tiny-modal__box').filter({ hasText: 'next-click 事件' })
|
||||
|
||||
await pageItem.last().click()
|
||||
await expect(modalBox).not.toBeVisible()
|
||||
await prev.click()
|
||||
await expect(modalBox).not.toBeVisible()
|
||||
await next.click()
|
||||
await expect(modalBox).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@next-click="nextClick"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 5
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextClick(val) {
|
||||
Modal.message({
|
||||
message: `next-click 事件，当前页: ${val}`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页事件size-change', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pager#pager-events')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const pager = preview.locator('.tiny-pager')
|
||||
const sizeSelect = page.locator('.tiny-pager__selector')
|
||||
const sizeChange = pager.locator('.tiny-pager__page-size')
|
||||
const modalBox = page.locator('.tiny-modal__box')
|
||||
|
||||
await sizeChange.click()
|
||||
await sizeSelect.getByText('50').click()
|
||||
await expect(modalBox.filter({ hasText: 'size-change 事件，每页 50 条' })).toBeVisible()
|
||||
await sizeChange.click()
|
||||
await sizeSelect.getByText('100').click()
|
||||
await expect(modalBox.filter({ hasText: 'size-change 事件，每页 100 条' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 5
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
Modal.message({
|
||||
message: `size-change 事件，每页 ${val} 条`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager as TinyPager } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn, Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,28 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="complete" :total="100"></tiny-pager>
|
||||
显示模式：
|
||||
<tiny-radio-group v-model="mode">
|
||||
<tiny-radio-button label="number"></tiny-radio-button>
|
||||
<tiny-radio-button label="simple"></tiny-radio-button>
|
||||
<tiny-radio-button label="complete"></tiny-radio-button>
|
||||
<tiny-radio-button label="fixed"></tiny-radio-button>
|
||||
</tiny-radio-group>
|
||||
<tiny-pager :mode="mode" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
|
||||
|
||||
const mode = ref('number')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tiny-radio-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="fixed" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页fixed模式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pager#pager-mode-fixed')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const pager = preview.locator('.tiny-pager')
|
||||
const prev = pager.locator('.tiny-pager__btn-prev')
|
||||
const next = pager.locator('.tiny-pager__btn-next')
|
||||
|
||||
// fixed 模式只有上一页、页码和下一页
|
||||
await expect(prev).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__pages')).toBeVisible()
|
||||
await expect(next).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__input')).not.toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__goto')).not.toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__total')).not.toBeVisible()
|
||||
})
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="fixed" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="number" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页number模式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pager#pager-mode-number')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const pager = preview.locator('.tiny-pager')
|
||||
const prev = pager.locator('.tiny-pager__btn-prev')
|
||||
const next = pager.locator('.tiny-pager__btn-next')
|
||||
|
||||
await expect(prev).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__pages')).toBeVisible()
|
||||
await expect(next).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__page-size')).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__goto')).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__total')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="simple" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页simple模式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pager#pager-mode-simple')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const pager = preview.locator('.tiny-pager')
|
||||
const prev = pager.locator('.tiny-pager__btn-prev')
|
||||
const next = pager.locator('.tiny-pager__btn-next')
|
||||
|
||||
await expect(prev).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__pages')).toBeVisible()
|
||||
await expect(next).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__page-size')).toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__goto')).not.toBeVisible()
|
||||
await expect(pager.locator('.tiny-pager__total')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="simple" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,29 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="complete" :total="100"></tiny-pager>
|
||||
显示模式：
|
||||
<tiny-radio-group v-model="mode">
|
||||
<tiny-radio-button label="number"></tiny-radio-button>
|
||||
<tiny-radio-button label="simple"></tiny-radio-button>
|
||||
<tiny-radio-button label="complete"></tiny-radio-button>
|
||||
<tiny-radio-button label="fixed"></tiny-radio-button>
|
||||
</tiny-radio-group>
|
||||
<tiny-pager :mode="mode" :total="100"></tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Pager, RadioButton, RadioGroup } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
TinyPager: Pager,
|
||||
TinyRadioButton: RadioButton,
|
||||
TinyRadioGroup: RadioGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: 'number'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -18,4 +32,7 @@ export default {
|
|||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tiny-radio-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="number" :total="100" layout="total,sizes,prev,pager,next" />
|
||||
<tiny-pager mode="number" :total="100" size="mini" layout="total,sizes,prev,pager,next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pager#pager-size')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const pager = preview.locator('.tiny-pager.tiny-pager__number')
|
||||
|
||||
await expect(pager.nth(1)).toHaveClass(/tiny-pager--mini/)
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-pager mode="number" :total="100" layout="total,sizes,prev,pager,next" />
|
||||
<tiny-pager mode="number" :total="100" size="mini" layout="total,sizes,prev,pager,next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,6 +8,11 @@
|
|||
></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Pager as TinyPager } from '@opentiny/vue'
|
||||
</script>
|
||||
<style>
|
||||
.custom-pager.tiny-popper {
|
||||
background: #fff3b7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
></tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -17,3 +17,8 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.custom-pager.tiny-popper {
|
||||
background: #fff3b7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@prev-click="prevClick"
|
||||
@next-click="nextClick"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
:total="100"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -18,8 +17,13 @@ const currentPage = ref(5)
|
|||
|
||||
function prevClick(val) {
|
||||
Modal.message({
|
||||
message: `prev-click 事件，当前页: ${val}`,
|
||||
status: 'info'
|
||||
message: `prev-click 事件，当前页: ${val}`
|
||||
})
|
||||
}
|
||||
|
||||
function nextClick(val) {
|
||||
Modal.message({
|
||||
message: `next-click 事件，当前页: ${val}`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<tiny-pager
|
||||
@prev-click="prevClick"
|
||||
@next-click="nextClick"
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="1000"
|
||||
:total="100"
|
||||
>
|
||||
</tiny-pager>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -25,8 +24,12 @@ export default {
|
|||
methods: {
|
||||
prevClick(val) {
|
||||
Modal.message({
|
||||
message: `prev-click 事件，当前页: ${val}`,
|
||||
status: 'info'
|
||||
message: `prev-click 事件，当前页: ${val}`
|
||||
})
|
||||
},
|
||||
nextClick(val) {
|
||||
Modal.message({
|
||||
message: `next-click 事件，当前页: ${val}`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,19 @@
|
|||
<template>
|
||||
<tiny-button @click="setTotalLoading" type="primary">改变总页数加载状态</tiny-button>
|
||||
<tiny-pager
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="10"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="100"
|
||||
:show-total-loading="totalLoading"
|
||||
>
|
||||
</tiny-pager>
|
||||
<div>
|
||||
加载中：<tiny-switch v-model="totalLoading"></tiny-switch>
|
||||
<tiny-pager
|
||||
:page-size="10"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="100"
|
||||
:show-total-loading="totalLoading"
|
||||
>
|
||||
</tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Pager as TinyPager, Button as TinyButton } from '@opentiny/vue'
|
||||
import { Pager as TinyPager, Switch as TinySwitch } from '@opentiny/vue'
|
||||
|
||||
const currentPage = ref(5)
|
||||
const totalLoading = ref(true)
|
||||
|
||||
function setTotalLoading() {
|
||||
totalLoading.value = !totalLoading.value
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,28 @@
|
|||
<template>
|
||||
<tiny-button @click="setTotalLoading" type="primary">改变总页数加载状态</tiny-button>
|
||||
<tiny-pager
|
||||
:current-page="currentPage"
|
||||
@update:current-page="currentPage = $event"
|
||||
:page-size="10"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="100"
|
||||
:show-total-loading="totalLoading"
|
||||
>
|
||||
</tiny-pager>
|
||||
<div>
|
||||
加载中：<tiny-switch v-model="totalLoading"></tiny-switch>
|
||||
<tiny-pager
|
||||
:page-size="10"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="100"
|
||||
:show-total-loading="totalLoading"
|
||||
>
|
||||
</tiny-pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pager, Button } from '@opentiny/vue'
|
||||
import { Pager, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPager: Pager,
|
||||
TinyButton: Button
|
||||
TinySwitch: Switch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 5,
|
||||
totalLoading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTotalLoading() {
|
||||
this.totalLoading = !this.totalLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ export default {
|
|||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"详细用法参考如下示例,可以通过<code>align</code>属性设置分页的对齐方式，可选值有<code>['left', 'center', 'right']</code>",
|
||||
'en-US': 'For details, see the following example.'
|
||||
'zh-CN': '<p>详细用法参考如下示例，通过<code>total</code>设置总条数。</p>',
|
||||
'en-US':
|
||||
'For detailed usage, refer to the following example, and set the total number of entries through<code>total</code>.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -16,110 +16,109 @@ export default {
|
|||
'demoId': 'current-page',
|
||||
'name': { 'zh-CN': '当前页', 'en-US': 'Current Page' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>current-page</code> 设置初始加载页码数, 通过 <code>total</code> 设置总条数</p>\n',
|
||||
'en-US':
|
||||
'<p>Use <code>current-page</code> to set the number of initially loaded pages, and use <code>total</code> to set the total number of records</p>\n'
|
||||
'zh-CN': '<p>通过 <code>current-page</code> 设置初始加载页码数。</p>\n',
|
||||
'en-US': '<p>Use <code>current-page</code> to set the number of initially loaded pages.</p>\n'
|
||||
},
|
||||
'codeFiles': ['current-page.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-mode-number',
|
||||
'name': { 'zh-CN': 'number 模式', 'en-US': 'number mode' },
|
||||
'demoId': 'page-size',
|
||||
'name': { 'zh-CN': '每页显示数量', 'en-US': 'Display quantity per page' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>mode="number"</code> 设置组件渲染模式</p>\n',
|
||||
'en-US': '<p>Set the component rendering mode through <code>mode="number"</code></p>\n'
|
||||
'zh-CN':
|
||||
'<p>通过<code>page-size</code>设置每页显示条目个数，<code>page-sizes</code>设置可选择的<code>page-size</code>列表，当<code>page-size</code>发生变化时，会触发<code>size-change</code>事件。</p>\n',
|
||||
'en-US':
|
||||
'<p>By setting the number of displayed entries per page through<code>page size</code>,<code>page sizes</code>provides a switchable<code>page size</code>list. When the<code>page size</code>changes, the<code>size change</code>event is triggered.</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-mode-number.vue']
|
||||
'codeFiles': ['page-size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-mode-fixed',
|
||||
'name': { 'zh-CN': 'fixed 模式', 'en-US': 'fixed mode' },
|
||||
'demoId': 'current-change',
|
||||
'name': { 'zh-CN': '分页事件current-change', 'en-US': 'Paging event current-change' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>mode="fixed"</code> 设置组件渲染模式</p>\n',
|
||||
'en-US': '<p>Set the component rendering mode through <code>mode="fixed"</code></p>\n'
|
||||
'zh-CN': '<p><code>current-change</code> 切换当前页码时触发。</p>\n',
|
||||
'en-US': '<p><code>current-change</code> Triggered when the current page number is switched.</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-mode-fixed.vue']
|
||||
'codeFiles': ['current-change.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-mode-simple',
|
||||
'name': { 'zh-CN': 'simple 模式', 'en-US': 'simple mode' },
|
||||
'demoId': 'prev-next-click',
|
||||
'name': { 'zh-CN': '上一页、下一页事件', 'en-US': 'Prev click and next click event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>mode="simple"</code> 设置组件渲染模式</p>\n',
|
||||
'en-US': '<p>Set the component rendering mode through <code>mode="simple"</code></p>\n'
|
||||
'zh-CN': '<p><code>prev-click</code> 切换至上一页时触发，<code>next-click</code> 切换至下一页时触发。</p>\n',
|
||||
'en-US':
|
||||
'<p>Triggered when switching to the previous page, and triggered when switching to the next page.</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-mode-simple.vue']
|
||||
'codeFiles': ['prev-next-click.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'align',
|
||||
'name': { 'zh-CN': '对齐方式', 'en-US': 'Align mode' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过<code>align</code>设置对齐方式。</p>\n',
|
||||
'en-US': '<p>Set the alignment method through<code>align</code>.</p>'
|
||||
},
|
||||
'codeFiles': ['align.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'disabled-and-size',
|
||||
'name': { 'zh-CN': '禁用和尺寸', 'en-US': 'Disabled and size' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过<code>disabled</code>设置分页禁用，通过<code>size</code>设置分页尺寸。</p>\n',
|
||||
'en-US': 'Set paging disabled through<code>disabled</code>, and set paging size through<code>size</code>.'
|
||||
},
|
||||
'codeFiles': ['disabled-and-size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-layout',
|
||||
'name': { 'zh-CN': '自定义布局和插槽', 'en-US': 'Custom pager layout and slot' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过<code>layout</code> 设置分页想要显示的子组件和顺序，子组件间用<code>,</code>分隔，子组件有<code>total</code>总条数、<code>sizes</code>分页大小、<code>prev</code>上一页、<code>pager</code>页码、<code>next</code>下一页、<code>slot</code>默认插槽、<code>jumper</code>页跳转、<code>current</code>当前页。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the subcomponents and order to be displayed through<code>layout</code>, separated by<code>,</code>. The subcomponents include<code>total</code>total count,<code>sizes</code>page size,<code>prev</code>previous page,<code>pager</code>page number,<code>next</code>next page,<code>slot</code>default slot,<code>jumper</code>page jump,<code>current</code>Current page.</p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-layout.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-mode',
|
||||
'name': { 'zh-CN': 'complete 模式', 'en-US': 'complete mode' },
|
||||
'name': { 'zh-CN': '分页模式', 'en-US': 'Pager mode' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>mode="complete"</code> 设置组件渲染模式</p>\n',
|
||||
'en-US': '<p>Set the component rendering mode through <code>mode="complete"</code></p>\n'
|
||||
'zh-CN':
|
||||
'<p>通过 <code>mode</code> 设置分页组件组件渲染模式，不同模式是组件内置的layout设置，<code>mode</code>优先级高于<code>layout</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the rendering mode of pagination component components through<code>mode</code>. The different modes are the built-in layout settings of the components, and the priority of<code>mode</code>is higher than that of<code>layout</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-mode.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'page-count',
|
||||
'name': { 'zh-CN': '总页数', 'en-US': 'Total Pages' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>page-count</code> 设置总页数</p>\n',
|
||||
'en-US': '<p>Set the total number of pages through <code>page-count</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['page-count.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-events',
|
||||
'name': { 'zh-CN': '分页事件size-change', 'en-US': 'Paging event size-change' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>size-change</code> 每页条数改变时触发</p>\n',
|
||||
'en-US': '<p><code>size-change</code> Triggered when the number of records on each page changes</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-events.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-events-current-change',
|
||||
'name': { 'zh-CN': '分页事件current-change', 'en-US': 'Paging event current-change' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>current-change</code> 切换当前页码时触发</p>\n',
|
||||
'en-US': '<p><code>current-change</code> Triggered when the current page number is switched</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-events-current-change.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-events-prev-click',
|
||||
'name': { 'zh-CN': '分页事件prev-click', 'en-US': 'Paging event prev-click' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>prev-click</code> 切换至前一页时触发</p>\n',
|
||||
'en-US': '<p><code>prev-click</code> Triggered when switching to the previous page</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-events-prev-click.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-events-nextclick',
|
||||
'name': { 'zh-CN': '分页事件next-click', 'en-US': 'Paging event next-click' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>next-click</code> 切换至后一页时触发</p>\n',
|
||||
'en-US': '<p><code>next-click</code> Triggered when switching to the next page</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-events-nextclick.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'before-page-change',
|
||||
'name': { 'zh-CN': '分页事件before-page-change', 'en-US': 'Paging event before-page-change' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>before-page-change</code> 切换分页前事件</p>\n',
|
||||
'en-US': '<p><code>before-page-change</code> Pre-paging event</p>\n'
|
||||
'zh-CN':
|
||||
'<p>通过<code>is-before-page-change</code>开启前置处理特性，翻页或者改变页大小时，触发<code>before-page-change</code>事件。事件函数类型为<a href="#IBeforeChangeFunc">IBeforeChangeFunc</a>，调用传参中的<code>callback</code>继续变更，调用<code>rollback</code>中止变更。</p>\n',
|
||||
'en-US':
|
||||
'<p>By enabling the pre processing feature through<code>is before page change</code>, the<code>before page change</code>event is triggered when flipping or changing page size. The event function type is<a="#IBeforeChangeFunc">IBeforeChangeFunc</a>, call<code>callback</code>in the passed parameters to continue the change, and call<code>rollback</code>to abort the change.</p>\n'
|
||||
},
|
||||
'codeFiles': ['before-page-change.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'page-count',
|
||||
'name': { 'zh-CN': '总页数', 'en-US': 'Total Pages' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>page-count</code> 设置总页数。</p>\n',
|
||||
'en-US': '<p>Set the total number of pages through <code>page-count</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['page-count.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'popper-append-to-body',
|
||||
'name': { 'zh-CN': '分页下拉框显示位置', 'en-US': 'Paging drop-down list box display position' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>popper-append-to-body</code> 分页下拉框元素是否追加到body元素节点下，该属性的默认值为 <code>true</code> ,默认追加到body元素节点下 。</p>\n<p>若不想追加到body元素节点下，设置 <code>:popper-append-to-body="false"</code> </p>',
|
||||
'<p><code>popper-append-to-body</code> 可设置分页下拉框元素是否追加到body元素节点下，该属性的默认值为 <code>true</code> ,默认追加到body元素节点下 。</p>\n<p>若不想追加到body元素节点下，设置 <code>:popper-append-to-body="false"</code>。</p>',
|
||||
'en-US':
|
||||
'Indicates whether to add an element in the <p><code>popper-append-to-body</code> paging drop-down list box to the body element node. The default value of this attribute is <code>true</code>, indicating that the element is added to the body element node by default. </p>\n<p>If you do not want to add it to the body element node, set <code>:popper-append-to-body="false"</code> </p>'
|
||||
'Indicates whether to add an element in the <p><code>popper-append-to-body</code> paging drop-down list box to the body element node. The default value of this attribute is <code>true</code>, indicating that the element is added to the body element node by default. </p>\n<p>If you do not want to add it to the body element node, set <code>:popper-append-to-body="false"</code>.</p>'
|
||||
},
|
||||
'codeFiles': ['page-append-to-body.vue']
|
||||
},
|
||||
|
|
@ -127,8 +126,8 @@ export default {
|
|||
'demoId': 'popper-class',
|
||||
'name': { 'zh-CN': '自定义分页下拉框的类名', 'en-US': 'Class name of the customized paging drop-down list box' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>popper-class</code> 可以自定义分页下拉框的类名</p>',
|
||||
'en-US': '<p><code>popper-class</code> You can customize the class name of the paging drop-down list box</p>'
|
||||
'zh-CN': '<p><code>popper-class</code> 可以自定义分页下拉框的类名。</p>',
|
||||
'en-US': '<p><code>popper-class</code> You can customize the class name of the paging drop-down list box.</p>'
|
||||
},
|
||||
'codeFiles': ['popper-class.vue']
|
||||
},
|
||||
|
|
@ -136,9 +135,10 @@ export default {
|
|||
'demoId': 'custom-total',
|
||||
'name': { 'zh-CN': '自定义总条数', 'en-US': 'Customized pagination layout' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>custom-total</code> 可以自定义分页总条数显示文本</p>',
|
||||
'zh-CN':
|
||||
'<p><code>custom-total</code> 可以自定义分页总条数显示文本。传值为文本则显示传入的文本；传值为<code>true</code>时，小于<code>10万</code>正常显示数字，大于<code>10万</code>显示<code>10万+</code>。以此类推显示<code>100万+</code>、<code>1千万+</code>，大于<code>1千万</code>后统一都显示为<code>1千万+</code>。</p>',
|
||||
'en-US':
|
||||
'<p><code>layout</code> Set the paging layout. You can adjust the position of <code>slot</code> in <code>layout</code> to adjust the position where the slot content is rendered.</p>\n'
|
||||
'<p><code>custom total</code>You can customize the total number of pages to display text. If the value is passed as text, the incoming text will be displayed; When the value is passed as<code>true</code>, a number is displayed normally when it is less than<code>100000</code>, and when it is greater than<code>100000</code>, it is displayed as<code>100K+</code>. By analogy, display<code>1M+</code>,<code>10M+</code>, and display as<code>10M+</code>when it is greater than<code>10 million</code>.\n'
|
||||
},
|
||||
'codeFiles': ['custom-total.vue']
|
||||
},
|
||||
|
|
@ -146,47 +146,26 @@ export default {
|
|||
'demoId': 'show-total-loading',
|
||||
'name': { 'zh-CN': '总条数加载中', 'en-US': 'Number of page buttons' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>show-total-loading</code> 可以设置总条数是否加载中</p>',
|
||||
'en-US': '<p><code>pager-count</code> Set the number of pages</p>\n'
|
||||
'zh-CN': '<p><code>show-total-loading</code> 可以设置总条数是否加载中。</p>',
|
||||
'en-US': '<p><code>pager-count</code> Set the number of pages.</p>\n'
|
||||
},
|
||||
'codeFiles': ['show-total-loading.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-layout',
|
||||
'name': { 'zh-CN': '自定义分页布局', 'en-US': 'Number of pages to be displayed' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>layout</code> 设置分页布局，通过在<code>layout</code>里调整<code>slot</code>的位置，从而调整插槽内容渲染的位置</p>\n',
|
||||
'en-US':
|
||||
'Use <p><code>page-sizes</code> together with <code>page-size</code> to adjust the number of pages to be displayed on each page.</p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-layout.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-count',
|
||||
'name': { 'zh-CN': '页码按钮数量', 'en-US': 'Hide pagination when there is only one page.' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>pager-count</code> 设置页码数量</p>\n',
|
||||
'en-US': '<p><code>hide-on-single-page</code> Hide paging when there is only one page</p>\n'
|
||||
'zh-CN': '<p>通过<code>pager-count</code> 设置页码数量。</p>\n',
|
||||
'en-US': '<p><code>hide-on-single-page</code> Hide paging when there is only one page.</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-count.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'page-size',
|
||||
'name': { 'zh-CN': '每页显示数量', 'en-US': 'Customize the text of the page-up button' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>page-sizes</code> 和 <code>page-size</code> 结合使用调整每页显示数量</p>\n',
|
||||
'en-US': '<p><code>prev-text</code> ,<code>next-text</code> Custom Page Up Button Text</p>\n'
|
||||
},
|
||||
'codeFiles': ['page-size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'hide-on-single-page',
|
||||
'name': { 'zh-CN': '只有一页时隐藏分页', 'en-US': 'Grid Table Pagination' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>hide-on-single-page</code> 只有一页时隐藏分页</p>\n',
|
||||
'en-US':
|
||||
'<p>The grid table uses the pagination component.\nThe <code>services/getGridMockData</code> service in this example needs to be implemented by yourself. The example simulates the data returned by the remote service.\n</p>\n'
|
||||
'zh-CN': '<p>当<code>hide-on-single-page</code>为<code>true</code>时，只有一页时会隐藏分页。</p>\n',
|
||||
'en-US': '<p>When there is only one page, the pagination will be hidden.</p>\n'
|
||||
},
|
||||
'codeFiles': ['hide-on-single-page.vue']
|
||||
},
|
||||
|
|
@ -194,9 +173,9 @@ export default {
|
|||
'demoId': 'custom-next-prev-text',
|
||||
'name': { 'zh-CN': '自定义上下页按钮文本', 'en-US': 'Pagination Size' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>prev-text</code> ,<code>next-text</code> 自定义上下页按钮文本</p>\n',
|
||||
'zh-CN': '<p>通过<code>prev-text</code> ,<code>next-text</code> 自定义上下页按钮文本。</p>\n',
|
||||
'en-US':
|
||||
'<p>The grid table uses the pagination component.\nThe <code>services/getGridMockData</code> service in this example needs to be implemented by yourself. The example simulates the data returned by the remote service.\n</p>\n'
|
||||
'<p>Customize the text of the up and down buttons through<code>prev-text</code>,<code>next-text</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-next-prev-text.vue']
|
||||
},
|
||||
|
|
@ -205,22 +184,11 @@ export default {
|
|||
'name': { 'zh-CN': 'Grid 表格分页', 'en-US': 'Pagination Disabled' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>Grid 表格使用分页组件\n该示例中的 <code>services/getGridMockData</code> 服务需要自行实现，示例模拟了远程服务返回的数据\n</p>\n',
|
||||
'en-US': '<p>Disabled pagination all functions.</p>\n'
|
||||
'<p>Grid 表格使用分页组件\n该示例中的 <code>services/getGridMockData</code> 服务需要自行实现，示例模拟了远程服务返回的数据。</p>\n',
|
||||
'en-US':
|
||||
'<p>The Grid table uses pagination components n In this example, the<code>services/getGridMockData</code>service needs to be self implemented, and the example simulates the data returned by remote services.</p>\n'
|
||||
},
|
||||
'codeFiles': ['pager-in-grid.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-size',
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>定义分页尺寸大小，可选值有 mini。</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['pager-size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'pager-disabled',
|
||||
'name': { 'zh-CN': '禁用', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>禁用分页所有功能。</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['pager-disabled.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -228,37 +196,156 @@ export default {
|
|||
'name': 'pager',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
{
|
||||
'name': 'page-size',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 10',
|
||||
'desc': {
|
||||
'zh-CN': '每页显示条目个数，支持 .sync 修饰符',
|
||||
'en-US': 'Number of items displayed on each page. The .sync modifier is supported.'
|
||||
},
|
||||
'demoId': 'pager-events'
|
||||
},
|
||||
{
|
||||
'name': 'align',
|
||||
'type': 'string',
|
||||
'type': 'left | center | right',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': "分页对齐方式，可选值有['left', 'center', 'right']",
|
||||
'en-US':
|
||||
'Indicates whether to enable the pre-processing feature when the page is changed. When the value is true, the operation of turning pages or changing the page size does not take effect immediately. Instead, the service logic is processed by the user. Then, the reserved callback or rollback is invoked to make the operation take effect or invalid. For details, see the before-page-change event'
|
||||
'zh-CN': '分页对齐方式。',
|
||||
'en-US': 'Paging alignment.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
'demoId': 'align'
|
||||
},
|
||||
{
|
||||
'name': 'current-page',
|
||||
'type': 'number',
|
||||
'defaultValue': '1',
|
||||
'desc': {
|
||||
'zh-CN': '当前所在页。',
|
||||
'en-US': 'The current page.'
|
||||
},
|
||||
'demoId': 'current-page'
|
||||
},
|
||||
{
|
||||
'name': 'custom-total',
|
||||
'type': 'boolean, string',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '自定义总条数，传值为true时，显示10万+、100万+，传值为字符串则显示传入的字符串',
|
||||
'en-US':
|
||||
'Maximum number of page buttons to be displayed in the middle in number/complete mode. Number of page buttons. When the total number of pages exceeds the value, the buttons will be collapsed. The value of this attribute can be an odd number ranging from 5 to 21'
|
||||
},
|
||||
'demoId': 'custom-total'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '禁用分页',
|
||||
'en-US': 'Disabled pager'
|
||||
},
|
||||
'demoId': 'disabled-and-size'
|
||||
},
|
||||
{
|
||||
'name': 'hide-on-single-page',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '只有一页时是否隐藏',
|
||||
'en-US': 'Hide when there is only one page'
|
||||
},
|
||||
'demoId': 'hide-on-single-page'
|
||||
},
|
||||
{
|
||||
'name': 'is-before-page-change',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'是否开启前置处理特性。开启后，翻页或者改变页大小不会立即生效，由用户处理业务逻辑，详看事件before-page-change和demo',
|
||||
'en-US':
|
||||
'Whether to enable the preprocessing feature. After opening, flipping or changing the page size will not take effect immediately. The user handles the business logic, as detailed in the events before page change and demo'
|
||||
},
|
||||
'demoId': 'before-page-change'
|
||||
},
|
||||
{
|
||||
'name': 'layout',
|
||||
'type': 'string',
|
||||
'defaultValue': 'total, prev, pager, next, jumper',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'组件布局，子组件名用逗号分隔;该属性的可选值为 sizes, prev, pager, next, jumper, current, total, slot。',
|
||||
'en-US':
|
||||
'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, preview, pager, next, jumper, current, total, slot.'
|
||||
},
|
||||
'demoId': 'custom-layout'
|
||||
},
|
||||
{
|
||||
'name': 'mode',
|
||||
'type': 'number | simple | complete | fixed',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置分页组件显示模式，此属性优先级大于layout',
|
||||
'en-US': 'Set the display mode of pagination components, which takes priority over layout'
|
||||
},
|
||||
'demoId': 'pager-mode'
|
||||
},
|
||||
{
|
||||
'name': 'next-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '替代图标显示的下一页文字',
|
||||
'en-US': 'Replace icon display with next page text'
|
||||
},
|
||||
'demoId': 'custom-next-prev-text'
|
||||
},
|
||||
{
|
||||
'name': 'page-count',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'是否打开页面改变时的前置处理特性。在值为true时，翻页操作或者改变页大小操作不会立即生效，留给用户处理业务逻辑，之后通过调用预留的callback或者rollback使之生效或者失效，详看事件before-page-change',
|
||||
'en-US': 'Add a class name for the popper. For details, see the popover component.'
|
||||
'总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性',
|
||||
'en-US':
|
||||
'Setting either the total number of pages, total, or page count can achieve the function of displaying page numbers; If you want to support changes to page sizes, you need to use the total attribute'
|
||||
},
|
||||
'demoId': 'before-page-change'
|
||||
'demoId': 'page-count'
|
||||
},
|
||||
{
|
||||
'name': 'page-size/v-model:page-size',
|
||||
'type': 'number',
|
||||
'defaultValue': '10',
|
||||
'desc': {
|
||||
'zh-CN': '每页显示条目个数',
|
||||
'en-US': 'Number of items displayed on each page'
|
||||
},
|
||||
'demoId': 'page-size'
|
||||
},
|
||||
{
|
||||
'name': 'page-sizes',
|
||||
'type': 'number[]',
|
||||
'defaultValue': '[10, 20, 30, 40, 50, 100]',
|
||||
'desc': {
|
||||
'zh-CN': '设置指定可选择的每页显示条数;每页显示个数选择器的选项设置',
|
||||
'en-US':
|
||||
'Set the specified number of selectable display items per page; Option settings for displaying number selectors per page'
|
||||
},
|
||||
'demoId': 'page-size'
|
||||
},
|
||||
{
|
||||
'name': 'pager-count',
|
||||
'type': 'number',
|
||||
'defaultValue': '7',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置页码按钮需要显示的最多个数;当总页数超过该值时会折叠;该属性的可选值为 大于等于 5 且小于等于 21 的奇数',
|
||||
'en-US':
|
||||
'Set the maximum number of page number buttons to display; When the total number of pages exceeds this value, it will collapse; The optional values for this attribute are odd numbers greater than or equal to 5 and less than or equal to 21'
|
||||
},
|
||||
'demoId': 'pager-count'
|
||||
},
|
||||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否将弹出框插入至 body 元素。可将该属性设置为 false (可参考 select 组件)',
|
||||
'en-US':
|
||||
'Whether to insert the pop-up box into the body element. You can set this attribute to false (refer to the select component)'
|
||||
},
|
||||
'demoId': 'page-append-to-body'
|
||||
},
|
||||
{
|
||||
'name': 'popper-class',
|
||||
|
|
@ -272,15 +359,34 @@ export default {
|
|||
'demoId': 'popper-class'
|
||||
},
|
||||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'name': 'prev-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
|
||||
'en-US': 'Total number of entries'
|
||||
'zh-CN': '替代图标显示的上一页文字',
|
||||
'en-US': 'Replace the previous page text displayed by the icon'
|
||||
},
|
||||
'demoId': ''
|
||||
'demoId': 'custom-next-prev-text'
|
||||
},
|
||||
{
|
||||
'name': 'show-total-loading',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '总条数是否加载中',
|
||||
'en-US': 'Is the total number of items being loaded'
|
||||
},
|
||||
'demoId': 'show-total-loading'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'mini',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '定义分页尺寸，该属性的可选值为 mini',
|
||||
'en-US': 'Define the page size, and the optional value for this attribute is mini'
|
||||
},
|
||||
'demoId': 'disabled-and-size'
|
||||
},
|
||||
{
|
||||
'name': 'total',
|
||||
|
|
@ -288,192 +394,65 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '总条目数',
|
||||
'en-US':
|
||||
'Total number of pages. You can set either total or page-count to display the page number. If you want to support page-sizes changes, you need to use the total attribute'
|
||||
'en-US': 'Total number of entries'
|
||||
},
|
||||
'demoId': 'current-page'
|
||||
},
|
||||
{
|
||||
'name': 'custom-total',
|
||||
'type': 'boolean, string',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '自定义总条数，传值为true显示10万+、100万+，传值为字符串则显示传入的字符串',
|
||||
'en-US':
|
||||
'Maximum number of page buttons to be displayed in the middle in number/complete mode. Number of page buttons. When the total number of pages exceeds the value, the buttons will be collapsed. The value of this attribute can be an odd number ranging from 5 to 21'
|
||||
},
|
||||
'demoId': 'custom-total'
|
||||
},
|
||||
{
|
||||
'name': 'show-total-loading',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '总条数是否加载中', 'en-US': 'Number of current pages. The .sync modifier is supported.' },
|
||||
'demoId': 'show-total-loading'
|
||||
},
|
||||
{
|
||||
'name': 'page-count',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性',
|
||||
'en-US':
|
||||
'Component layout. Subcomponent names are separated by commas (,). The optional value of this attribute is sizes, prev, pager, next, jumper, ->, total, slot'
|
||||
},
|
||||
'demoId': 'page-count'
|
||||
},
|
||||
{
|
||||
'name': 'pager-count',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 7',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'数字分页（number/complete）的模式下中间的页码按钮需要显示的最多个数;页码按钮的数量，当总页数超过该值时会折叠;该属性的可选值为 大于等于 5 且小于等于 21 的奇数',
|
||||
'en-US':
|
||||
'Set the number of records that can be displayed on each page. Option settings of the number of display items per page selector'
|
||||
},
|
||||
'demoId': 'pager-count'
|
||||
},
|
||||
{
|
||||
'name': 'current-page',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 1',
|
||||
'desc': {
|
||||
'zh-CN': '当前页数，支持 .sync 修饰符',
|
||||
'en-US': 'Substitute the text on the previous page of the icon.'
|
||||
},
|
||||
'demoId': 'current-page'
|
||||
},
|
||||
{
|
||||
'name': 'layout',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 prev, pager, next, jumper, ->, total',
|
||||
'desc': {
|
||||
'zh-CN': '组件布局，子组件名用逗号分隔;该属性的可选值为 sizes, prev, pager, next, jumper, ->, total, slot',
|
||||
'en-US': 'Substitute the text on the next page of the icon.'
|
||||
},
|
||||
'demoId': 'current-page'
|
||||
},
|
||||
{
|
||||
'name': 'page-sizes',
|
||||
'type': 'Array',
|
||||
'defaultValue': '该属性的默认值为 [10, 20, 30, 40, 50, 100]',
|
||||
'desc': {
|
||||
'zh-CN': '设置指定可选择的每页显示条数;每页显示个数选择器的选项设置',
|
||||
'en-US': 'Whether to hide only one page'
|
||||
},
|
||||
'demoId': 'page-size'
|
||||
},
|
||||
{
|
||||
'name': 'prev-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '替代图标显示的上一页文字',
|
||||
'en-US':
|
||||
'Set the pagination display mode. The default value is number. Set the pagination display mode. The optional values of this attribute are number / simple / complete / fixed'
|
||||
},
|
||||
'demoId': 'custom-next-prev-text'
|
||||
},
|
||||
{
|
||||
'name': 'next-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '替代图标显示的下一页文字',
|
||||
'en-US': 'Define the pager size. The value of this attribute can be mini'
|
||||
},
|
||||
'demoId': 'custom-next-prev-text'
|
||||
},
|
||||
{
|
||||
'name': 'hide-on-single-page',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '只有一页时是否隐藏', 'en-US': 'Disabled pager' },
|
||||
'demoId': 'hide-on-single-page'
|
||||
},
|
||||
{
|
||||
'name': 'mode',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置分页显示模式,默认为number;设置分页显示模式;该属性的可选值为 number / simple / complete / fixed',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'pager-mode-number'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '定义分页尺寸;该属性的可选值为 mini', 'en-US': '' },
|
||||
'demoId': 'pager-size'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为false',
|
||||
'desc': { 'zh-CN': '禁用分页', 'en-US': '' },
|
||||
'demoId': 'pager-disabled'
|
||||
'demoId': 'basic-usage'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'before-page-change',
|
||||
'type': '',
|
||||
'type': 'IBeforeChangeFunc',
|
||||
'typeAnchorName': 'IBeforeChangeFunc',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"在打开页面改变时的前置处理特性，并且进行翻页操作或者改变页大小操作时触发。;//参数arg\n { $grid: VueComponent, //table组件vue实例 \ncurrentPage: 1 //当前页码 \nlayout: 'total, prev, pager, next, jumper, sizes' //当前分页组件布局信息 \npageSize: 10// 当前每页显示条数 \npageSizes:[5, 10] //可切换的每页条数 \ntotal: 10 //总数据条数 }",
|
||||
'当is-before-page-change设置为true后，翻页或改变页大小前会触发此事件，用户可以在参数中获取相应事件和分页相关信息控制后续逻辑，详见demo',
|
||||
'en-US':
|
||||
"This event is triggered when the pre-processing feature is enabled when the page is changed and the page turning or page size is changed. ; / / Parameter arg\n {$grid: VueComponent, //table component vue instance \ncurrentPage: 1 // Current page number \nlayout: 'total, prev, pager, next, jumper, sizes' / / Current paging component layout information \npageSize: 10 // Number of records displayed on each page. \npageSizes: [5, 10] //Number of records that can be switched on each page.\ntotal: 10 //Total number of records}"
|
||||
'When the is before page change is set to true, this event will be triggered before flipping or changing the page size. Users can obtain the corresponding event and pagination related information in the parameters to control the subsequent logic. Please refer to the demo for details'
|
||||
},
|
||||
'demoId': 'before-page-change'
|
||||
},
|
||||
{
|
||||
'name': 'current-change',
|
||||
'type': '(currentPage: number) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': 'currentPage 改变时会触发',
|
||||
'en-US': 'Triggered when the currentPage changes'
|
||||
},
|
||||
'demoId': 'current-change'
|
||||
},
|
||||
{
|
||||
'name': 'next-click',
|
||||
'type': '(currentPage: number) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '点击下一页按钮改变当前页后触发',
|
||||
'en-US': 'Triggered after clicking the next page button to change the current page'
|
||||
},
|
||||
'demoId': 'prev-next-click'
|
||||
},
|
||||
{
|
||||
'name': 'prev-click',
|
||||
'type': '(currentPage: number) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '点击上一页按钮改变当前页后触发',
|
||||
'en-US': 'Triggered after clicking the previous page button to change the current page'
|
||||
},
|
||||
'demoId': 'prev-next-click'
|
||||
},
|
||||
{
|
||||
'name': 'size-change',
|
||||
'type': 'Function(arg1)',
|
||||
'type': '() => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置分页跳转后的事件;pageSize 改变时会触发;arg1: pageSize 新的当前值',
|
||||
'en-US':
|
||||
'Set the event after pagination. This event is triggered when pageSize changes. arg1: pageSize new current value'
|
||||
},
|
||||
'demoId': 'pager-events'
|
||||
},
|
||||
{
|
||||
'name': 'current-change',
|
||||
'type': 'Function(arg1)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': 'currentPage 改变时会触发;arg1: 新的当前页的值',
|
||||
'en-US': 'This event is triggered when the currentPage changes. arg1: new current page value'
|
||||
},
|
||||
'demoId': 'pager-events-current-change'
|
||||
},
|
||||
{
|
||||
'name': 'prev-click',
|
||||
'type': 'Function(arg1)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '用户点击上一页按钮改变当前页后触发;arg1: 新的当前页的值',
|
||||
'en-US':
|
||||
'This event is triggered when a user clicks the previous button to change the current page. arg1: new current page value'
|
||||
},
|
||||
'demoId': 'pager-events-prev-click'
|
||||
},
|
||||
{
|
||||
'name': 'next-click',
|
||||
'type': 'Function(arg1)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '用户点击下一页按钮改变当前页后触发;arg1: Number 新的当前页的值',
|
||||
'en-US':
|
||||
'This event is triggered when a user clicks Next to change the current page. arg1: Number New current page value'
|
||||
},
|
||||
'demoId': 'pager-events-nextclick'
|
||||
'demoId': 'page-size'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
|
|
@ -483,11 +462,30 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义内容，需要在 layout 中列出 slot',
|
||||
'en-US': 'User-defined content. Slots must be listed in the layout.'
|
||||
'en-US': 'User-defined content. Slots must be listed in the layout'
|
||||
},
|
||||
'demoId': 'custom-layout'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IBeforeChangeFunc',
|
||||
type: 'interface',
|
||||
code: `
|
||||
// 函数接受一个参数
|
||||
interface IBeforeChangeFunc {
|
||||
(param: IBeforeChangeParam): void
|
||||
}
|
||||
interface IBeforeChangeParam {
|
||||
callback: () => void // 回调函数，调用则继续本次变更
|
||||
rollback: () => void // 回滚函数，调用则阻止本次变更
|
||||
newPage: number // 变更后所在页
|
||||
newPageSize: number // 变更后分页大小
|
||||
currentPage: number // 当前所在页
|
||||
currentPageSize: number // 当前分页大小
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -171,8 +171,14 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 每次切换路由，要导航到顶部
|
||||
routerCbDestory = router.afterEach(() => {
|
||||
// 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
|
||||
routerCbDestory = router.afterEach((to) => {
|
||||
if (to.hash) {
|
||||
const el = document.querySelector(to.hash)
|
||||
if (el) {
|
||||
return el.scrollIntoView()
|
||||
}
|
||||
}
|
||||
state.contentRef.scrollTo({ top: 0, behavior: 'auto' })
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -12,5 +12,6 @@ export const tinyPagerAuroraTheme = {
|
|||
'ti-pager-active-font-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-pager-prev-next-hover-bg-color': 'transparent',
|
||||
'ti-pager-poplist-item-hover-bg-color': 'transparent',
|
||||
'ti-pager-active-bg-color': 'transparent'
|
||||
'ti-pager-active-bg-color': 'transparent',
|
||||
'ti-pager-mini-min-width': '24px'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -433,7 +433,7 @@
|
|||
}
|
||||
|
||||
li {
|
||||
min-width: 24px;
|
||||
min-width: var(--ti-pager-mini-min-width);
|
||||
height: 24px;
|
||||
padding: 0 4px;
|
||||
line-height: 22px;
|
||||
|
|
|
|||
|
|
@ -39,5 +39,6 @@ export const tinyPagerSmbTheme = {
|
|||
'ti-pager-selector-padding-vertical': '8px',
|
||||
'ti-pager-pop-body-margin-top': '4px',
|
||||
'ti-pager-poplist-item-selected-bg-color': '#0000000D',
|
||||
'ti-pager-poplist-item-min-height': '32px'
|
||||
'ti-pager-poplist-item-min-height': '32px',
|
||||
'ti-pager-mini-min-width': '24px'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,4 +150,7 @@
|
|||
|
||||
// 分页下拉弹出框纵向内边距
|
||||
--ti-pager-selector-padding-vertical: 12px;
|
||||
|
||||
// 小尺寸分页最小宽度
|
||||
--ti-pager-mini-min-width: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -533,7 +533,7 @@ export default defineComponent({
|
|||
this.$emit('before-page-change', temp)
|
||||
},
|
||||
beforePagerChangeHandler(params) {
|
||||
const { newPage, currentPage, callback } = params
|
||||
const { newPage, currentPage, callback, rollback } = params
|
||||
const newPageSize = this.internalPageSize
|
||||
const currentPageSize = this.internalPageSize
|
||||
const temp = {
|
||||
|
|
@ -541,7 +541,8 @@ export default defineComponent({
|
|||
newPageSize,
|
||||
currentPage,
|
||||
currentPageSize,
|
||||
callback
|
||||
callback,
|
||||
rollback
|
||||
}
|
||||
|
||||
this.$emit('before-page-change', temp)
|
||||
|
|
@ -712,7 +713,7 @@ export default defineComponent({
|
|||
} else if ((!this.mode && this.layout) || (this.mode && this.layout)) {
|
||||
layout = this.layout
|
||||
} else {
|
||||
layout = 'prev, pager, next, jumper, total'
|
||||
layout = 'total, prev, pager, next, jumper'
|
||||
}
|
||||
|
||||
return layout
|
||||
|
|
|
|||
Loading…
Reference in New Issue