@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismSticky/PrismSticky.vue

@@ -1,173 +1,173 @@
-<template>
-  <view class="prism-sticky">
-    <view class="prism-sticky__wrap" :class="[elClass]" :style="wrapStyle">
-      <view
-        class="prism-sticky__content"
-        :style="{
-          position: fixed ? 'fixed' : 'static',
-          top: stickyTop + 'px',
-          left: left + 'px',
-          width: width === 'auto' ? 'auto' : width + 'px',
-          zIndex: zIndex,
-          background: bgColor
-        }"
-      >
-        <slot></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
-
-const props = defineProps({
-  // 吸顶时距离顶部的距离（rpx）
-  offsetTop: {
-    type: Number,
-    default: 0
-  },
-  // 自定义导航栏高度（px）
-  navHeight: {
-    type: Number,
-    default: 0
-  },
-  // 是否开启吸顶
-  enabled: {
-    type: Boolean,
-    default: true
-  },
-  // 背景颜色
-  bgColor: {
-    type: String,
-    default: ''
-  },
-  // z-index
-  zIndex: {
-    type: Number,
-    default: 100
-  }
-});
-
-const emit = defineEmits(['fixed', 'unfixed']);
-
-const instance = getCurrentInstance();
-
-// 生成唯一类名
-const elClass = ref('prism-sticky-' + Math.random().toString(36).slice(2, 10));
-
-// 状态
-const fixed = ref(false);
-const height = ref('auto');
-const width = ref('auto');
-const left = ref(0);
-const stickyTop = ref(0);
-
-// 观察器
-let observer = null;
-
-// 包裹层样式
-const wrapStyle = computed(() => ({
-  height: fixed.value ? height.value + 'px' : 'auto',
-  zIndex: props.zIndex
-}));
-
-// 初始化观察器
-function initObserver() {
-  if (!props.enabled) return;
-
-  // 计算吸顶位置
-  // #ifdef H5
-  stickyTop.value = props.navHeight + (props.offsetTop ? uni.upx2px(props.offsetTop) : 0);
-  // #endif
-  // #ifndef H5
-  stickyTop.value = props.navHeight + (props.offsetTop ? uni.upx2px(props.offsetTop) : 0);
-  // #endif
-
-  disconnectObserver();
-
-  // 获取元素信息
-  const query = uni.createSelectorQuery().in(instance.proxy);
-  query.select('.' + elClass.value).boundingClientRect((res) => {
-    if (res) {
-      height.value = res.height;
-      left.value = res.left;
-      width.value = res.width;
-      connectObserver();
-    }
-  }).exec();
-}
-
-// 连接观察器
-function connectObserver() {
-  disconnectObserver();
-
-  observer = uni.createIntersectionObserver(instance.proxy, {
-    thresholds: [0.95, 0.98, 1]
-  });
-
-  observer.relativeToViewport({
-    top: -stickyTop.value
-  });
-
-  observer.observe('.' + elClass.value, (res) => {
-    if (!props.enabled) return;
-    setFixed(res.boundingClientRect.top);
-  });
-}
-
-// 设置固定状态
-function setFixed(top) {
-  const isFixed = top < stickyTop.value;
-  if (isFixed && !fixed.value) {
-    emit('fixed');
-  } else if (!isFixed && fixed.value) {
-    emit('unfixed');
-  }
-  fixed.value = isFixed;
-}
-
-// 断开观察器
-function disconnectObserver() {
-  if (observer) {
-    observer.disconnect();
-    observer = null;
-  }
-}
-
-// 监听属性变化
-watch(() => props.offsetTop, () => initObserver());
-watch(() => props.navHeight, () => initObserver());
-watch(() => props.enabled, (val) => {
-  if (!val) {
-    fixed.value = false;
-    disconnectObserver();
-  } else {
-    initObserver();
-  }
-});
-
-onMounted(() => {
-  setTimeout(() => {
-    initObserver();
-  }, 50);
-});
-</script>
-
-<style lang="scss">
-.prism-sticky {
-  position: relative;
-}
-
-.prism-sticky__wrap {
-  position: relative;
-}
-
-.prism-sticky__content {
-  background: var(--prism-bg-color-card, #FFFFFF);
-
-  .dark-mode & {
-    background: var(--prism-bg-color-card, #242424);
-  }
-}
-</style>
+<template>
+  <view class="prism-sticky">
+    <view class="prism-sticky__wrap" :class="[elClass]" :style="wrapStyle">
+      <view
+        class="prism-sticky__content"
+        :style="{
+          position: fixed ? 'fixed' : 'static',
+          top: stickyTop + 'px',
+          left: left + 'px',
+          width: width === 'auto' ? 'auto' : width + 'px',
+          zIndex: zIndex,
+          background: bgColor
+        }"
+      >
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 吸顶时距离顶部的距离（rpx）
+  offsetTop: {
+    type: Number,
+    default: 0
+  },
+  // 自定义导航栏高度（px）
+  navHeight: {
+    type: Number,
+    default: 0
+  },
+  // 是否开启吸顶
+  enabled: {
+    type: Boolean,
+    default: true
+  },
+  // 背景颜色
+  bgColor: {
+    type: String,
+    default: ''
+  },
+  // z-index
+  zIndex: {
+    type: Number,
+    default: 100
+  }
+});
+
+const emit = defineEmits(['fixed', 'unfixed']);
+
+const instance = getCurrentInstance();
+
+// 生成唯一类名
+const elClass = ref('prism-sticky-' + Math.random().toString(36).slice(2, 10));
+
+// 状态
+const fixed = ref(false);
+const height = ref('auto');
+const width = ref('auto');
+const left = ref(0);
+const stickyTop = ref(0);
+
+// 观察器
+let observer = null;
+
+// 包裹层样式
+const wrapStyle = computed(() => ({
+  height: fixed.value ? height.value + 'px' : 'auto',
+  zIndex: props.zIndex
+}));
+
+// 初始化观察器
+function initObserver() {
+  if (!props.enabled) return;
+
+  // 计算吸顶位置
+  // #ifdef H5
+  stickyTop.value = props.navHeight + (props.offsetTop ? uni.upx2px(props.offsetTop) : 0);
+  // #endif
+  // #ifndef H5
+  stickyTop.value = props.navHeight + (props.offsetTop ? uni.upx2px(props.offsetTop) : 0);
+  // #endif
+
+  disconnectObserver();
+
+  // 获取元素信息
+  const query = uni.createSelectorQuery().in(instance.proxy);
+  query.select('.' + elClass.value).boundingClientRect((res) => {
+    if (res) {
+      height.value = res.height;
+      left.value = res.left;
+      width.value = res.width;
+      connectObserver();
+    }
+  }).exec();
+}
+
+// 连接观察器
+function connectObserver() {
+  disconnectObserver();
+
+  observer = uni.createIntersectionObserver(instance.proxy, {
+    thresholds: [0.95, 0.98, 1]
+  });
+
+  observer.relativeToViewport({
+    top: -stickyTop.value
+  });
+
+  observer.observe('.' + elClass.value, (res) => {
+    if (!props.enabled) return;
+    setFixed(res.boundingClientRect.top);
+  });
+}
+
+// 设置固定状态
+function setFixed(top) {
+  const isFixed = top < stickyTop.value;
+  if (isFixed && !fixed.value) {
+    emit('fixed');
+  } else if (!isFixed && fixed.value) {
+    emit('unfixed');
+  }
+  fixed.value = isFixed;
+}
+
+// 断开观察器
+function disconnectObserver() {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+}
+
+// 监听属性变化
+watch(() => props.offsetTop, () => initObserver());
+watch(() => props.navHeight, () => initObserver());
+watch(() => props.enabled, (val) => {
+  if (!val) {
+    fixed.value = false;
+    disconnectObserver();
+  } else {
+    initObserver();
+  }
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    initObserver();
+  }, 50);
+});
+</script>
+
+<style lang="scss">
+.prism-sticky {
+  position: relative;
+}
+
+.prism-sticky__wrap {
+  position: relative;
+}
+
+.prism-sticky__content {
+  background: var(--prism-bg-color-card, #FFFFFF);
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #242424);
+  }
+}
+</style>