init

uni_modules/nutui-uni/components/pagination/index.scss

@@ -0,0 +1,81 @@
+.nut-theme-dark {
+  .nut-pagination {
+    &-prev,
+    &-item,
+    &-next {
+      background: $dark-background;
+      border-color: $dark-color-gray;
+    }
+
+    &-simple {
+      background: $dark-background;
+    }
+
+    .simple-border {
+      border-color: $dark-color-gray;
+    }
+
+    .disabled {
+      background: $dark-background;
+    }
+  }
+}
+
+.nut-pagination {
+  display: flex;
+  font-size: $pagination-font-size;
+  color: $pagination-color;
+
+  &-contain {
+    display: flex;
+  }
+
+  &-simple {
+    width: 124px;
+    height: 39px;
+    line-height: 39px;
+    text-align: center;
+  }
+
+  &-prev,
+  &-item,
+  &-next {
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    min-width: 39px;
+    height: 39px;
+    cursor: pointer;
+    background: $white;
+    border: $pagination-item-border-width solid $pagination-item-border-color;
+    border-radius: $pagination-item-border-radius;
+  }
+
+  &-prev,
+  &-item {
+    border-right: none;
+  }
+
+  &-prev,
+  &-next {
+    padding: $pagination-prev-next-padding;
+  }
+
+  .simple-border {
+    border-right: $pagination-item-border-width solid $pagination-item-border-color;
+  }
+
+  .active {
+    color: $white;
+    background: $pagination-active-background-color;
+    border: none;
+  }
+
+  .disabled {
+    color: $pagination-disable-color;
+    cursor: not-allowed;
+    background-color: $pagination-disable-background-color;
+  }
+}

uni_modules/nutui-uni/components/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination'

uni_modules/nutui-uni/components/pagination/pagination.ts

@@ -0,0 +1,52 @@
+import type { ExtractPropTypes } from 'vue'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
+import { commonProps, isNumber, makeNumberProp, makeNumericProp, makeStringProp } from '../_utils'
+
+export const paginationProps = {
+  ...commonProps,
+  /**
+   * @description 当前页码
+   */
+  modelValue: makeNumberProp(1),
+  /**
+   * @description 显示模式,可选值为 `simple`
+   */
+  mode: makeStringProp<'simple' | 'multi'>('multi'),
+  /**
+   * @description 上一页按钮文字
+   */
+  prevText: makeStringProp(''),
+  /**
+   * @description 下一页按钮文字
+   */
+  nextText: makeStringProp(''),
+  /**
+   * @description 总页数
+   */
+  pageCount: makeNumericProp(''),
+  /**
+   * @description 总记录数
+   */
+  totalItems: makeNumericProp('0'),
+  /**
+   * @description 每页记录数
+   */
+  itemsPerPage: makeNumericProp('10'),
+  /**
+   * @description 显示的页码个数
+   */
+  showPageSize: makeNumericProp('5'),
+  /**
+   * @description 是否显示省略号
+   */
+  forceEllipses: Boolean,
+}
+
+export type PaginationProps = ExtractPropTypes<typeof paginationProps>
+
+export const paginationEmits = {
+  [UPDATE_MODEL_EVENT]: (val: number) => isNumber(val),
+  [CHANGE_EVENT]: (val: number) => isNumber(val),
+}
+
+export type PaginationEmits = typeof paginationEmits

uni_modules/nutui-uni/components/pagination/pagination.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, defineComponent, toRefs, watchEffect } from 'vue'
+import { CHANGE_EVENT, PREFIX, UPDATE_MODEL_EVENT } from '../_constants'
+import { getMainClass } from '../_utils'
+import { useTranslate } from '../../locale'
+import { paginationEmits, paginationProps } from './pagination'
+
+const props = defineProps(paginationProps)
+const emit = defineEmits(paginationEmits)
+const { modelValue, mode, showPageSize, forceEllipses } = toRefs(props)
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+// 计算页面的数量
+const countRef = computed(() => {
+  const { pageCount, totalItems, itemsPerPage } = toRefs(props)
+  const num = +pageCount.value || Math.ceil(+totalItems.value / +itemsPerPage.value)
+  return Math.max(1, num)
+})
+
+// 点击选择page
+function select(curPage: number, isSelect: boolean) {
+  if (curPage > countRef.value || curPage < 1)
+    return
+  if (curPage !== modelValue.value)
+    emit(UPDATE_MODEL_EVENT, curPage)
+  if (isSelect)
+    emit(CHANGE_EVENT, curPage)
+}
+// set page 对象
+function setPage(number: number, text: string | number, active = false) {
+  return { number, text, active }
+}
+// 生成pages数组，用来遍历
+const pages = computed(() => {
+  if (mode.value === 'simple')
+    return
+  const items = []
+  const pageCount = countRef.value // 总的页面数量
+  const pageSize = +showPageSize.value // 展示的页面个数
+  let startPage = 1
+  let endPage = pageCount
+  const partialShow = pageCount > pageSize
+  if (partialShow) {
+    // 选中的page在展示的page中间
+    startPage = Math.max(modelValue.value - Math.floor(pageSize / 2), 1)
+    endPage = startPage + +pageSize - 1
+    if (endPage > pageCount) {
+      endPage = pageCount
+      startPage = endPage - +pageSize + 1
+    }
+  }
+  // 遍历生成数组
+  for (let i = startPage; i <= endPage; i++) {
+    const page = setPage(i, i, modelValue.value === i)
+    items.push(page)
+  }
+  // 判断是否有折叠
+  if (partialShow && pageSize > 0 && forceEllipses.value) {
+    if (startPage > 1) {
+      const prevPage = setPage(startPage - 1, '...')
+      items.unshift(prevPage)
+    }
+    if (endPage < pageCount) {
+      const nextPage = setPage(endPage + 1, '...')
+      items.push(nextPage)
+    }
+  }
+
+  return items
+})
+
+// 监听选中的page变化
+watchEffect(() => {
+  select(modelValue.value, false)
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-pagination`
+const { translate } = useTranslate(componentName)
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <view
+      class="nut-pagination-prev"
+      :class="[mode === 'multi' ? '' : 'simple-border', modelValue === 1 ? 'disabled' : '']"
+      @click="select(modelValue - 1, true)"
+    >
+      <slot name="prevText">
+        {{ prevText || translate('prev') }}
+      </slot>
+    </view>
+    <view v-if="mode === 'multi'" class="nut-pagination-contain">
+      <view
+        v-for="(item, index) of pages"
+        :key="`${index}pagination`"
+        class="nut-pagination-item"
+        :class="[item.active ? 'active' : '']"
+        @click="select(item.number, true)"
+      >
+        <slot name="page" :item="item">
+          {{ item.text }}
+        </slot>
+      </view>
+    </view>
+    <view v-if="mode === 'simple'" class="nut-pagination-contain">
+      <view class="nut-pagination-simple">
+        {{ modelValue }}/{{ countRef }}
+      </view>
+    </view>
+    <view
+      class="nut-pagination-next"
+      :class="[modelValue >= countRef ? 'disabled' : '']"
+      @click="select(modelValue + 1, true)"
+    >
+      <slot name="nextText">
+        {{ nextText || translate('next') }}
+      </slot>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>