hw-cus-ui 1.0.23 → 1.0.24

package/DraggableBottomPopup/DraggableBottomPopup.vue

@@ -0,0 +1,195 @@
+<template>
+  <view class="draggable-popup-mask">
+    <view
+      class="draggable-popup-container"
+      :style="{
+        top: popupTop + 'px',
+        position: isDrag ? 'fixed' : 'initial',
+        borderTopLeftRadius: isDrag ? '20rpx' : '0',
+        borderTopRightRadius: isDrag ? '20rpx' : '0'
+      }"
+    >
+      <view
+        v-if="isDrag"
+        class="draggable-popup-handle"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @touchcancel="handleTouchEnd"
+      >
+        <view class="draggable-popup-handle-line"></view>
+      </view>
+      <view class="draggable-popup-content" :style="{ height: isDrag ? contentPopupTop + 'px' : 'auto' }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { useDebounceFn } from '@vueuse/core';
+export default {
+  name: 'DraggableBottomPopup',
+  props: {
+    heightCalc: {
+      type: String,
+      default: '0.4'
+    },
+    isDrag: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data() {
+    return {
+      startY: 0,
+      startTop: 0,
+      popupTop: 0,
+      windowHeight: 0,
+      contentPopupTop: 0,
+      isMoving: false,
+      containerHeight: 0, // 容器高度
+      updateContentPopupTop: null // 防抖函数
+    };
+  },
+
+  mounted() {
+    this.getWindowInfo();
+    this.initPopupPosition();
+    // 初始化防抖函数
+    this.updateContentPopupTop = useDebounceFn(() => {
+      this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+    }, 300);
+  },
+  methods: {
+    getWindowInfo() {
+      const systemInfo = uni.getSystemInfoSync();
+      this.windowHeight = systemInfo.windowHeight;
+      // 初始位置在屏幕外，隐藏状态
+      this.popupTop = this.windowHeight;
+    },
+
+    initPopupPosition() {
+      this.$nextTick(() => {
+        // 获取内容高度
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select('.draggable-popup-container')
+          .boundingClientRect((data) => {
+            if (data) {
+              this.containerHeight = data.height;
+              // 默认显示屏幕高度的60%
+              this.popupTop = this.windowHeight * this.heightCalc;
+              this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+              this.changeTop();
+            }
+          })
+          .exec();
+      });
+    },
+
+    handleTouchStart(e) {
+      this.isMoving = true;
+      this.startY = e.touches[0].clientY;
+      this.startTop = this.popupTop;
+    },
+
+    handleTouchMove(e) {
+      if (!this.isMoving) return;
+
+      const moveY = e.touches[0].clientY - this.startY;
+      let newTop = this.startTop + moveY;
+
+      // 限制拖动范围，但允许拖出屏幕一定距离
+      const maxDragDistance = 100; // 最大可拖出屏幕的距离
+
+      if (newTop < -maxDragDistance) {
+        newTop = -maxDragDistance;
+      }
+
+      // 保留一部分在屏幕内，方便拖回
+      if (this.containerHeight > 0) {
+        const maxTop = this.windowHeight - 50; // 至少保留50px在屏幕内
+        if (newTop > maxTop) {
+          newTop = maxTop;
+        }
+      }
+      this.popupTop = newTop;
+      this.changeTop();
+      // 调用防抖函数而不是创建它
+      this.updateContentPopupTop();
+    },
+
+    handleTouchEnd(e) {
+      if (!this.isMoving) return;
+      this.isMoving = false;
+
+      // 修改：拖动结束后停留在当前位置，不自动展开或收起
+      // 只要确保popupTop在有效范围内即可
+
+      if (this.popupTop < 0) {
+        this.popupTop = 110;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      } else if (this.popupTop > this.windowHeight) {
+        this.popupTop = this.windowHeight - 60;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      } else if (this.popupTop < 110) {
+        this.popupTop = 110;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      }
+      this.changeTop();
+    },
+    changeTop() {
+      this.$emit('changeTop', this.popupTop);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* .draggable-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 98;
+} */
+
+.draggable-popup-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  transition: top 0.1s ease; /* 减少过渡时间使拖动更流畅 */
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.draggable-popup-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20rpx 0;
+  cursor: move;
+}
+
+.draggable-popup-handle-line {
+  width: 60rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background-color: rgba(23, 26, 29, 0.24);
+}
+
+.draggable-popup-content {
+  overflow: auto;
+  position: relative;
+  z-index: 100;
+}
+</style>

package/DraggableBottomPopup/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+import type { App } from 'vue';
+import DraggableBottomPopup from './DraggableBottomPopup.vue';
+
+// 使用install方法，在app.use挂载
+DraggableBottomPopup.install = (app: App) => {
+  app.component(DraggableBottomPopup.__name as string, DraggableBottomPopup); //注册组件
+};
+
+export default DraggableBottomPopup;

package/index.d.ts

@@ -1,10 +1,11 @@
 import { App } from 'vue';
 import { HwBtn } from './HwBtn';
+import { DraggableBottomPopup } from './DraggableBottomPopup';
 
-export { HwBtn };
+export { HwBtn, DraggableBottomPopup };
 
 export declare const hwCusUi: {
   install: (app: App) => void;
 };
 
-export default hwCusUi;
+export default hwCusUi;

package/index.ts

@@ -1,9 +1,10 @@
 // index.ts
 import type { App } from 'vue';
 import HwBtn from './HwBtn';
+import DraggableBottomPopup from './DraggableBottomPopup';
 
 // 所有组件列表
-const components = [HwBtn];
+const components = [HwBtn, DraggableBottomPopup];
 
 // 定义 install 方法
 const install = (app: App): void => {
@@ -11,7 +12,7 @@ const install = (app: App): void => {
   components.forEach((component) => app.component(component.__name as string, component));
 };
 
-export { HwBtn };
+export { HwBtn, DraggableBottomPopup };
 
 const hwCusUi = {
   install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hw-cus-ui",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "",
   "main": "index.ts",
   "scripts": {