uview-pro 0.0.1

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

@@ -0,0 +1,230 @@
+<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 '../..';
+
+defineOptions({ name: 'u-skeleton' });
+
+/**
+ * skeleton 骨架屏
+ * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+ * @tutorial https://www.uviewui.com/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({
+    /** 骨架块状元素的背景颜色 */
+    elColor: {
+        type: String,
+        default: '#e5e5e5'
+    },
+    /** 整个骨架屏页面的背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 是否显示加载动画 */
+    animation: {
+        type: Boolean,
+        default: false
+    },
+    /** 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位 */
+    borderRadius: {
+        type: [String, Number],
+        default: 10
+    },
+    /** 是否显示骨架，true-显示，false-隐藏 */
+    loading: {
+        type: Boolean,
+        default: true
+    }
+});
+
+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/u-slider.vue

@@ -0,0 +1,293 @@
+<template>
+    <view
+        class="u-slider"
+        @tap="onClick"
+        :class="[disabled ? 'u-slider--disabled' : '']"
+        :style="{
+            backgroundColor: inactiveColor
+        }"
+    >
+        <view
+            class="u-slider__gap"
+            :style="[
+                barStyle,
+                {
+                    height: height + 'rpx',
+                    backgroundColor: activeColor
+                }
+            ]"
+        >
+            <view class="u-slider__button-wrap" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+                <slot v-if="slots.default" />
+                <view
+                    v-else
+                    class="u-slider__button"
+                    :style="[
+                        blockStyle,
+                        {
+                            height: blockWidth + 'rpx',
+                            width: blockWidth + 'rpx',
+                            backgroundColor: blockColor
+                        }
+                    ]"
+                />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * slider 滑块选择器
+ * @tutorial https://uviewui.com/components/slider.html
+ * @property {Number | String} value 滑块默认值（默认0）
+ * @property {Number | String} min 最小值（默认0）
+ * @property {Number | String} max 最大值（默认100）
+ * @property {Number | String} step 步长（默认1）
+ * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
+ * @property {Number | String} height 滑块条高度，单位rpx（默认6）
+ * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+ * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+ * @property {String} blockColor 滑块颜色（默认#ffffff）
+ * @property {Object} blockStyle 给滑块自定义样式，对象形式
+ * @property {Boolean} disabled 是否禁用滑块(默认为false)
+ * @event start 滑动触发
+ * @event moving 正在滑动中
+ * @event end 滑动结束
+ * @example <u-slider v-model="value" />
+ */
+import { ref, watch, onMounted, useSlots, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-slider' });
+
+const emit = defineEmits(['update:modelValue', 'start', 'moving', 'end']);
+
+const props = defineProps({
+    /** 当前进度百分比值，范围0-100 */
+    modelValue: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 是否禁用滑块 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 滑块宽度，高等于宽，单位rpx */
+    blockWidth: {
+        type: [Number, String],
+        default: 30
+    },
+    /** 最小值 */
+    min: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 最大值 */
+    max: {
+        type: [Number, String],
+        default: 100
+    },
+    /** 步进值 */
+    step: {
+        type: [Number, String],
+        default: 1
+    },
+    /** 滑块条高度，单位rpx */
+    height: {
+        type: [Number, String],
+        default: 6
+    },
+    /** 进度条的激活部分颜色 */
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 进度条的背景颜色 */
+    inactiveColor: {
+        type: String,
+        default: '#c0c4cc'
+    },
+    /** 滑块的背景颜色 */
+    blockColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 用户对滑块的自定义颜色 */
+    blockStyle: {
+        type: Object as () => Record<string, any>,
+        default: () => ({})
+    }
+});
+
+const slots = useSlots();
+const instance = getCurrentInstance();
+
+// 滑块条的尺寸信息
+const sliderRect = ref<{ left: number; width: number }>({ left: 0, width: 0 });
+const startX = ref(0);
+const status = ref<'start' | 'moving' | 'end'>('end');
+const newValue = ref(0);
+const distanceX = ref(0);
+const startValue = ref(0);
+const barStyle = ref<Record<string, any>>({});
+
+// 监听 value 变化，非滑动状态时才更新滑块值
+watch(
+    () => props.modelValue,
+    n => {
+        // 只有在非滑动状态时，才可以通过modelValue更新滑块值，这里监听，是为了让用户触发
+        if (status.value === 'end') updateValue(props.modelValue, false);
+    }
+);
+
+onMounted(() => {
+    // 获取滑块条的尺寸信息
+    $u.getRect('.u-slider', instance).then((rect: { left: number; width: number }) => {
+        sliderRect.value = rect;
+    });
+    updateValue(props.modelValue, false);
+});
+
+/**
+ * 触摸开始
+ */
+function onTouchStart(event: TouchEvent) {
+    if (props.disabled) return;
+    startX.value = 0;
+    // 触摸点集
+    const touches = event.touches[0];
+    // 触摸点到屏幕左边的距离
+    startX.value = touches.clientX;
+    // 此处的props.modelValue虽为props值，但是通过emit('update:modelValue')进行了修改
+    startValue.value = format(props.modelValue);
+    // 标示当前的状态为开始触摸滑动
+    status.value = 'start';
+}
+
+/**
+ * 触摸移动
+ */
+function onTouchMove(event: TouchEvent) {
+    if (props.disabled) return;
+    // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+    // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+    if (status.value === 'start') emit('start');
+    const touches = event.touches[0];
+    // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+    distanceX.value = touches.clientX - sliderRect.value.left;
+    // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+    // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+    newValue.value = (distanceX.value / sliderRect.value.width) * 100;
+    status.value = 'moving';
+    // 发出moving事件
+    emit('moving');
+    updateValue(newValue.value, true);
+}
+
+/**
+ * 触摸结束
+ */
+function onTouchEnd() {
+    if (props.disabled) return;
+    if (status.value === 'moving') {
+        updateValue(newValue.value, false);
+        emit('end');
+    }
+    status.value = 'end';
+}
+
+/**
+ * 更新滑块值
+ * @param value 新值
+ * @param drag 是否为拖动
+ */
+function updateValue(value: number | string, drag: boolean) {
+    // 去掉小数部分，同时也是对step步进的处理
+    const width = format(value);
+    // 不允许滑动的值超过max最大值，百分比也不能超过100
+    if (width > Number(props.max) || width > 100) return;
+    // 设置移动的百分比值
+    const style: Record<string, any> = {
+        width: width + '%'
+    };
+    // 移动期间无需过渡动画
+    if (drag === true) {
+        style.transition = 'none';
+    } else {
+        // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+        delete style.transition;
+    }
+    // 修改value值
+    emit('update:modelValue', width);
+    barStyle.value = style;
+}
+
+/**
+ * 格式化滑块值
+ * @param value 输入值
+ * @returns 处理后的值
+ */
+function format(value: number | string): number {
+    // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+    return Math.round(Math.max(Number(props.min), Math.min(Number(value), Number(props.max))) / Number(props.step)) * Number(props.step);
+}
+
+/**
+ * 点击滑块条
+ */
+function onClick(event: any) {
+    if (props.disabled) return;
+    // 直接点击滑块的情况，计算方式与onTouchMove方法相同
+    const value = ((event.detail.x - sliderRect.value.left) / sliderRect.value.width) * 100;
+    updateValue(value, false);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-slider {
+    position: relative;
+    border-radius: 999px;
+    background-color: #ebedf0;
+}
+
+.u-slider:before {
+    position: absolute;
+    right: 0;
+    left: 0;
+    content: '';
+    top: -8px;
+    bottom: -8px;
+    z-index: -1;
+}
+
+.u-slider__gap {
+    position: relative;
+    border-radius: inherit;
+    transition: width 0.2s;
+    background-color: #1989fa;
+}
+
+.u-slider__button {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    background-color: #fff;
+    cursor: pointer;
+}
+
+.u-slider__button-wrap {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate3d(50%, -50%, 0);
+}
+
+.u-slider--disabled {
+    opacity: 0.5;
+}
+</style>