yangjl/CNCEC_APP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

看板

Browse Source
This commit is contained in:
杨家亮
2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uview-pro/components/u-skeleton/types.ts
+81
View File
@@ -0,0 +1,81 @@
import type { ExtractPropTypes, PropType } from 'vue';
import { baseProps } from '../common/props';
const skeleton = {
loading: true,
animate: true,
rows: 0,
rowsWidth: '100%',
rowsHeight: 18,
title: true,
titleWidth: '50%',
titleHeight: 18,
avatar: false,
avatarSize: 32,
avatarShape: 'circle'
};
/**
* SkeletonProps 骨架屏 props 类型定义
* @description 骨架屏用于页面数据加载时的占位
*/
export const SkeletonProps = {
...baseProps,
// 是否展示骨架组件
loading: {
type: Boolean,
default: skeleton.loading
},
// 是否开启动画效果
animate: {
type: Boolean,
default: skeleton.animate
},
// 段落占位图行数
rows: {
type: [String, Number],
default: skeleton.rows
},
// 段落占位图的宽度
rowsWidth: {
type: [String, Number, Array],
default: skeleton.rowsWidth
},
// 段落占位图的高度
rowsHeight: {
type: [String, Number, Array],
default: skeleton.rowsHeight
},
// 是否展示标题占位图
title: {
type: Boolean,
default: skeleton.title
},
// 段落标题的宽度
titleWidth: {
type: [String, Number],
default: skeleton.titleWidth
},
// 段落标题的高度
titleHeight: {
type: [String, Number],
default: skeleton.titleHeight
},
// 是否展示头像占位图
avatar: {
type: Boolean,
default: skeleton.avatar
},
// 头像占位图大小
avatarSize: {
type: [String, Number],
default: skeleton.avatarSize
},
// 头像占位图的形状，circle-圆形，square-方形
avatarShape: {
type: String,
default: skeleton.avatarShape
}
};
export type SkeletonProps = ExtractPropTypes<typeof SkeletonProps>;
uni_modules/uview-pro/components/u-skeleton/u-skeleton.vue
+253
View File
@@ -0,0 +1,253 @@
<template>
<view class="u-skeleton" :class="customClass" :style="$u.toStyle(customStyle)">
<view class="u-skeleton__wrapper" ref="skeletonRef" v-if="loading" style="display: flex; flex-direction: row">
<view
class="u-skeleton__wrapper__avatar"
v-if="avatar"
:class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
:style="{
height: $u.addUnit(avatarSize, 'px'),
width: $u.addUnit(avatarSize, 'px')
}"
></view>
<view class="u-skeleton__wrapper__content" ref="contentRef" style="flex: 1">
<view
class="u-skeleton__wrapper__content__title"
v-if="title"
:style="{
width: uTitleWidth,
height: $u.addUnit(titleHeight, 'px')
}"
:class="[animate && 'animate']"
></view>
<view
class="u-skeleton__wrapper__content__rows"
:class="[animate && 'animate']"
v-for="(item, index) in rowsArray"
:key="index"
:style="{
width: item.width,
height: item.height,
marginTop: item.marginTop
}"
>
</view>
</view>
</view>
<slot v-else />
</view>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue';
import { SkeletonProps } from './types';
import { $u } from '../../libs';
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom');
const animation = uni.requireNativePlugin('animation');
// #endif
/**
* Skeleton 骨架屏
* @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
* @tutorial https://uviewpro.cn/zh/components/skeleton.html
* @property {Boolean} loading 是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
* @property {Boolean} animate 是否开启动画效果 (默认 true )
* @property {String | Number} rows 段落占位图行数 (默认 0 )
* @property {String | Number | Array} rowsWidth 段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
* @property {String | Number | Array} rowsHeight 段落的高度 (默认 18 )
* @property {Boolean} title 是否展示标题占位图 (默认 true )
* @property {String | Number} titleWidth 标题的宽度 (默认 '50%' )
* @property {String | Number} titleHeight 标题的高度 (默认 18 )
* @property {Boolean} avatar 是否展示头像占位图 (默认 false )
* @property {String | Number} avatarSize 头像占位图大小 (默认 32 )
* @property {String} avatarShape 头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
* @example <u-skeleton rows="3" title loading></u-skeleton>
*/
const props = defineProps(SkeletonProps);
const instance = getCurrentInstance();
const width = ref<number>(0);
const skeletonRef = ref<any>(null);
const contentRef = ref<any>(null);
watch(
() => [props.loading],
() => {
getComponentWidth();
}
);
const rowsArray = computed(() => {
if (/%$/.test(props.rowsHeight as any)) {
console.error('rowsHeight参数不支持百分比单位');
}
const resultRows: Array<Record<string, any>> = [];
const rowsCount = Number(props.rows) || 0;
for (let i = 0; i < rowsCount; i++) {
let item: Record<string, any> = {};
// 需要预防超出数组边界的情况
const rowWidth = $u.test.array(props.rowsWidth)
? (props.rowsWidth as any[])[i] || (i === rowsCount - 1 ? '70%' : '100%')
: i === rowsCount - 1
? '70%'
: props.rowsWidth;
const rowHeight = $u.test.array(props.rowsHeight) ? (props.rowsHeight as any[])[i] || '18px' : props.rowsHeight;
// 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
// 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
item.marginTop = !props.title && i === 0 ? 0 : props.title && i === 0 ? '20px' : '12px';
// 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
if (/%$/.test(rowWidth)) {
// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
item.width = $u.addUnit((width.value * parseInt(String(rowWidth))) / 100, 'px');
} else {
item.width = $u.addUnit(rowWidth, 'px');
}
item.height = $u.addUnit(rowHeight, 'px');
resultRows.push(item);
}
return resultRows;
});
const uTitleWidth = computed(() => {
let tWidth: any = 0;
if (/%$/.test(props.titleWidth as any)) {
// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
tWidth = $u.addUnit((width.value * parseInt(String(props.titleWidth))) / 100, 'px');
} else {
tWidth = $u.addUnit(props.titleWidth, 'px');
}
return $u.addUnit(tWidth, 'px');
});
function init() {
getComponentWidth();
// #ifdef APP-NVUE
props.loading && props.animate && setNvueAnimation();
// #endif
}
async function setNvueAnimation() {
// #ifdef APP-NVUE
// 为了让opacity:1的状态保持一定时间，这里做一个延时
await $u.sleep(500);
const skeleton = skeletonRef.value;
skeleton &&
props.loading &&
props.animate &&
animation.transition(
skeleton,
{
styles: {
opacity: 0.5
},
duration: 600
},
() => {
// 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
// 会停留在opacity: 0.5的状态中
animation.transition(
skeleton,
{
styles: {
opacity: 1
},
duration: 600
},
() => {
// 只有在loading中时，才执行动画
props.loading && props.animate && setNvueAnimation();
}
);
}
);
// #endif
}
// 获取组件的宽度
async function getComponentWidth() {
// 延时一定时间，以获取dom尺寸
await $u.sleep(20);
// #ifndef APP-NVUE
$u.getRect('.u-skeleton__wrapper__content', instance).then((res: any) => {
width.value = res.width;
});
// #endif
// #ifdef APP-NVUE
const ref = contentRef.value;
ref &&
dom.getComponentRect(ref, (res: any) => {
width.value = res.size.width;
});
// #endif
}
onMounted(() => {
init();
});
</script>
<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';
@mixin background {
/* #ifdef APP-NVUE */
background-color: #f1f2f4;
/* #endif */
/* #ifndef APP-NVUE */
background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
background-size: 400% 100%;
/* #endif */
}
.u-skeleton {
flex: 1;
&__wrapper {
@include flex(row);
&__avatar {
@include background;
margin-right: 15px;
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
}
&__content {
flex: 1;
&__rows,
&__title {
@include background;
border-radius: 3px;
}
}
}
}
/* #ifndef APP-NVUE */
.animate {
animation: skeleton 1.8s ease infinite;
}
@keyframes skeleton {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
/* #endif */
</style>