hw-cus-ui 1.0.24 → 1.1.0

package/HwBtn/HwBtn.vue

@@ -1,16 +1,16 @@
-<template>
-  <div class="btn">我的按钮</div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-  .btn {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    color: #ffffff;
-  }
-</style>
+<template>
+  <div class="btn">我的按钮</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+  .btn {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    color: #ffffff;
+  }
+</style>

package/HwBtn/index.ts

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

package/HwCheckbox/HwCheckbox.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="bn-select" :style="{ marginTop: marginTop }">
+    <view class="select-item">
+      <view>
+        <!-- 标签区域：显示字段标签和必填标识 -->
+        <view class="label" :style="{ color: types === 'detail' ? 'rgba(23, 26, 29, 0.6)' : 'rgba(23, 26, 29, 1)' }">
+          <text style="color: red" v-if="required">*</text>
+          {{ label }}
+        </view>
+        <!-- 编辑模式下显示复选框组件 -->
+        <slot>
+          <uni-data-checkbox
+            class="value"
+            v-if="pageType !== 'detail'"
+            v-model="value"
+            :localdata="localdata"
+            v-bind="$attrs"
+          />
+        </slot>
+
+        <!-- 详情模式下显示选中项的文本 -->
+        <view
+          class="value"
+          v-if="pageType === 'detail'"
+          :style="{ color: types === 'detail' ? 'rgba(23, 26, 29, 0.6)' : 'rgba(23, 26, 29, 1)' }"
+        >
+          {{ getValue(value) }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+/**
+ * 双向绑定的值，可以是字符串或数字类型
+ */
+const value = defineModel<string | number>();
+
+/**
+ * 组件属性接口定义
+ */
+interface Props {
+  /**
+   * 上边距，默认为 20px
+   */
+  marginTop?: string;
+  /**
+   * 页面类型，用于区分编辑页面还是详情页面
+   */
+  pageType?: string;
+  /**
+   * 字段标签名称（必填）
+   */
+  label: string;
+  /**
+   * 类型标识，用于控制样式显示
+   */
+  types?: string;
+  /**
+   * 是否必填项，true时会显示红色星号
+   */
+  required?: boolean;
+  /**
+   * 下拉选项数据列表，每项应包含value和text属性
+   */
+  localdata?: any[];
+}
+
+/**
+ * 定义组件接收的属性
+ */
+const props = defineProps<Props>();
+
+/**
+ * 解构赋值设置默认值
+ */
+const { label = '', marginTop = '20px', pageType = 'checkbox', types = 'add' } = props;
+
+/**
+ * 根据选中的值获取对应的文本显示
+ * @param val 当前选中的值
+ * @returns 对应的文本内容，未找到则返回空字符串
+ */
+const getValue = (val: any) => {
+  if (val) {
+    return props.localdata?.find((item) => item.value === val)?.text;
+  }
+  return '';
+};
+</script>
+
+<style lang="scss" scoped>
+.bn-select {
+  width: 100%;
+  border-bottom: 1rpx solid rgba(17, 31, 44, 0.12);
+  .select-item {
+    .label {
+      font-size: 34rpx;
+      letter-spacing: 0px;
+      line-height: 44rpx;
+      height: 44rpx;
+      color: rgba(23, 26, 29, 1);
+    }
+    .value {
+      font-size: 34rpx;
+      padding: 20rpx 0;
+    }
+  }
+  ::v-deep .checklist-text {
+    font-size: 34rpx !important;
+  }
+  ::v-deep .uni-data-checklist .checklist-group .checklist-box {
+    margin: 10rpx 40rpx 10rpx 0rpx !important;
+  }
+}
+</style>

package/HwCheckbox/README.md

@@ -0,0 +1,111 @@
+# HwCheckbox 组件使用说明
+
+HwCheckbox 是一个复选框组件，支持编辑模式和详情模式，可以显示复选框或只读文本。
+
+## 功能特性
+
+- 支持编辑模式和详情模式
+- 支持双向数据绑定
+- 支持自定义选项数据
+- 支持必填标识显示
+- 支持自定义样式
+
+## 属性 (Props)
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| [marginTop](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L41-L43) | string | '20px' | 上边距 |
+| [pageType](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L44-L46) | string | 'checkbox' | 页面类型，用于区分编辑页面还是详情页面 |
+| [label](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L47-L49) | string | - | 字段标签名称（必填） |
+| [types](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L50-L52) | string | 'add' | 类型标识，用于控制样式显示 |
+| [required](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L53-L55) | boolean | false | 是否必填项，true时会显示红色星号 |
+| [localdata](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L56-L59) | Array<any> | - | 下拉选项数据列表，每项应包含value和text属性 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| update:modelValue | (value: string \| number) | 当值变化时触发 |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <HwCheckbox
+    v-model="checkboxValue"
+    label="选择项"
+    :localdata="checkboxOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwCheckbox from '@/components/HwCheckbox/HwCheckbox.vue';
+
+const checkboxValue = ref('');
+const checkboxOptions = [
+  { value: 'option1', text: '选项1' },
+  { value: 'option2', text: '选项2' },
+  { value: 'option3', text: '选项3' }
+];
+</script>
+```
+
+### 详情模式
+
+```vue
+<template>
+  <HwCheckbox
+    v-model="checkboxValue"
+    label="选择项"
+    :localdata="checkboxOptions"
+    pageType="detail"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwCheckbox from '@/components/HwCheckbox/HwCheckbox.vue';
+
+const checkboxValue = ref('option1');
+const checkboxOptions = [
+  { value: 'option1', text: '选项1' },
+  { value: 'option2', text: '选项2' },
+  { value: 'option3', text: '选项3' }
+];
+</script>
+```
+
+### 必填项
+
+```vue
+<template>
+  <HwCheckbox
+    v-model="checkboxValue"
+    label="必填选择项"
+    :required="true"
+    :localdata="checkboxOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwCheckbox from '@/components/HwCheckbox/HwCheckbox.vue';
+
+const checkboxValue = ref('');
+const checkboxOptions = [
+  { value: 'option1', text: '选项1' },
+  { value: 'option2', text: '选项2' }
+];
+</script>
+```
+
+## 注意事项
+
+1. 组件使用了 uni-data-checkbox 作为基础组件
+2. 在详情模式下，组件只显示选中项的文本，不提供编辑功能
+3. [localdata](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L56-L59) 属性的每个选项对象需要包含 [value](file:///e:/temp/my-components/src/components/HwPickerTree/HwPickerTree.vue#L35-L40) 和 text 属性
+4. [pageType](file:///e:/temp/my-components/src/components/HwCheckbox/HwCheckbox.vue#L44-L46) 设置为 'detail' 时会显示为只读的详情模式
+5. 组件支持通过插槽自定义内容

package/HwCheckbox/index.ts

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

package/HwDraggableBottomPopup/README.md

@@ -0,0 +1,127 @@
+# HwDraggableBottomPopup 组件使用说明
+
+HwDraggableBottomPopup 是一个可拖拽的底部弹窗组件，支持触摸拖拽调整位置，适用于需要用户交互调整内容区域的场景。
+
+## 功能特性
+
+- 支持触摸拖拽调整弹窗位置
+- 可自定义弹窗高度
+- 支持拖拽过程中实时调整内容区域高度
+- 防抖处理确保性能
+- 灵活的内容插槽
+
+## 属性 (Props)
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| [heightCalc](file:///e:/temp/my-components/src/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue#L31-L35) | String | '0.4' | 弹窗高度计算比例，相对于屏幕高度的百分比 |
+| [isDrag](file:///e:/temp/my-components/src/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue#L36-L40) | Boolean | true | 是否启用拖拽功能 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| changeTop | (top: number) | 拖拽过程中顶部位置变化时触发 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+|--------|------|
+| default | 默认插槽，用于放置弹窗内容 |
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup>
+      <view class="popup-content">
+        <p>这里是弹窗内容</p>
+        <p>可以放置任何内容</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+</script>
+
+<style>
+.popup-content {
+  padding: 20rpx;
+  height: 100%;
+}
+</style>
+```
+
+### 自定义高度
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup :heightCalc="'0.6'">
+      <view class="popup-content">
+        <p>初始高度为屏幕高度的60%</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+</script>
+```
+
+### 禁用拖拽
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup :isDrag="false">
+      <view class="popup-content">
+        <p>此弹窗不可拖拽</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+</script>
+```
+
+### 监听位置变化
+
+```vue
+<template>
+  <view>
+    <HwDraggableBottomPopup @changeTop="onTopChange">
+      <view class="popup-content">
+        <p>拖拽弹窗查看位置变化</p>
+      </view>
+    </HwDraggableBottomPopup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import HwDraggableBottomPopup from '@/components/HwDraggableBottomPopup/HwDraggableBottomPopup.vue';
+
+const onTopChange = (top) => {
+  console.log('弹窗顶部位置:', top);
+};
+</script>
+```
+
+## 注意事项
+
+1. 组件使用了 uni-app 的触摸事件和系统信息API
+2. 弹窗默认从屏幕底部开始，初始位置在屏幕外
+3. 拖拽功能通过触摸事件实现，支持触摸开始、移动和结束
+4. 弹窗内容区域高度会根据拖拽位置自动调整
+5. 组件使用了防抖函数优化性能，避免频繁更新内容区域高度
+6. 当启用拖拽功能时，组件会添加圆角边框以提供更好的视觉效果
+7. 组件内部使用了 flex 布局，内容区域会自动适应可用空间

package/HwDraggableBottomPopup/index.ts

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