hy-app 0.4.13 → 0.5.0

package/components/hy-address-picker/hy-address-picker.vue

@@ -1,351 +1,247 @@
 <template>
-  <view class="hy-address-picker">
-    <view
-      v-if="hasInput"
-      class="hy-address-picker__has-input"
-      @tap="onShowByClickInput"
-    >
-      <!-- @slot 自定义输入框 -->
-      <slot name="trigger" :value="inputValue">
-        <HyInput
-          v-model="inputValue"
-          :readonly="true"
-          :disabled="input?.disabled"
-          :disabledColor="input?.disabledColor"
-          :shape="input?.shape"
-          :border="input?.border"
-          :prefixIcon="input?.prefixIcon"
-          :suffixIcon="input?.suffixIcon"
-          :color="input?.color"
-          :fontSize="input?.fontSize"
-          :inputAlign="input?.inputAlign"
-          :placeholder="input?.placeholder || '请选择地址'"
-          :placeholderStyle="input?.placeholderStyle"
-          :placeholderClass="input?.placeholderClass"
-          :customStyle="
-            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
-          "
-        ></HyInput>
-        <view class="input-cover"></view>
-      </slot>
+    <view class="hy-address-picker">
+        <view v-if="hasInput" class="hy-address-picker__has-input" @tap="onShowByClickInput">
+            <!-- @slot 自定义输入框 -->
+            <slot name="trigger" :value="inputValue">
+                <HyInput
+                    v-model="inputValue"
+                    :readonly="true"
+                    :disabled="input?.disabled"
+                    :disabledColor="input?.disabledColor"
+                    :shape="input?.shape"
+                    :border="input?.border"
+                    :prefixIcon="input?.prefixIcon"
+                    :suffixIcon="input?.suffixIcon"
+                    :color="input?.color"
+                    :fontSize="input?.fontSize"
+                    :inputAlign="input?.inputAlign"
+                    :placeholder="input?.placeholder || '请选择地址'"
+                    :placeholderStyle="input?.placeholderStyle"
+                    :placeholderClass="input?.placeholderClass"
+                    :customStyle="Object.assign({ 'pointer-events': 'none' }, input?.customStyle)"
+                ></HyInput>
+                <view class="input-cover"></view>
+            </slot>
+        </view>
+        <HyPicker
+            ref="uPickerRef"
+            :show="show || (hasInput && showByClickInput)"
+            :popupMode="popupMode"
+            :closeOnClickOverlay="closeOnClickOverlay"
+            :columns="columns"
+            :defaultIndex="defaultIndex"
+            :title="title"
+            keyName="name"
+            :itemHeight="itemHeight"
+            :loading="loading"
+            :showToolbar="showToolbar"
+            :visibleItemCount="visibleItemCount"
+            :cancelText="cancelText"
+            :cancelColor="cancelColor"
+            :confirmColor="confirmColor"
+            :toolbarRightSlot="toolbarRightSlot"
+            @close="close"
+            @cancel="cancel"
+            @confirm="confirm"
+            @change="change"
+        >
+            <template #toolbar-right>
+                <!-- @slot 工具栏右侧内容，自定义右侧内容，因为微信小程序限制，需要同时设置:toolbarRightSlot="true"生效。 -->
+                <slot name="toolbar-right">
+                    {{ confirmText }}
+                </slot>
+            </template>
+            <template #toolbar-bottom>
+                <!-- @slot 工具栏下面内容，自定义底部内容 -->
+                <slot name="toolbar-bottom"></slot>
+            </template>
+        </HyPicker>
     </view>
-    <HyPicker
-      ref="uPickerRef"
-      :show="show || (hasInput && showByClickInput)"
-      :popupMode="popupMode"
-      :closeOnClickOverlay="closeOnClickOverlay"
-      :columns="columns"
-      :defaultIndex="defaultIndex"
-      :title="title"
-      keyName="name"
-      :itemHeight="itemHeight"
-      :loading="loading"
-      :showToolbar="showToolbar"
-      :visibleItemCount="visibleItemCount"
-      :cancelText="cancelText"
-      :cancelColor="cancelColor"
-      :confirmColor="confirmColor"
-      :toolbarRightSlot="toolbarRightSlot"
-      @close="close"
-      @cancel="cancel"
-      @confirm="confirm"
-      @change="change"
-    >
-      <template #toolbar-right>
-        <!-- @slot 工具栏右侧内容，自定义右侧内容，因为微信小程序限制，需要同时设置:toolbarRightSlot="true"生效。 -->
-        <slot name="toolbar-right">
-          {{ confirmText }}
-        </slot>
-      </template>
-      <template #toolbar-bottom>
-        <!-- @slot 工具栏下面内容，自定义底部内容 -->
-        <slot name="toolbar-bottom"></slot>
-      </template>
-    </HyPicker>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-address-picker",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-address-picker',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref, toRefs } from "vue";
-import type { PropType, CSSProperties } from "vue";
-import type { IAddressPickerEmits } from "./typing";
-import address from "../../libs/utils/address.json";
-import type HyInputProps from "../hy-input/typing";
+import { onMounted, ref, toRefs } from 'vue'
+import type { IAddressPickerEmits } from './typing'
+import address from '../../libs/utils/address.json'
+import addressPickerProps from './props'
 // 组件
-import HyInput from "../hy-input/hy-input.vue";
-import HyPicker from "../hy-picker/hy-picker.vue";
+import HyInput from '../hy-input/hy-input.vue'
+import HyPicker from '../hy-picker/hy-picker.vue'
 
 /**
  * 此选择器用于选择地址
  * @displayName hy-address-picker
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 用于控制选择器的弹出和收起 */
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 弹出层弹出方向
-   * @values top,bottom
-   * */
-  popupMode: {
-    type: String,
-    default: "bottom",
-  },
-  /** 是否显示顶部的操作栏 */
-  showToolbar: {
-    type: Boolean,
-    default: true,
-  },
-  /** 绑定值 */
-  modelValue: {
-    type: String,
-    required: true,
-  },
-  /** 顶部标题 */
-  title: String,
-  /** 字符串截取数组条件 */
-  separator: {
-    type: String,
-    default: " ",
-  },
-  /** 是否显示加载中状态 */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  /** 各列中，单个选项的高度 */
-  itemHeight: {
-    type: Number,
-    default: 44,
-  },
-  /** 取消按钮的文字 */
-  cancelText: {
-    type: String,
-    default: "取消",
-  },
-  /** 确认按钮的文字 */
-  confirmText: {
-    type: String,
-    default: "确认",
-  },
-  /** 取消按钮的颜色 */
-  cancelColor: {
-    type: String,
-    default: "#909193",
-  },
-  /** 确认按钮的颜色 */
-  confirmColor: {
-    type: String,
-    default: "#3c9cff",
-  },
-  /** 每列中可见选项的数量 */
-  visibleItemCount: {
-    type: Number,
-    default: 5,
-  },
-  /** 是否允许点击遮罩关闭选择器 */
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: false,
-  },
-  /** 各列的默认索引 */
-  defaultIndex: {
-    type: Array as PropType<Array<any>>,
-  },
-  /** 是否显示输入框 */
-  hasInput: {
-    type: Boolean,
-    default: false,
-  },
-  /** 输入框集合属性 */
-  input: {
-    type: Object as PropType<HyInputProps>,
-  },
-  /** 右边插槽 */
-  toolbarRightSlot: {
-    type: Boolean,
-    default: false,
-  },
-  /** 自定义输入框外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-});
-const { show, modelValue, hasInput, input, separator, closeOnClickOverlay } =
-  toRefs(props);
-const emit = defineEmits<IAddressPickerEmits>();
+const props = defineProps(addressPickerProps)
+const { show, modelValue, hasInput, input, separator, closeOnClickOverlay } = toRefs(props)
+const emit = defineEmits<IAddressPickerEmits>()
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
-const inputValue = ref<string>(""); // 表单显示值
-const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择
-const columns = ref<any[]>([]);
-const uPickerRef = ref<InstanceType<typeof HyPicker> | null>();
-const defaultIndex = ref<number[]>([]);
+const inputValue = ref<string>('') // 表单显示值
+const showByClickInput = ref<boolean>(false) // 是否在hasInput模式下显示日期选择
+const columns = ref<any[]>([])
+const uPickerRef = ref<InstanceType<typeof HyPicker> | null>()
+const defaultIndex = ref<number[]>([])
 
 function normalizeCityName(city: string) {
-  // 定义常见的后缀
-  const suffixes = ["市", "省", "自治区", "特别行政区", "县", "区"];
-  suffixes.forEach((suffix) => {
-    if (city.endsWith(suffix)) {
-      city = city.slice(0, -suffix.length);
-    }
-  });
-  return city;
+    // 定义常见的后缀
+    const suffixes = ['市', '省', '自治区', '特别行政区', '县', '区']
+    suffixes.forEach((suffix) => {
+        if (city.endsWith(suffix)) {
+            city = city.slice(0, -suffix.length)
+        }
+    })
+    return city
 }
 /**
  * @description 判断城市是否相等
  * */
 const areCitiesEqual = (city1: string, city2: string) => {
-  const normalizedCity1 = normalizeCityName(city1);
-  const normalizedCity2 = normalizeCityName(city2);
-  return normalizedCity1 === normalizedCity2;
-};
+    const normalizedCity1 = normalizeCityName(city1)
+    const normalizedCity2 = normalizeCityName(city2)
+    return normalizedCity1 === normalizedCity2
+}
 /**
  * @description 更新各列的值
  * */
 const updateColumnValue = (value: string) => {
-  let provinceIndex, cityIndex, countyIndex;
-  // 判断是初始化有数据就找到对应索引，无数据默认索引为0
-  if (value) {
-    const addressArr = value.split(separator.value);
-    // 查出省索引
-    provinceIndex = address.findIndex((item) =>
-      areCitiesEqual(item.name, addressArr[0]),
-    );
-    // 查出市索引
-    cityIndex = address[provinceIndex].areas.findIndex((item) =>
-      areCitiesEqual(item.name, addressArr[1]),
-    );
-
-    // 查出县/区索引
-    countyIndex = address[provinceIndex].areas[cityIndex].areas.findIndex(
-      (item) => areCitiesEqual(item.name, addressArr[2]),
-    );
-  } else {
-    provinceIndex = 0;
-    cityIndex = 0;
-    countyIndex = 0;
-  }
-  // 省级数组
-  const provinceData = address.map((item) => ({
-    name: item.name,
-    code: item.code,
-  }));
-  // 市级数组
-  const cityData = address[provinceIndex].areas.map((item) => ({
-    name: item.name,
-    code: item.code,
-  }));
-  // 县/区级数组
-  const areaData = address[provinceIndex].areas[cityIndex].areas;
-
-  // 默认索引
-  defaultIndex.value = [provinceIndex, cityIndex, countyIndex];
-  // 列表
-  columns.value = [provinceData, cityData, areaData];
-};
+    let provinceIndex, cityIndex, countyIndex
+    // 判断是初始化有数据就找到对应索引，无数据默认索引为0
+    if (value) {
+        const addressArr = value.split(separator.value)
+        // 查出省索引
+        provinceIndex = address.findIndex((item) => areCitiesEqual(item.name, addressArr[0]))
+        // 查出市索引
+        cityIndex = address[provinceIndex].areas.findIndex((item) =>
+            areCitiesEqual(item.name, addressArr[1])
+        )
+
+        // 查出县/区索引
+        countyIndex = address[provinceIndex].areas[cityIndex].areas.findIndex((item) =>
+            areCitiesEqual(item.name, addressArr[2])
+        )
+    } else {
+        provinceIndex = 0
+        cityIndex = 0
+        countyIndex = 0
+    }
+    // 省级数组
+    const provinceData = address.map((item) => ({
+        name: item.name,
+        code: item.code
+    }))
+    // 市级数组
+    const cityData = address[provinceIndex].areas.map((item) => ({
+        name: item.name,
+        code: item.code
+    }))
+    // 县/区级数组
+    const areaData = address[provinceIndex].areas[cityIndex].areas
+
+    // 默认索引
+    defaultIndex.value = [provinceIndex, cityIndex, countyIndex]
+    // 列表
+    columns.value = [provinceData, cityData, areaData]
+}
 
 const init = () => {
-  // 获取当前值
-  inputValue.value = modelValue.value;
-  // 更新列表
-  updateColumnValue(modelValue.value);
-};
+    // 获取当前值
+    inputValue.value = modelValue.value
+    // 更新列表
+    updateColumnValue(modelValue.value)
+}
 
 onMounted(() => {
-  init();
-});
+    init()
+})
 
 /**
  * @description 关闭选择器
  * */
 const close = () => {
-  if (closeOnClickOverlay.value) {
-    if (hasInput.value) {
-      showByClickInput.value = false;
+    if (closeOnClickOverlay.value) {
+        if (hasInput.value) {
+            showByClickInput.value = false
+        }
+        emit('close')
     }
-    emit("close");
-  }
-};
+}
 
 /**
  * @description 点击工具栏的取消按钮
  * */
 const cancel = () => {
-  if (hasInput.value) {
-    showByClickInput.value = false;
-  }
-  emit("cancel");
-};
+    if (hasInput.value) {
+        showByClickInput.value = false
+    }
+    emit('cancel')
+}
 
 /**
  * @description 点击工具栏的确定按钮
  * */
 const confirm = ({ value }: { value: Record<string, any>[] }) => {
-  inputValue.value = value.map((item) => item.name).join(separator.value);
+    inputValue.value = value.map((item) => item.name).join(separator.value)
 
-  showByClickInput.value = false;
-  emit("update:modelValue", inputValue.value);
-  emit("confirm", {
-    value: inputValue.value,
-  });
-};
+    showByClickInput.value = false
+    emit('update:modelValue', inputValue.value)
+    emit('confirm', {
+        value: inputValue.value
+    })
+}
 
 /**
  * @description 列发生变化时触发
  * */
 const change = (e: any) => {
-  const { columnIndex, index, indexs } = e;
-  //如果改变的是第一列
-  if (columnIndex === 0) {
-    const children1 = address[index].areas.map((item) => {
-      return { name: item.name, code: item.code };
-    });
-    uPickerRef.value?.setColumnValues(1, children1);
-    //更换 第二列数据
-    const children2 = address[index].areas[indexs[1]].areas.map((item) => ({
-      ...item,
-    }));
-    uPickerRef.value?.setColumnValues(2, children2);
-    //更换 第三列数据
-  }
-  if (columnIndex === 1) {
-    //如果改变的是第二列
-    const children3 = address[indexs[0]].areas[indexs[1]].areas.map((item) => ({
-      ...item,
-    }));
-    uPickerRef.value?.setColumnValues(2, children3);
-  }
+    const { columnIndex, index, indexs } = e
+    //如果改变的是第一列
+    if (columnIndex === 0) {
+        const children1 = address[index].areas.map((item) => {
+            return { name: item.name, code: item.code }
+        })
+        uPickerRef.value?.setColumnValues(1, children1)
+        //更换 第二列数据
+        const children2 = address[index].areas[indexs[1]].areas.map((item) => ({
+            ...item
+        }))
+        uPickerRef.value?.setColumnValues(2, children2)
+        //更换 第三列数据
+    }
+    if (columnIndex === 1) {
+        //如果改变的是第二列
+        const children3 = address[indexs[0]].areas[indexs[1]].areas.map((item) => ({
+            ...item
+        }))
+        uPickerRef.value?.setColumnValues(2, children3)
+    }
 
-  // 发出change时间，value为当前选中的时间戳
-  emit("change", {
-    ...e,
-  });
-};
+    // 发出change时间，value为当前选中的时间戳
+    emit('change', {
+        ...e
+    })
+}
 
 const onShowByClickInput = () => {
-  if (!props.input?.disabled) {
-    showByClickInput.value = !showByClickInput.value;
-  }
-};
+    if (!props.input?.disabled) {
+        showByClickInput.value = !showByClickInput.value
+    }
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-address-picker/props.ts

@@ -1,24 +1,100 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from "vue";
+import type HyInputProps from "../hy-input/typing";
 
-const defaultProps: IProps = {
-  show: false,
-  popupMode: "bottom",
-  showToolbar: true,
-  modelValue: "",
-  title: "",
-  separator: " ",
-  loading: false,
-  itemHeight: 44,
-  cancelText: "取消",
-  confirmText: "确认",
-  cancelColor: "#909193",
-  confirmColor: "#3c9cff",
-  visibleItemCount: 5,
-  closeOnClickOverlay: false,
-  defaultIndex: [],
-  hasInput: false,
-  input: {},
-  toolbarRightSlot: false,
+const addressPickerProps = {
+  /** 用于控制选择器的弹出和收起 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 弹出层弹出方向
+   * @values top,bottom
+   * */
+  popupMode: {
+    type: String,
+    default: "bottom",
+  },
+  /** 是否显示顶部的操作栏 */
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 绑定值 */
+  modelValue: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  /** 顶部标题 */
+  title: String,
+  /** 字符串截取数组条件 */
+  separator: {
+    type: String,
+    default: " ",
+  },
+  /** 是否显示加载中状态 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 各列中，单个选项的高度 */
+  itemHeight: {
+    type: Number,
+    default: 44,
+  },
+  /** 取消按钮的文字 */
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+  /** 确认按钮的文字 */
+  confirmText: {
+    type: String,
+    default: "确认",
+  },
+  /** 取消按钮的颜色 */
+  cancelColor: {
+    type: String,
+    default: "#909193",
+  },
+  /** 确认按钮的颜色 */
+  confirmColor: {
+    type: String,
+    default: "#3c9cff",
+  },
+  /** 每列中可见选项的数量 */
+  visibleItemCount: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否允许点击遮罩关闭选择器 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  /** 各列的默认索引 */
+  defaultIndex: {
+    type: Array as PropType<Array<any>>,
+  },
+  /** 是否显示输入框 */
+  hasInput: {
+    type: Boolean,
+    default: false,
+  },
+  /** 输入框集合属性 */
+  input: {
+    type: Object as PropType<HyInputProps>,
+  },
+  /** 右边插槽 */
+  toolbarRightSlot: {
+    type: Boolean,
+    default: false,
+  },
+  /** 自定义输入框外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
 };
 
-export default defaultProps;
+export default addressPickerProps;