uview-pro 0.2.4 → 0.3.1

package/components/u-skeleton/types.ts

@@ -1,20 +1,22 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * SkeletonProps 骨架屏 props 类型定义
- * @description 骨架屏用于页面数据加载时的占位
- */
-export const SkeletonProps = {
-    /** 骨架块状元素的背景颜色 */
-    elColor: { type: String, default: '#e5e5e5' },
-    /** 整个骨架屏页面的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 是否显示加载动画 */
-    animation: { type: Boolean, default: false },
-    /** 圆角值，只对类名为u-skeleton-fillet的元素生效 */
-    borderRadius: { type: [String, Number] as PropType<string | number>, default: 10 },
-    /** 是否显示骨架，true-显示，false-隐藏 */
-    loading: { type: Boolean, default: true }
-};
-
-export type SkeletonProps = ExtractPropTypes<typeof SkeletonProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * SkeletonProps 骨架屏 props 类型定义
+ * @description 骨架屏用于页面数据加载时的占位
+ */
+export const SkeletonProps = {
+    ...baseProps,
+    /** 骨架块状元素的背景颜色 */
+    elColor: { type: String, default: '#e5e5e5' },
+    /** 整个骨架屏页面的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 是否显示加载动画 */
+    animation: { type: Boolean, default: false },
+    /** 圆角值，只对类名为u-skeleton-fillet的元素生效 */
+    borderRadius: { type: [String, Number] as PropType<string | number>, default: 10 },
+    /** 是否显示骨架，true-显示，false-隐藏 */
+    loading: { type: Boolean, default: true }
+};
+
+export type SkeletonProps = ExtractPropTypes<typeof SkeletonProps>;

package/components/u-skeleton/u-skeleton.vue

@@ -1,220 +1,231 @@
-<template>
-    <view v-if="loading" :style="rootStyle" @touchmove.stop.prevent>
-        <view
-            v-for="item in RectNodes"
-            :key="$u.guid()"
-            :class="[animation ? 'skeleton-fade' : '']"
-            :style="rectStyle(item)"
-        ></view>
-        <view
-            v-for="item in circleNodes"
-            :key="$u.guid()"
-            :class="[animation ? 'skeleton-fade' : '']"
-            :style="circleStyle(item)"
-        ></view>
-        <view
-            v-for="item in filletNodes"
-            :key="$u.guid()"
-            :class="[animation ? 'skeleton-fade' : '']"
-            :style="filletStyle(item)"
-        ></view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
-import { $u } from '../..';
-import { SkeletonProps } from './types';
-
-defineOptions({ name: 'u-skeleton' });
-
-/**
- * skeleton 骨架屏
- * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
- * @tutorial https://uviewpro.cn/zh/components/skeleton.html
- * @property {String} elColor 骨架块状元素的背景颜色（默认#e5e5e5）
- * @property {String} bgColor 骨架组件背景颜色（默认#ffffff）
- * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
- * @property {String|Number} borderRadius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
- * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
- * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
- */
-
-const props = defineProps(SkeletonProps);
-
-const instance = getCurrentInstance();
-const windowWinth = ref(750); // 骨架屏宽度
-const windowHeight = ref(1500); // 骨架屏高度
-const filletNodes = ref<any[]>([]); // 圆角骨架元素
-const circleNodes = ref<any[]>([]); // 圆形骨架元素
-const RectNodes = ref<any[]>([]); // 矩形骨架元素
-const top = ref(0);
-const left = ref(0);
-
-// 计算根元素的样式
-const rootStyle = computed(() => ({
-    width: windowWinth.value + 'px',
-    height: windowHeight.value + 'px',
-    backgroundColor: props.bgColor,
-    position: 'absolute' as const,
-    left: left.value + 'px',
-    top: top.value + 'px',
-    zIndex: 9998,
-    overflow: 'hidden'
-}));
-
-// 矩形骨架元素样式
-const rectStyle = (item: any) => ({
-    width: item.width + 'px',
-    height: item.height + 'px',
-    backgroundColor: props.elColor,
-    position: 'absolute' as const,
-    left: item.left - left.value + 'px',
-    top: item.top - top.value + 'px'
-});
-
-// 圆形骨架元素样式
-const circleStyle = (item: any) => ({
-    width: item.width + 'px',
-    height: item.height + 'px',
-    backgroundColor: props.elColor,
-    borderRadius: item.width / 2 + 'px',
-    position: 'absolute' as const,
-    left: item.left - left.value + 'px',
-    top: item.top - top.value + 'px'
-});
-
-// 圆角骨架元素样式
-const filletStyle = (item: any) => ({
-    width: item.width + 'px',
-    height: item.height + 'px',
-    backgroundColor: props.elColor,
-    borderRadius: props.borderRadius + 'rpx',
-    position: 'absolute' as const,
-    left: item.left - left.value + 'px',
-    top: item.top - top.value + 'px'
-});
-
-/**
- * 查询各节点的信息
- * @description 获取骨架屏各类型元素的位置信息
- */
-function selecterQueryInfo() {
-    // 获取整个父组件容器的高度，当做骨架屏的高度
-    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
-    let query: any = '';
-    // #ifdef MP-WEIXIN
-    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
-    // #endif
-    // #ifndef MP-WEIXIN
-    query = uni.createSelectorQuery();
-    // #endif
-    query
-        .selectAll('.u-skeleton')
-        .boundingClientRect()
-        .exec((res: any) => {
-            windowHeight.value = res[0][0].height;
-            windowWinth.value = res[0][0].width;
-            top.value = res[0][0].bottom - res[0][0].height;
-            left.value = res[0][0].left;
-        });
-    // 矩形骨架元素
-    getRectEls();
-    // 圆形骨架元素
-    getCircleEls();
-    // 圆角骨架元素
-    getFilletEls();
-}
-
-/**
- * 获取矩形骨架元素
- */
-function getRectEls() {
-    let query: any = '';
-    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
-    // #ifdef MP-WEIXIN
-    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
-    // #endif
-    // #ifndef MP-WEIXIN
-    query = uni.createSelectorQuery();
-    // #endif
-    query
-        .selectAll('.u-skeleton-rect')
-        .boundingClientRect()
-        .exec((res: any) => {
-            RectNodes.value = res[0];
-        });
-}
-
-/**
- * 获取圆角骨架元素
- */
-function getFilletEls() {
-    let query: any = '';
-    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
-    // #ifdef MP-WEIXIN
-    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
-    // #endif
-    // #ifndef MP-WEIXIN
-    query = uni.createSelectorQuery();
-    // #endif
-    query
-        .selectAll('.u-skeleton-fillet')
-        .boundingClientRect()
-        .exec((res: any) => {
-            filletNodes.value = res[0];
-        });
-}
-
-/**
- * 获取圆形骨架元素
- */
-function getCircleEls() {
-    let query: any = '';
-    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
-    // #ifdef MP-WEIXIN
-    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
-    // #endif
-    // #ifndef MP-WEIXIN
-    query = uni.createSelectorQuery();
-    // #endif
-    query
-        .selectAll('.u-skeleton-circle')
-        .boundingClientRect()
-        .exec((res: any) => {
-            circleNodes.value = res[0];
-        });
-}
-
-onMounted(() => {
-    // 获取系统信息
-    const systemInfo = uni.getSystemInfoSync();
-    windowHeight.value = systemInfo.windowHeight;
-    windowWinth.value = systemInfo.windowWidth;
-    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>
+<template>
+    <view v-if="loading" :class="customClass" :style="$u.toStyle(rootStyle, customStyle)" @touchmove.stop.prevent>
+        <view
+            v-for="item in RectNodes"
+            :key="$u.guid()"
+            :class="[animation ? 'skeleton-fade' : '']"
+            :style="rectStyle(item)"
+        ></view>
+        <view
+            v-for="item in circleNodes"
+            :key="$u.guid()"
+            :class="[animation ? 'skeleton-fade' : '']"
+            :style="circleStyle(item)"
+        ></view>
+        <view
+            v-for="item in filletNodes"
+            :key="$u.guid()"
+            :class="[animation ? 'skeleton-fade' : '']"
+            :style="filletStyle(item)"
+        ></view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-skeleton',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+import { SkeletonProps } from './types';
+
+/**
+ * skeleton 骨架屏
+ * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+ * @tutorial https://uviewpro.cn/zh/components/skeleton.html
+ * @property {String} elColor 骨架块状元素的背景颜色（默认#e5e5e5）
+ * @property {String} bgColor 骨架组件背景颜色（默认#ffffff）
+ * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
+ * @property {String|Number} borderRadius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
+ * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
+ * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
+ */
+
+const props = defineProps(SkeletonProps);
+
+const instance = getCurrentInstance();
+const windowWinth = ref(750); // 骨架屏宽度
+const windowHeight = ref(1500); // 骨架屏高度
+const filletNodes = ref<any[]>([]); // 圆角骨架元素
+const circleNodes = ref<any[]>([]); // 圆形骨架元素
+const RectNodes = ref<any[]>([]); // 矩形骨架元素
+const top = ref(0);
+const left = ref(0);
+
+// 计算根元素的样式
+const rootStyle = computed(() => ({
+    width: windowWinth.value + 'px',
+    height: windowHeight.value + 'px',
+    backgroundColor: props.bgColor,
+    position: 'absolute' as const,
+    left: left.value + 'px',
+    top: top.value + 'px',
+    zIndex: 9998,
+    overflow: 'hidden'
+}));
+
+// 矩形骨架元素样式
+const rectStyle = (item: any) => ({
+    width: item.width + 'px',
+    height: item.height + 'px',
+    backgroundColor: props.elColor,
+    position: 'absolute' as const,
+    left: item.left - left.value + 'px',
+    top: item.top - top.value + 'px'
+});
+
+// 圆形骨架元素样式
+const circleStyle = (item: any) => ({
+    width: item.width + 'px',
+    height: item.height + 'px',
+    backgroundColor: props.elColor,
+    borderRadius: item.width / 2 + 'px',
+    position: 'absolute' as const,
+    left: item.left - left.value + 'px',
+    top: item.top - top.value + 'px'
+});
+
+// 圆角骨架元素样式
+const filletStyle = (item: any) => ({
+    width: item.width + 'px',
+    height: item.height + 'px',
+    backgroundColor: props.elColor,
+    borderRadius: props.borderRadius + 'rpx',
+    position: 'absolute' as const,
+    left: item.left - left.value + 'px',
+    top: item.top - top.value + 'px'
+});
+
+/**
+ * 查询各节点的信息
+ * @description 获取骨架屏各类型元素的位置信息
+ */
+function selecterQueryInfo() {
+    // 获取整个父组件容器的高度，当做骨架屏的高度
+    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+    let query: any = '';
+    // #ifdef MP-WEIXIN
+    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
+    // #endif
+    // #ifndef MP-WEIXIN
+    query = uni.createSelectorQuery();
+    // #endif
+    query
+        .selectAll('.u-skeleton')
+        .boundingClientRect()
+        .exec((res: any) => {
+            windowHeight.value = res[0][0].height;
+            windowWinth.value = res[0][0].width;
+            top.value = res[0][0].bottom - res[0][0].height;
+            left.value = res[0][0].left;
+        });
+    // 矩形骨架元素
+    getRectEls();
+    // 圆形骨架元素
+    getCircleEls();
+    // 圆角骨架元素
+    getFilletEls();
+}
+
+/**
+ * 获取矩形骨架元素
+ */
+function getRectEls() {
+    let query: any = '';
+    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+    // #ifdef MP-WEIXIN
+    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
+    // #endif
+    // #ifndef MP-WEIXIN
+    query = uni.createSelectorQuery();
+    // #endif
+    query
+        .selectAll('.u-skeleton-rect')
+        .boundingClientRect()
+        .exec((res: any) => {
+            RectNodes.value = res[0];
+        });
+}
+
+/**
+ * 获取圆角骨架元素
+ */
+function getFilletEls() {
+    let query: any = '';
+    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+    // #ifdef MP-WEIXIN
+    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
+    // #endif
+    // #ifndef MP-WEIXIN
+    query = uni.createSelectorQuery();
+    // #endif
+    query
+        .selectAll('.u-skeleton-fillet')
+        .boundingClientRect()
+        .exec((res: any) => {
+            filletNodes.value = res[0];
+        });
+}
+
+/**
+ * 获取圆形骨架元素
+ */
+function getCircleEls() {
+    let query: any = '';
+    // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+    // #ifdef MP-WEIXIN
+    query = uni.createSelectorQuery().in(instance?.proxy?.$parent);
+    // #endif
+    // #ifndef MP-WEIXIN
+    query = uni.createSelectorQuery();
+    // #endif
+    query
+        .selectAll('.u-skeleton-circle')
+        .boundingClientRect()
+        .exec((res: any) => {
+            circleNodes.value = res[0];
+        });
+}
+
+onMounted(() => {
+    // 获取系统信息
+    const systemInfo = uni.getSystemInfoSync();
+    windowHeight.value = systemInfo.windowHeight;
+    windowWinth.value = systemInfo.windowWidth;
+    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>

package/components/u-slider/types.ts

@@ -1,32 +1,34 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * SliderProps 滑块选择器 props 类型定义
- * @description 滑块选择器，支持自定义样式、步长、禁用等
- */
-export const SliderProps = {
-    /** 当前进度百分比值，范围0-100 */
-    modelValue: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 是否禁用滑块 */
-    disabled: { type: Boolean, default: false },
-    /** 滑块宽度，高等于宽，单位rpx */
-    blockWidth: { type: [Number, String] as PropType<number | string>, default: 30 },
-    /** 最小值 */
-    min: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 最大值 */
-    max: { type: [Number, String] as PropType<number | string>, default: 100 },
-    /** 步进值 */
-    step: { type: [Number, String] as PropType<number | string>, default: 1 },
-    /** 滑块条高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 6 },
-    /** 进度条的激活部分颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 进度条的背景颜色 */
-    inactiveColor: { type: String, default: '#c0c4cc' },
-    /** 滑块的背景颜色 */
-    blockColor: { type: String, default: '#ffffff' },
-    /** 用户对滑块的自定义颜色 */
-    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
-};
-
-export type SliderProps = ExtractPropTypes<typeof SliderProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * SliderProps 滑块选择器 props 类型定义
+ * @description 滑块选择器，支持自定义样式、步长、禁用等
+ */
+export const SliderProps = {
+    ...baseProps,
+    /** 当前进度百分比值，范围0-100 */
+    modelValue: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否禁用滑块 */
+    disabled: { type: Boolean, default: false },
+    /** 滑块宽度，高等于宽，单位rpx */
+    blockWidth: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 最小值 */
+    min: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 最大值 */
+    max: { type: [Number, String] as PropType<number | string>, default: 100 },
+    /** 步进值 */
+    step: { type: [Number, String] as PropType<number | string>, default: 1 },
+    /** 滑块条高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 6 },
+    /** 进度条的激活部分颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 进度条的背景颜色 */
+    inactiveColor: { type: String, default: '#c0c4cc' },
+    /** 滑块的背景颜色 */
+    blockColor: { type: String, default: '#ffffff' },
+    /** 用户对滑块的自定义颜色 */
+    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type SliderProps = ExtractPropTypes<typeof SliderProps>;