uview-pro 0.2.4 → 0.3.1

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

@@ -1,162 +1,178 @@
-<template>
-    <view>
-        <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 '../..';
-import { StickyProps } from './types';
-
-defineOptions({ name: 'u-sticky' });
-
-/**
- * sticky 吸顶
- * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
- * @tutorial https://uviewpro.cn/zh/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 props = defineProps(StickyProps);
-
-const emit = defineEmits(['fixed', 'unfixed']);
-
-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>
+<template>
+    <view>
+        <view
+            class="u-sticky-wrap"
+            :class="[elClass, customClass]"
+            :style="
+                $u.toStyle(
+                    {
+                        height: fixed ? height + 'px' : 'auto',
+                        backgroundColor: bgColor
+                    },
+                    customStyle
+                )
+            "
+        >
+            <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 lang="ts">
+export default {
+    name: 'u-sticky',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+import { StickyProps } from './types';
+
+/**
+ * sticky 吸顶
+ * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+ * @tutorial https://uviewpro.cn/zh/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 props = defineProps(StickyProps);
+
+const emit = defineEmits(['fixed', 'unfixed']);
+
+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>

package/components/u-subsection/types.ts

@@ -1,36 +1,38 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { SubsectionListItem, SubsectionMode } from '../../types/global';
-
-/**
- * SubsectionProps 分段器 props 类型定义
- * @description 分段器，支持按钮/分段模式、动画、颜色等
- */
-
-export const SubsectionProps = {
-    /** tab的数据 */
-    list: { type: Array as PropType<Array<string | SubsectionListItem>>, default: () => [] },
-    /** 当前活动的tab的index */
-    current: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 激活的颜色 */
-    activeColor: { type: String, default: '#303133' },
-    /** 未激活的颜色 */
-    inactiveColor: { type: String, default: '#606266' },
-    /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
-    mode: { type: String as PropType<SubsectionMode>, default: 'button' },
-    /** 字体大小，单位rpx */
-    fontSize: { type: [Number, String] as PropType<number | string>, default: 28 },
-    /** 是否开启动画效果 */
-    animation: { type: Boolean, default: true },
-    /** 组件的高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 70 },
-    /** 激活tab的字体是否加粗 */
-    bold: { type: Boolean, default: true },
-    /** mode=button时，组件背景颜色 */
-    bgColor: { type: String, default: '#eeeeef' },
-    /** mode = button时，滑块背景颜色 */
-    buttonColor: { type: String, default: '#ffffff' },
-    /** 在切换分段器的时候，是否让设备震一下 */
-    vibrateShort: { type: Boolean, default: false }
-};
-
-export type SubsectionProps = ExtractPropTypes<typeof SubsectionProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { SubsectionListItem, SubsectionMode } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * SubsectionProps 分段器 props 类型定义
+ * @description 分段器，支持按钮/分段模式、动画、颜色等
+ */
+
+export const SubsectionProps = {
+    ...baseProps,
+    /** tab的数据 */
+    list: { type: Array as PropType<Array<string | SubsectionListItem>>, default: () => [] },
+    /** 当前活动的tab的index */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 激活的颜色 */
+    activeColor: { type: String, default: '#303133' },
+    /** 未激活的颜色 */
+    inactiveColor: { type: String, default: '#606266' },
+    /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
+    mode: { type: String as PropType<SubsectionMode>, default: 'button' },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 28 },
+    /** 是否开启动画效果 */
+    animation: { type: Boolean, default: true },
+    /** 组件的高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 70 },
+    /** 激活tab的字体是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** mode=button时，组件背景颜色 */
+    bgColor: { type: String, default: '#eeeeef' },
+    /** mode = button时，滑块背景颜色 */
+    buttonColor: { type: String, default: '#ffffff' },
+    /** 在切换分段器的时候，是否让设备震一下 */
+    vibrateShort: { type: Boolean, default: false }
+};
+
+export type SubsectionProps = ExtractPropTypes<typeof SubsectionProps>;