看板
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import type { LoadmoreIconType, LoadmoreStatus, LoadmoreText } from '../../types/global';
|
||||
import { baseProps } from '../common/props';
|
||||
import { useLocale } from '../../';
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
/**
|
||||
* u-loadmore 组件 props 类型定义
|
||||
* @description 加载更多，支持多种状态和自定义文字
|
||||
*/
|
||||
|
||||
export const LoadmoreProps = {
|
||||
...baseProps,
|
||||
/** 组件背景色 */
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
/** 是否显示加载中的图标 */
|
||||
icon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 字体大小 */
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '28'
|
||||
},
|
||||
/** 字体颜色 */
|
||||
color: {
|
||||
type: String,
|
||||
default: 'var(--u-content-color)'
|
||||
},
|
||||
/** 组件状态，loadmore-加载前，loading-加载中，nomore-没有更多 */
|
||||
status: {
|
||||
type: String as PropType<LoadmoreStatus>,
|
||||
default: 'loadmore'
|
||||
},
|
||||
/** 加载中状态的图标，flower-花朵状，circle-圆圈状 */
|
||||
iconType: {
|
||||
type: String as PropType<LoadmoreIconType>,
|
||||
default: 'circle'
|
||||
},
|
||||
/** 显示的文字 */
|
||||
loadText: {
|
||||
type: Object as PropType<LoadmoreText>,
|
||||
default: () => ({
|
||||
loadmore: t('uLoadmore.loadmore'),
|
||||
loading: t('uLoadmore.loading'),
|
||||
nomore: t('uLoadmore.nomore')
|
||||
})
|
||||
},
|
||||
/** 在“没有更多”状态下，是否显示粗点 */
|
||||
isDot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 加载中显示圆圈动画时，动画的颜色 */
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: 'var(--u-light-color)'
|
||||
},
|
||||
/** 上边距 */
|
||||
marginTop: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: 0
|
||||
},
|
||||
/** 下边距 */
|
||||
marginBottom: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: 0
|
||||
},
|
||||
/** 高度，单位rpx */
|
||||
height: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: 'auto'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* u-loadmore 组件 props 类型
|
||||
*/
|
||||
export type LoadmoreProps = ExtractPropTypes<typeof LoadmoreProps>;
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-load-more-wrap"
|
||||
:class="props.customClass"
|
||||
:style="
|
||||
$u.toStyle(props.customStyle, {
|
||||
backgroundColor: props.bgColor,
|
||||
marginBottom: props.marginBottom + 'rpx',
|
||||
marginTop: props.marginTop + 'rpx',
|
||||
height: $u.addUnit(props.height)
|
||||
})
|
||||
"
|
||||
>
|
||||
<u-line color="var(--u-divider-color)" length="50"></u-line>
|
||||
<!-- 加载中和没有更多的状态才显示两边的横线 -->
|
||||
<view :class="props.status == 'loadmore' || props.status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
|
||||
<view class="u-loadmore-icon-wrap">
|
||||
<u-loading
|
||||
class="u-loadmore-icon"
|
||||
:color="props.iconColor"
|
||||
:mode="props.iconType == 'circle' ? 'circle' : 'flower'"
|
||||
:show="props.status == 'loading' && props.icon"
|
||||
></u-loading>
|
||||
</view>
|
||||
<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
|
||||
<view
|
||||
class="u-line-1"
|
||||
:style="$u.toStyle(loadTextStyle)"
|
||||
:class="[props.status == 'nomore' && props.isDot == true ? 'u-dot-text' : 'u-more-text']"
|
||||
@tap="loadMore"
|
||||
>
|
||||
{{ showText }}
|
||||
</view>
|
||||
</view>
|
||||
<u-line color="var(--u-divider-color)" length="50"></u-line>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'u-loadmore',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true,
|
||||
// #endif
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { $u } from '../..';
|
||||
import { LoadmoreProps } from './types';
|
||||
|
||||
/**
|
||||
* loadmore 加载更多
|
||||
* @description 此组件一般用于标识页面底部加载数据时的状态。
|
||||
* @tutorial https://uviewpro.cn/zh/components/loadMore.html
|
||||
* @property {String} status 组件状态（默认loadmore）
|
||||
* @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认var(--u-bg-white)）
|
||||
* @property {Boolean} icon 加载中时是否显示图标（默认true）
|
||||
* @property {String} icon-type 加载中时的图标类型（默认circle）
|
||||
* @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认var(--u-light-color)）
|
||||
* @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
|
||||
* @property {String} color 字体颜色（默认var(--u-content-color)）
|
||||
* @property {String|Number} margin-top 到上一个相邻元素的距离
|
||||
* @property {String|Number} margin-bottom 到下一个相邻元素的距离
|
||||
* @property {Object} load-text 自定义显示的文字，见上方说明示例
|
||||
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件
|
||||
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
|
||||
*/
|
||||
const props = defineProps(LoadmoreProps);
|
||||
const emits = defineEmits(['loadmore']);
|
||||
|
||||
// 粗点
|
||||
const dotText = ref('●');
|
||||
|
||||
// 加载的文字显示的样式
|
||||
const loadTextStyle = computed(() => {
|
||||
return {
|
||||
color: props.color,
|
||||
fontSize: props.fontSize + 'rpx',
|
||||
position: 'relative' as const,
|
||||
zIndex: 1,
|
||||
backgroundColor: props.bgColor
|
||||
// 如果是加载中状态，动画和文字需要距离近一点
|
||||
};
|
||||
});
|
||||
|
||||
// 加载中圆圈动画的样式
|
||||
const cricleStyle = computed(() => {
|
||||
return {
|
||||
borderColor: `var(--u-divider-color) var(--u-divider-color) var(--u-divider-color) ${props.iconColor}`
|
||||
};
|
||||
});
|
||||
|
||||
// 加载中花朵动画形式
|
||||
// 动画由base64图片生成，暂不支持修改
|
||||
const flowerStyle = computed(() => {
|
||||
return {};
|
||||
});
|
||||
|
||||
// 显示的提示文字
|
||||
const showText = computed(() => {
|
||||
let text = '';
|
||||
if (props.status === 'loadmore') text = props.loadText.loadmore;
|
||||
else if (props.status === 'loading') text = props.loadText.loading;
|
||||
else if (props.status === 'nomore' && props.isDot) text = dotText.value;
|
||||
else text = props.loadText.nomore;
|
||||
return text;
|
||||
});
|
||||
|
||||
/**
|
||||
* 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
|
||||
*/
|
||||
function loadMore() {
|
||||
if (props.status === 'loadmore') emits('loadmore');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../libs/css/style.components.scss';
|
||||
/* #ifdef MP */
|
||||
// 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
|
||||
// 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
|
||||
u-line {
|
||||
flex: none;
|
||||
}
|
||||
/* #endif */
|
||||
.u-load-more-wrap {
|
||||
@include vue-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.u-load-more-inner {
|
||||
@include vue-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
.u-more {
|
||||
position: relative;
|
||||
@include vue-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.u-dot-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.u-loadmore-icon-wrap {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.u-loadmore-icon {
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user