uview-pro 0.0.1

package/components/u-steps/u-steps.vue

@@ -0,0 +1,200 @@
+<template>
+    <view class="">
+        <view class="u-steps" :style="directionStyle">
+            <view class="u-steps__item" :class="['u-steps__item--' + direction]" v-for="(item, index) in list" :key="index">
+                <view class="u-steps__item__num" v-if="mode == 'number'" :style="numberStyle(index)">
+                    <text v-if="currentIndex < index" :style="textStyle(index)">
+                        {{ index + 1 }}
+                    </text>
+                    <u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
+                </view>
+                <view class="u-steps__item__dot" v-if="mode == 'dot'" :style="dotStyle(index)"></view>
+                <text class="u-line-1" :style="textStyle(index)" :class="['u-steps__item__text--' + direction]">
+                    {{ item.name }}
+                </text>
+                <view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1">
+                    <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({ name: 'u-steps' });
+
+/**
+ * steps 步骤条
+ * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+ * @tutorial https://www.uviewui.com/components/steps.html
+ * @property {String} mode 设置模式（默认dot）
+ * @property {Array<{name: string}>} list 数轴条数据，数组。具体见上方示例
+ * @property {String} type type主题（默认primary）
+ * @property {String} direction row-横向，column-竖向（默认row）
+ * @property {Number|String} current 设置当前处于第几步
+ * @property {String} activeColor 已完成步骤的激活颜色，如设置，type值会失效
+ * @property {String} unActiveColor 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
+ * @property {String} icon 自定义图标
+ * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
+ */
+
+const props = defineProps({
+    /** 步骤条的类型，dot|number */
+    mode: {
+        type: String,
+        default: 'dot'
+    },
+    /** 步骤条的数据 */
+    list: {
+        type: Array as () => { name: string }[],
+        default: (): { name: string }[] => []
+    },
+    /** 主题类型, primary|success|info|warning|error */
+    type: {
+        type: String,
+        default: 'primary'
+    },
+    /** 当前哪一步是激活的 */
+    current: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 激活步骤的颜色 */
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 未激活的颜色 */
+    unActiveColor: {
+        type: String,
+        default: '#909399'
+    },
+    /** 自定义图标 */
+    icon: {
+        type: String,
+        default: 'checkmark'
+    },
+    /** step的排列方向，row-横向，column-竖向 */
+    direction: {
+        type: String,
+        default: 'row'
+    }
+});
+
+// 计算属性，计算当前步骤的索引值
+// 如果 current 是字符串，则转换为数字，否则直接使用数字
+const currentIndex = computed(() => (typeof props.current === 'string' ? Number(props.current) : props.current));
+
+// 计算方向样式
+const directionStyle = computed(() => ({ flexDirection: props.direction as 'row' | 'column' }));
+
+// 计算当前步骤的样式
+const numberStyle = (index: number) => ({
+    backgroundColor: currentIndex.value < index ? 'transparent' : props.activeColor,
+    borderColor: currentIndex.value < index ? props.unActiveColor : props.activeColor
+});
+
+// 计算当前步骤的样式
+const dotStyle = (index: number) => ({
+    backgroundColor: index <= currentIndex.value ? props.activeColor : props.unActiveColor
+});
+
+// 计算当前步骤的文字样式
+const textStyle = (index: number) => ({
+    color: index <= currentIndex.value ? props.activeColor : props.unActiveColor
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+$u-steps-item-number-width: 44rpx;
+$u-steps-item-dot-width: 20rpx;
+
+.u-steps {
+    @include vue-flex;
+
+    .u-steps__item {
+        flex: 1;
+        text-align: center;
+        position: relative;
+        min-width: 100rpx;
+        font-size: 26rpx;
+        color: #8799a3;
+        @include vue-flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+
+        &--row {
+            @include vue-flex;
+            flex-direction: column;
+
+            .u-steps__item__line {
+                position: absolute;
+                z-index: 0;
+                left: 75%;
+                width: 50%;
+
+                &--dot {
+                    top: calc(#{$u-steps-item-dot-width} / 2);
+                }
+
+                &--number {
+                    top: calc(#{$u-steps-item-number-width} / 2);
+                }
+            }
+        }
+
+        &--column {
+            @include vue-flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            min-height: 120rpx;
+
+            .u-steps__item__line {
+                position: absolute;
+                z-index: 0;
+                height: 50%;
+                top: 75%;
+
+                &--dot {
+                    left: calc(#{$u-steps-item-dot-width} / 2);
+                }
+
+                &--number {
+                    left: calc(#{$u-steps-item-number-width} / 2);
+                }
+            }
+        }
+
+        &__num {
+            @include vue-flex;
+            align-items: center;
+            justify-content: center;
+            width: $u-steps-item-number-width;
+            height: $u-steps-item-number-width;
+            border: 1px solid #8799a3;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+
+        &__dot {
+            width: $u-steps-item-dot-width;
+            height: $u-steps-item-dot-width;
+            @include vue-flex;
+            border-radius: 50%;
+        }
+
+        &__text--row {
+            margin-top: 14rpx;
+        }
+
+        &__text--column {
+            margin-left: 14rpx;
+        }
+    }
+}
+</style>

package/components/u-sticky/u-sticky.vue

@@ -0,0 +1,189 @@
+<template>
+    <view class="">
+        <view
+            class="u-sticky-wrap"
+            :class="[elClass]"
+            :style="{
+                height: fixed ? height + 'px' : 'auto',
+                backgroundColor: bgColor
+            }"
+        >
+            <view
+                class="u-sticky"
+                :style="{
+                    position: fixed ? 'fixed' : 'static',
+                    top: stickyTop + 'px',
+                    left: left + 'px',
+                    width: width == 'auto' ? 'auto' : width + 'px',
+                    zIndex: uZIndex
+                }"
+            >
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-sticky' });
+
+/**
+ * sticky 吸顶
+ * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+ * @tutorial https://www.uviewui.com/components/sticky.html
+ * @property {String|Number} offsetTop 吸顶时与顶部的距离，单位rpx（默认0）
+ * @property {String|Number} index 自定义标识，用于区分是哪一个组件
+ * @property {Boolean} enable 是否开启吸顶功能（默认true）
+ * @property {String} bgColor 组件背景颜色（默认#ffffff）
+ * @property {String|Number} zIndex 吸顶时的z-index值（默认970）
+ * @property {String|Number} h5NavHeight 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
+ * @event fixed 组件吸顶时触发
+ * @event unfixed 组件取消吸顶时触发
+ * @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
+ */
+
+const emit = defineEmits(['fixed', 'unfixed']);
+
+const props = defineProps({
+    /** 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px */
+    offsetTop: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 列表中的索引值 */
+    index: {
+        type: [Number, String],
+        default: ''
+    },
+    /** 是否开启吸顶功能 */
+    enable: {
+        type: Boolean,
+        default: true
+    },
+    /** h5顶部导航栏的高度 */
+    h5NavHeight: {
+        type: [Number, String],
+        default: 44
+    },
+    /** 吸顶区域的背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** z-index值 */
+    zIndex: {
+        type: [Number, String],
+        default: ''
+    }
+});
+const instance = getCurrentInstance();
+const fixed = ref(false);
+const height = ref<'auto' | number>('auto');
+const stickyTop = ref(0);
+const elClass = ref('');
+const left = ref(0);
+const width = ref<'auto' | number>('auto');
+let contentObserver: any = null;
+
+elClass.value = $u.guid();
+
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u?.zIndex?.sticky ?? 970));
+
+watch(
+    () => props.offsetTop,
+    () => {
+        initObserver();
+    }
+);
+
+watch(
+    () => props.enable,
+    val => {
+        if (val == false) {
+            fixed.value = false;
+            disconnectObserver('contentObserver');
+        } else {
+            initObserver();
+        }
+    }
+);
+
+onMounted(() => {
+    initObserver();
+});
+
+onBeforeUnmount(() => {
+    disconnectObserver('contentObserver');
+});
+
+/**
+ * 初始化 IntersectionObserver 监听
+ */
+function initObserver() {
+    if (!props.enable) return;
+    // #ifdef H5
+    stickyTop.value = Number(props.offsetTop) !== 0 ? uni.upx2px(Number(props.offsetTop)) + Number(props.h5NavHeight) : Number(props.h5NavHeight);
+    // #endif
+    // #ifndef H5
+    stickyTop.value = Number(props.offsetTop) !== 0 ? uni.upx2px(Number(props.offsetTop)) : 0;
+    // #endif
+    console.log('stickyTop.value', stickyTop.value);
+    disconnectObserver('contentObserver');
+    $u.getRect('.' + elClass.value, instance).then((res: any) => {
+        height.value = res.height;
+        left.value = res.left;
+        width.value = res.width;
+        nextTick(() => {
+            observeContent();
+        });
+    });
+}
+
+/**
+ * 创建 IntersectionObserver 监听内容区域
+ */
+function observeContent() {
+    disconnectObserver('contentObserver');
+
+    contentObserver = uni.createIntersectionObserver(instance?.proxy, {
+        thresholds: [0.95, 0.98, 1]
+    });
+    contentObserver.relativeToViewport({
+        top: -stickyTop.value
+    });
+    contentObserver.observe('.' + elClass.value, (res: any) => {
+        if (!props.enable) return;
+        setFixed(res.boundingClientRect.top);
+    });
+}
+
+/**
+ * 设置 fixed 状态
+ */
+function setFixed(top: number) {
+    const isFixed = top < stickyTop.value;
+    if (isFixed) emit('fixed', props.index);
+    else if (fixed.value) emit('unfixed', props.index);
+    fixed.value = isFixed;
+}
+
+/**
+ * 断开 observer
+ */
+function disconnectObserver(observerName: string) {
+    if (observerName === 'contentObserver' && contentObserver) {
+        contentObserver.disconnect();
+        contentObserver = null;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-sticky {
+    z-index: 9999999999;
+}
+</style>