From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-skeleton/u-skeleton.vue | 199 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 199 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-skeleton/u-skeleton.vue b/uview-ui/components/u-skeleton/u-skeleton.vue
new file mode 100644
index 0000000..c8cb19e
--- /dev/null
+++ b/uview-ui/components/u-skeleton/u-skeleton.vue
@@ -0,0 +1,199 @@
+<template>
+ <view v-if="loading" :style="{
+ width: windowWinth + 'px',
+ height: windowHeight + 'px',
+ backgroundColor: bgColor,
+ position: 'absolute',
+ left: left + 'px',
+ top: top + 'px',
+ zIndex: 9998,
+ overflow: 'hidden'
+ }"
+ @touchmove.stop.prevent>
+ <view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
+ width: item.width + 'px',
+ height: item.height + 'px',
+ backgroundColor: elColor,
+ position: 'absolute',
+ left: (item.left - left) + 'px',
+ top: (item.top - top) + 'px'
+ }"></view>
+ <view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
+ width: item.width + 'px',
+ height: item.height + 'px',
+ backgroundColor: elColor,
+ borderRadius: item.width/2 + 'px',
+ position: 'absolute',
+ left: (item.left - left) + 'px',
+ top: (item.top - top) + 'px'
+ }"></view>
+ <view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
+ width: item.width + 'px',
+ height: item.height + 'px',
+ backgroundColor: elColor,
+ borderRadius: borderRadius + 'rpx',
+ position: 'absolute',
+ left: (item.left - left) + 'px',
+ top: (item.top - top) + 'px'
+ }"></view>
+ </view>
+</template>
+
+<script>
+ /**
+ * skeleton 楠ㄦ灦灞�
+ * @description 楠ㄦ灦灞忎竴鑸敤浜庨〉闈㈠湪璇锋眰杩滅▼鏁版嵁灏氭湭瀹屾垚鏃讹紝椤甸潰鐢ㄧ伆鑹插潡棰勬樉绀烘湰鏉ョ殑椤甸潰缁撴瀯锛岀粰鐢ㄦ埛鏇村ソ鐨勪綋楠屻��
+ * @tutorial https://www.uviewui.com/components/skeleton.html
+ * @property {String} el-color 楠ㄦ灦鍧楃姸鍏冪礌鐨勮儗鏅鑹诧紙榛樿#e5e5e5锛�
+ * @property {String} bg-color 楠ㄦ灦缁勪欢鑳屾櫙棰滆壊锛堥粯璁�#ffffff锛�
+ * @property {Boolean} animation 楠ㄦ灦鍧楁槸鍚︽樉绀哄姩鐢绘晥鏋滐紙榛樿false锛�
+ * @property {String Number} border-radius u-skeleton-fillet绫诲悕鍏冪礌锛屽搴旂殑楠ㄦ灦鍧楃殑鍦嗚澶у皬锛屽崟浣峳px锛堥粯璁�10锛�
+ * @property {Boolean} loading 鏄惁鏄剧ず楠ㄦ灦缁勪欢锛岃姹傚畬鎴愬悗锛屽皢姝ゅ�艰缃负false锛堥粯璁rue锛�
+ * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
+ */
+ export default {
+ name: "u-skeleton",
+ props: {
+ // 闇�瑕佹覆鏌撶殑鍏冪礌鑳屾櫙棰滆壊锛屽崄鍏繘鍒舵垨鑰卹gb绛夐兘鍙互
+ elColor: {
+ type: String,
+ default: '#e5e5e5'
+ },
+ // 鏁翠釜楠ㄦ灦灞忛〉闈㈢殑鑳屾櫙棰滆壊
+ bgColor: {
+ type: String,
+ default: '#ffffff'
+ },
+ // 鏄惁鏄剧ず鍔犺浇鍔ㄧ敾
+ animation: {
+ type: Boolean,
+ default: false
+ },
+ // 鍦嗚鍊硷紝鍙绫诲悕涓簎-skeleton-fillet鐨勫厓绱犵敓鏁堬紝涓烘暟鍊硷紝涓嶅甫鍗曚綅
+ borderRadius: {
+ type: [String, Number],
+ default: "10"
+ },
+ // 鏄惁鏄剧ず楠ㄦ灦锛宼rue-鏄剧ず锛宖alse-闅愯棌
+ loading: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data() {
+ return {
+ windowWinth: 750, // 楠ㄦ灦灞忓搴�
+ windowHeight: 1500, // 楠ㄦ灦灞忛珮搴�
+ filletNodes: [], // 鍦嗚鍏冪礌
+ circleNodes: [], // 鍦嗗舰鍏冪礌
+ RectNodes: [], // 鐭╁舰鍏冪礌
+ top: 0,
+ left: 0,
+ }
+ },
+ methods: {
+ // 鏌ヨ鍚勮妭鐐圭殑淇℃伅
+ selecterQueryInfo() {
+ // 鑾峰彇鏁翠釜鐖剁粍浠跺鍣ㄧ殑楂樺害锛屽綋鍋氶鏋跺睆鐨勯珮搴�
+ // 鍦ㄥ井淇″皬绋嬪簭涓紝濡傛灉鎶婇鏋跺睆鏀惧叆缁勪欢涓娇鐢ㄧ殑璇濓紝闇�瑕佽皟in(this)涓婁笅鏂囦负鐖剁粍浠舵墠鏈夋晥
+ let query = '';
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
+ this.windowHeight = res[0][0].height;
+ this.windowWinth = res[0][0].width;
+ this.top = res[0][0].bottom - res[0][0].height;
+ this.left = res[0][0].left;
+ });
+ // 鐭╁舰楠ㄦ灦鍏冪礌
+ this.getRectEls();
+ // 鍦嗗舰楠ㄦ灦鍏冪礌
+ this.getCircleEls();
+ // 鍦嗚楠ㄦ灦鍏冪礌
+ this.getFilletEls();
+ },
+ // 鐭╁舰鍏冪礌鍒楄〃
+ getRectEls() {
+ let query = '';
+ // 鍦ㄥ井淇″皬绋嬪簭涓紝濡傛灉鎶婇鏋跺睆鏀惧叆缁勪欢涓娇鐢ㄧ殑璇濓紝闇�瑕佽皟in(this)涓婁笅鏂囦负鐖剁粍浠舵墠鏈夋晥
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
+ this.RectNodes = res[0];
+ });
+ },
+ // 鍦嗚鍏冪礌鍒楄〃
+ getFilletEls() {
+ let query = '';
+ // 鍦ㄥ井淇″皬绋嬪簭涓紝濡傛灉鎶婇鏋跺睆鏀惧叆缁勪欢涓娇鐢ㄧ殑璇濓紝闇�瑕佽皟in(this)涓婁笅鏂囦负鐖剁粍浠舵墠鏈夋晥
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
+ this.filletNodes = res[0];
+ });
+ },
+ // 鍦嗗舰鍏冪礌鍒楄〃
+ getCircleEls() {
+ let query = '';
+ // 鍦ㄥ井淇″皬绋嬪簭涓紝濡傛灉鎶婇鏋跺睆鏀惧叆缁勪欢涓娇鐢ㄧ殑璇濓紝闇�瑕佽皟in(this)涓婁笅鏂囦负鐖剁粍浠舵墠鏈夋晥
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
+ this.circleNodes = res[0];
+ });
+ }
+ },
+ // 缁勪欢琚寕杞�
+ mounted() {
+ // 鑾峰彇绯荤粺淇℃伅
+ let systemInfo = uni.getSystemInfoSync();
+ this.windowHeight = systemInfo.windowHeight;
+ this.windowWinth = systemInfo.windowWidth;
+ this.selecterQueryInfo();
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .skeleton-fade {
+ width: 100%;
+ height: 100%;
+ background: rgb(194, 207, 214);
+ animation-duration: 1.5s;
+ animation-name: blink;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.4;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+ }
+</style>
--
Gitblit v1.9.3