vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{AutoSizer → components/AutoSizer}/index.vue

@@ -1,192 +1,192 @@
-<template>
-  <view class="auto-sizer">
-    <!-- 大小和slot 内容宽度一致 -->
-    <view class="listener-slot">
-      <slot></slot>
-    </view>
-
-    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
-    <view
-      class="anchor-height-add"
-      :style="{
-        top: listenerSlot.height + 1 + 'px',
-      }"
-    >
-    </view>
-
-    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
-    <view
-      class="anchor-height-sub"
-      :style="{
-        top: listenerSlot.height - 1 + 'px',
-      }"
-    >
-    </view>
-
-    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
-    <view
-      class="anchor-width-add"
-      :style="{
-        left: listenerSlot.width + 1 + 'px',
-        top: '0px',
-      }"
-    >
-    </view>
-
-    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
-    <view
-      class="anchor-width-sub"
-      :style="{
-        left: listenerSlot.width - 1 + 'px',
-        top: '0px',
-      }"
-    >
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import {
-  getCurrentInstance,
-  onMounted,
-  inject,
-  reactive,
-  onUnmounted,
-} from 'vue';
-import { debounce } from '../../utils';
-
-type Size = {
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-};
-
-const props = defineProps<{
-  index: number;
-  immediate?: boolean;
-}>();
-
-const emit = defineEmits<{ (e: 'resize', size: Size): void }>();
-
-let isMounted = false;
-
-const listenerSlot = reactive({
-  width: 0,
-  height: 0,
-});
-
-const size: Size = {
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-};
-
-const instance = getCurrentInstance();
-
-const query = uni.createSelectorQuery().in(instance);
-
-const onSizeChange =
-  inject<(index: number, height: number) => void>('onSizeChange');
-
-/** 外界记录的高度 */
-const _itemsHeight = inject<number[]>('itemsHeight');
-
-const debounceReact = debounce(
-  (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
-    if (Array.isArray(rect)) return;
-
-    // 获取屏幕尺寸
-    const { windowWidth, windowHeight } = uni.getWindowInfo();
-
-    // 在尺寸更新时限制最大值
-    listenerSlot.height = Math.min(rect.height ?? 0, windowHeight);
-    listenerSlot.width = Math.min(rect.width ?? 0, windowWidth);
-
-    onSizeChange?.(props.index, rect.height ?? 0);
-
-    size.width = rect.width ?? 0;
-    size.height = rect.height ?? 0;
-    size.top = rect.top ?? 0;
-    size.left = rect.left ?? 0;
-    size.right = rect.right ?? 0;
-    size.bottom = rect.bottom ?? 0;
-
-    if (props.immediate && !isMounted) {
-      emit('resize', size);
-    }
-
-    if (isMounted) {
-      emit('resize', size);
-    }
-
-    isMounted = true;
-  },
-  100,
-  { leading: true },
-);
-function getSize() {
-  query.select('.listener-slot').boundingClientRect(debounceReact).exec();
-}
-
-const debounceGetSize = debounce(getSize, 100, { leading: true });
-
-let observer: UniNamespace.IntersectionObserver;
-onMounted(() => {
-  // 防止重复获取
-  // TODO
-  // if (_itemsHeight && _itemsHeight?.[props.index]) return;
-
-  // 初始大小
-  debounceGetSize();
-
-  // TODO 只有可视范围之内才获取大小
-  observer = uni.createIntersectionObserver(instance, { thresholds: [0, 1] });
-  // 变大监听
-  observer
-    .relativeTo('.auto-sizer')
-    .observe('.anchor-height-add', debounceGetSize);
-  // 变小监听
-  observer
-    .relativeTo('.auto-sizer')
-    .observe('.anchor-height-sub', debounceGetSize);
-
-  // 变大监听
-  observer
-    .relativeTo('.auto-sizer')
-    .observe('.anchor-width-add', debounceGetSize);
-  // 变小监听
-  observer
-    .relativeTo('.auto-sizer')
-    .observe('.anchor-width-sub', debounceGetSize);
-});
-
-onUnmounted(() => {
-  // 销毁监听
-  observer.disconnect();
-});
-</script>
-
-<style scoped>
-.auto-sizer {
-  position: relative;
-  overflow: hidden;
-  width: min-content;
-  height: min-content;
-}
-
-.anchor-height-add,
-.anchor-height-sub,
-.anchor-width-add,
-.anchor-width-sub {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  background-color: skyblue;
-  visibility: hidden;
-}
-</style>
+<template>
+  <view class="auto-sizer">
+    <!-- 大小和slot 内容宽度一致 -->
+    <view class="listener-slot">
+      <slot></slot>
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-height-add"
+      :style="{
+        top: listenerSlot.height + 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-height-sub"
+      :style="{
+        top: listenerSlot.height - 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-width-add"
+      :style="{
+        left: listenerSlot.width + 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-width-sub"
+      :style="{
+        left: listenerSlot.width - 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import {
+  getCurrentInstance,
+  onMounted,
+  inject,
+  reactive,
+  onUnmounted,
+} from 'vue';
+import { debounce } from '../../utils';
+
+type Size = {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+
+const props = defineProps<{
+  index: number;
+  immediate?: boolean;
+}>();
+
+const emit = defineEmits<{ (e: 'resize', size: Size): void }>();
+
+let isMounted = false;
+
+const listenerSlot = reactive({
+  width: 0,
+  height: 0,
+});
+
+const size: Size = {
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+const instance = getCurrentInstance();
+
+const query = uni.createSelectorQuery().in(instance);
+
+const onSizeChange =
+  inject<(index: number, height: number) => void>('onSizeChange');
+
+/** 外界记录的高度 */
+const _itemsHeight = inject<number[]>('itemsHeight');
+
+const debounceReact = debounce(
+  (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
+    if (Array.isArray(rect)) return;
+
+    // 获取屏幕尺寸
+    const { windowWidth, windowHeight } = uni.getWindowInfo();
+
+    // 在尺寸更新时限制最大值
+    listenerSlot.height = Math.min(rect.height ?? 0, windowHeight);
+    listenerSlot.width = Math.min(rect.width ?? 0, windowWidth);
+
+    onSizeChange?.(props.index, rect.height ?? 0);
+
+    size.width = rect.width ?? 0;
+    size.height = rect.height ?? 0;
+    size.top = rect.top ?? 0;
+    size.left = rect.left ?? 0;
+    size.right = rect.right ?? 0;
+    size.bottom = rect.bottom ?? 0;
+
+    if (props.immediate && !isMounted) {
+      emit('resize', size);
+    }
+
+    if (isMounted) {
+      emit('resize', size);
+    }
+
+    isMounted = true;
+  },
+  100,
+  { leading: true },
+);
+function getSize() {
+  query.select('.listener-slot').boundingClientRect(debounceReact).exec();
+}
+
+const debounceGetSize = debounce(getSize, 100, { leading: true });
+
+let observer: UniNamespace.IntersectionObserver;
+onMounted(() => {
+  // 防止重复获取
+  // TODO
+  // if (_itemsHeight && _itemsHeight?.[props.index]) return;
+
+  // 初始大小
+  debounceGetSize();
+
+  // TODO 只有可视范围之内才获取大小
+  observer = uni.createIntersectionObserver(instance, { thresholds: [0, 1] });
+  // 变大监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-height-add', debounceGetSize);
+  // 变小监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-height-sub', debounceGetSize);
+
+  // 变大监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-width-add', debounceGetSize);
+  // 变小监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-width-sub', debounceGetSize);
+});
+
+onUnmounted(() => {
+  // 销毁监听
+  observer.disconnect();
+});
+</script>
+
+<style scoped>
+.auto-sizer {
+  position: relative;
+  overflow: hidden;
+  width: min-content;
+  height: min-content;
+}
+
+.anchor-height-add,
+.anchor-height-sub,
+.anchor-width-add,
+.anchor-width-sub {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background-color: skyblue;
+  visibility: hidden;
+}
+</style>