更新：登录功能
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
@import "./../common/abstracts/_mixin.scss";
|
||||
@import "./../common/abstracts/variable.scss";
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(pager) {
|
||||
background-color: $-dark-background;
|
||||
@include e(message) {
|
||||
color: $-dark-color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(pager) {
|
||||
user-select: none;
|
||||
background-color: #fff;
|
||||
|
||||
@include edeep(icon) {
|
||||
font-size: $-pagination-icon-size;
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: $-pagination-content-padding;
|
||||
}
|
||||
@include e(message) {
|
||||
text-align: center;
|
||||
color:$-pagination-message-color;
|
||||
font-size: $-pagination-message-fs;
|
||||
padding: $-pagination-message-padding;
|
||||
}
|
||||
@include edeep(nav) {
|
||||
min-width: $-pagination-nav-width;
|
||||
@include m(active){
|
||||
color: rgba(0,0,0,0.65)
|
||||
}
|
||||
@include m(disabled){
|
||||
color: rgba(0,0,0,0.15)
|
||||
}
|
||||
}
|
||||
@include e(size){
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: $-pagination-nav-content-fs;
|
||||
}
|
||||
@include e(separator){
|
||||
padding: $-pagination-nav-sepatator-padding;
|
||||
}
|
||||
@include edeep(left){
|
||||
transform: rotate(180deg) translateY(1px);
|
||||
display: inline-block;
|
||||
}
|
||||
@include e(current){
|
||||
color: $-pagination-nav-current-color;
|
||||
}
|
||||
}
|
||||
41
uni_modules/wot-design-uni/components/wd-pagination/types.ts
Normal file
41
uni_modules/wot-design-uni/components/wd-pagination/types.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
|
||||
|
||||
export const paginationProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
* 当前页
|
||||
*/
|
||||
modelValue: makeRequiredProp(Number),
|
||||
/**
|
||||
* 总页数，如果有total，则优先使用total计算页数
|
||||
*/
|
||||
totalPage: makeNumberProp(1),
|
||||
/**
|
||||
* 是否展示分页为Icon图标
|
||||
*/
|
||||
showIcon: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否展示总条数
|
||||
*/
|
||||
showMessage: makeBooleanProp(false),
|
||||
/**
|
||||
* 总条数
|
||||
*/
|
||||
total: makeNumberProp(0),
|
||||
/**
|
||||
* 每页条数
|
||||
*/
|
||||
pageSize: makeNumberProp(10),
|
||||
/**
|
||||
* 上一页文本
|
||||
*/
|
||||
prevText: String,
|
||||
/**
|
||||
* 下一页文本
|
||||
*/
|
||||
nextText: String,
|
||||
/**
|
||||
* 总页数只有一页时是否隐藏
|
||||
*/
|
||||
hideIfOnePage: makeBooleanProp(true)
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view :class="`wd-pager ${customClass}`" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
|
||||
<view class="wd-pager__content">
|
||||
<wd-button :plain="modelValue > 1" type="info" size="small" :disabled="modelValue <= 1" custom-class="wd-pager__nav" @click="sub">
|
||||
<text v-if="!showIcon">{{ prevText || translate('prev') }}</text>
|
||||
<wd-icon
|
||||
v-else
|
||||
:custom-class="`wd-pager__left wd-pager__icon ${modelValue <= 1 ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
|
||||
name="arrow-right"
|
||||
></wd-icon>
|
||||
</wd-button>
|
||||
<view class="wd-pager__size">
|
||||
<text class="wd-pager__current">{{ modelValue }}</text>
|
||||
<text class="wd-pager__separator">/</text>
|
||||
<text>{{ totalPageNum }}</text>
|
||||
</view>
|
||||
<wd-button
|
||||
:plain="modelValue < totalPageNum"
|
||||
type="info"
|
||||
size="small"
|
||||
:disabled="modelValue >= totalPageNum"
|
||||
custom-class="wd-pager__nav"
|
||||
@click="add"
|
||||
>
|
||||
<text v-if="!showIcon">{{ nextText || translate('next') }}</text>
|
||||
<wd-icon
|
||||
v-else
|
||||
:custom-class="`wd-pager__icon ${modelValue >= totalPageNum ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
|
||||
name="arrow-right"
|
||||
></wd-icon>
|
||||
</wd-button>
|
||||
</view>
|
||||
<view class="wd-pager__message" v-if="showMessage">
|
||||
<text>{{ translate('page', modelValue) }}，</text>
|
||||
<text v-if="total">{{ translate('total', total) }}，</text>
|
||||
<text>{{ translate('size', pageSize) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-pagination',
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdButton from '../wd-button/wd-button.vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useTranslate } from '../composables/useTranslate'
|
||||
import { paginationProps } from './types'
|
||||
|
||||
const { translate } = useTranslate('pagination')
|
||||
|
||||
const props = defineProps(paginationProps)
|
||||
const emit = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const totalPageNum = ref<number>(0) // 总页数
|
||||
|
||||
watch(
|
||||
() => props.totalPage,
|
||||
(newValue) => {
|
||||
if (!totalPageNum.value && newValue) {
|
||||
totalPageNum.value = newValue
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.total,
|
||||
() => {
|
||||
updateTotalPage()
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
function add() {
|
||||
const { modelValue } = props
|
||||
if (modelValue > totalPageNum.value - 1) {
|
||||
return
|
||||
}
|
||||
emit('change', { value: modelValue + 1 })
|
||||
emit('update:modelValue', modelValue + 1)
|
||||
}
|
||||
|
||||
function sub() {
|
||||
const { modelValue } = props
|
||||
if (modelValue < 2) {
|
||||
return
|
||||
}
|
||||
emit('change', { value: modelValue - 1 })
|
||||
emit('update:modelValue', modelValue - 1)
|
||||
}
|
||||
|
||||
function updateTotalPage() {
|
||||
const { total, pageSize } = props
|
||||
totalPageNum.value = Math.ceil(total / pageSize)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user