上传代码

distribution/uni_modules/sh-address/changelog.md

@@ -0,0 +1,8 @@
+## 1.2.0（2024-11-27）
+支持加载自定义json，请参考文档
+## 1.1.1（2024-11-20）
+禁用组件默认输入框
+## 1.1.0（2024-11-19）
+新增支持vue2, 新增台湾省、香港特别行政区、澳门特别行政区
+## 1.0.0（2024-01-10）
+三级联动地区选择器

distribution/uni_modules/sh-address/components/sh-address/sh-address.vue

@@ -0,0 +1,214 @@
+<template>
+  <picker
+    mode="multiSelector"
+    :range="addressRange"
+    range-key="name"
+    @change="pickerChange"
+    @columnchange="columnchange"
+    :value="pickerValue"
+    @cancel="$emit('cancel')"
+    :disabled="disabled"
+  >
+    <slot v-if="$slots.default"></slot>
+    <input v-else type="text" :value="inputStr" disabled placeholder="请选择">
+  </picker>
+</template>
+
+<script>
+import address from "../../utils/address.json";  // 可注释 注释此行请删除utils目录下的address.json文件
+export default {
+  /**
+   * @param modelValue Array(string) ['四川省', '成都市', '武侯区']
+   * @param codeValue Array(string | number) [ "51","5101", "510107" ]
+   * @param selectIndex Array(number) [ 0, 0, 0 ]
+   * @param disabled 禁用
+   * @param loadJson 自定义加载地址json
+  */
+  props: {
+    modelValue: Array,
+    value: Array,
+    codeValue: Array,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    selectIndex: {
+      type: Array,
+      default: () => [0, 0, 0],
+    },
+    loadJson: {
+      type: Function,
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  emits: [
+    "update:modelValue",
+    "update:codeValue",
+    "columnchange",
+    "change",
+    "cancel",
+    "input",
+  ],
+  computed: {
+    inputStr() {
+      if (this._value && this._value.length !== 0) {
+        return Array.from(new Set(this._value || [])).join('');
+      }
+      if (this.value && this.value.length !== 0) {
+        return Array.from(new Set(this.value || [])).join('');
+      }
+    },
+    _value() {
+      return this.value || this.modelValue;
+    }
+  },
+  data() {
+    return {
+      addressRange: [],
+      pickerValue: [0, 0, 0],
+    };
+  },
+  async created() {
+    this.pickerValue = [...this.selectIndex];
+    if (this.loadJson) {
+      const addressJson = await this.loadJson();
+      if (!Array.isArray(addressJson)) {
+        throw new Error('loadJson 必须返回数组');
+      }
+      this.addressRange[0] = addressJson
+      console.warn('<sh-address> 您已自定义地址json, 请删除插件源码中指定可删除代码, 以减小应用体积');
+    } else {
+      this.addressRange[0] = address; // 可注释
+    }
+    this.setDefByCode();
+    this.setDefByName();
+  },
+  watch: {
+    _value() {
+      this.setDefByName();
+    },
+    codeValue() {
+      this.setDefByCode();
+    },
+  },
+  methods: {
+    columnchange(e) {
+      const { column, value } = e.detail;
+      this.$emit("columnchange", e.detail);
+      if (column === 0) {
+        this.addressRange[1] = this.addressRange[0][value].child;
+        this.addressRange[2] = this.addressRange[1]?.[this.pickerValue[1]]?.child || this.addressRange[1][0].child || [];
+      }
+      if (column === 1) {
+        this.addressRange[2] = this.addressRange[1][value].child;
+      }
+      this.$forceUpdate()
+    },
+    pickerChange(e) {
+      const v = e.detail.value;
+      const { name: province, code: provinceCode } = this.addressRange[0][v[0]];
+      const { name: city, code: cityCode } = this.addressRange[1][v[1]];
+      const {
+        code: areaCode,
+        name: area,
+      } = this.addressRange[2][v[2]];
+      this.$emit("change", {
+        areaCode,
+        area,
+        cityCode,
+        provinceCode,
+        province,
+        city,
+      });
+      this.$emit("input", Array.from(new Set([province, city, area])));
+      this.$emit("update:modelValue", Array.from(new Set([province, city, area])));
+      this.$emit("update:codeValue", Array.from(new Set([provinceCode, cityCode, areaCode])));
+    },
+    setDefByCode() {
+      if (this.codeValue instanceof Array && this.codeValue.length >= 1) {
+        const provinceIndex = this.addressRange[0].findIndex(
+          (item) => item.code === this.codeValue[0].toString()
+        );
+        if (provinceIndex === -1) {
+          this.addressRange[1] = this.addressRange[0][0].child;
+          this.addressRange[2] = this.addressRange[1][0].child;
+          return;
+        }
+        this.addressRange[1] = this.addressRange[0][provinceIndex].child;
+
+        const cityIndex = this.addressRange[1].findIndex(
+          (item) => item.code === this.codeValue[1]?.toString()
+        );
+        if (cityIndex === -1) {
+          this.addressRange[2] = this.addressRange[1][0].child;
+          this.$nextTick(() => {
+            this.pickerValue = [provinceIndex, 0, 0];
+          });
+          return;
+        }
+        this.addressRange[2] = this.addressRange[1][cityIndex].child;
+
+        const areaIndex = this.addressRange[2].findIndex(
+          (item) => item.code === this.codeValue[2]?.toString()
+        );
+        if (areaIndex === -1) {
+          this.$nextTick(() => {
+            this.pickerValue = [provinceIndex, cityIndex, 0];
+          });
+          return;
+        }
+        this.$nextTick(() => {
+          this.pickerValue = [provinceIndex, cityIndex, areaIndex];
+        });
+      } else {
+        this.addressRange[1] = this.addressRange[0][0].child;
+        this.addressRange[2] = this.addressRange[1][0].child;
+      }
+    },
+    setDefByName() {
+      if (this._value instanceof Array && this._value.length >= 1) {
+        const provinceIndex = this.addressRange[0].findIndex(
+          (item) => item.name === this._value[0]
+        );
+        if (provinceIndex === -1) {
+          this.addressRange[1] = this.addressRange[0][0].child;
+          this.addressRange[2] = this.addressRange[1][0].child;
+          return;
+        }
+        this.addressRange[1] = this.addressRange[0][provinceIndex].child;
+
+        const cityIndex = this.addressRange[1].findIndex(
+          (item) => item.name === this._value[1]
+        );
+        if (cityIndex === -1) {
+          this.addressRange[2] = this.addressRange[1][0].child;
+          this.$nextTick(() => {
+            this.pickerValue = [provinceIndex, 0, 0];
+          });
+          return;
+        }
+        this.addressRange[2] = this.addressRange[1][cityIndex].child;
+
+        const areaIndex = this.addressRange[2].findIndex(
+          (item) => item.name === this._value[2]
+        );
+        if (areaIndex === -1) {
+          this.$nextTick(() => {
+            this.pickerValue = [provinceIndex, cityIndex, 0];
+          });
+          return;
+        }
+        this.$nextTick(() => {
+          this.pickerValue = [provinceIndex, cityIndex, areaIndex];
+        });
+      } else {
+        this.addressRange[1] = this.addressRange[0][0].child;
+        this.addressRange[2] = this.addressRange[1][0].child;
+      }
+    },
+  },
+};
+</script>

distribution/uni_modules/sh-address/package.json

@@ -0,0 +1,86 @@
+{
+  "id": "sh-address",
+  "displayName": "sh-address 地区选择器 简单易上手",
+  "version": "1.2.0",
+  "description": "支持vue2, vue3，支持地区名称和行政编码双向绑定，支持加载自定义地址json",
+  "keywords": [
+    "地区",
+    "地址",
+    "选择器",
+    "address",
+    "行政编码"
+],
+  "repository": "",
+"engines": {
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "y",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  }
+}

distribution/uni_modules/sh-address/readme.md

@@ -0,0 +1,92 @@
+# 功能介绍
+
+- 多端支持 （小程序，h5,  app）
+- 多种双向绑定（区域编码，区域名称）
+- 支持返回区域编码、区域名称
+- 支持加载自定义地址json内容
+
+# 使用方法
+
+1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules` 目录下
+
+2. 在需要用到该组件的页面中添加
+
+   ```vue
+   <template>
+      <sh-address @change="change" v-model="data"> </sh-address>
+   </template>
+
+   <script>
+      export default {
+         data() {
+            return {
+               data: ['四川省', '成都市', '青羊区']
+            }
+         }
+         methods: {
+            change(addressInfo) {
+               console.log('选择了--->', addressInfo)
+            }
+         }
+      }
+   </script>
+   ```
+
+   ```vue
+   <!-- 自定义加载json文件 -->
+   <!-- 注意: 使用loadJson时 请注释源码中utils文件夹下的address.json文件 并删除源码中注释可删除的位置 以减小代码体积 -->
+   <template>
+      <sh-address :loadJson="loadAddress" @change="change" v-model="data"> </sh-address>
+   </template>
+
+   <script>
+      export default {
+         data() {
+            return {
+               data: ['四川省', '成都市', '青羊区']
+            }
+         }
+         methods: {
+            change(addressInfo) {
+               console.log('选择了--->', addressInfo)
+            },
+            loadAddress() {
+               // 模拟异步加载json数据
+               return new Promise(resolve => {
+                  setTimeout(() => {
+                     resolve(address)
+                  }, 4000);
+               })
+            }
+         }
+      }
+   </script>
+   ```
+
+
+
+# 组件属性
+
+| 属性名             | 类型    | 默认值  | 描述                                                         |
+| ------------------ | ------- | ------- | ------------------------------------------------------------ |
+| modelValue/v-model | Array   | []      | 双向绑定，一个数组从下标0开始分别填写省、市、区名称          |
+| v-model:codeValue  | Array   | []      | 双向绑定，一个数组从下标0开始分别填写省、市、区编码（注意：同时绑定modelValue时此属性会依照modelValue来更新所选择的内容，此时v-model:codeValue双向绑定仍然生效） |
+| disabled           | Boolean | false   | 是否禁用（快手小程序不支持）                                 |
+| selectIndex        | Array   | [0,0,0] | selectIndex每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） |
+| loadJson        |  () => Promise<JsonAddress>   |  | 加载自定义json，需要传入一个返回Promise的函数，JsonAddress类型参考下表 |
+
+# JsonAddress类型
+| 属性| 类型 | 必填 |
+| -- | -- | -- |
+| code | String | 是 |
+| name | String | 是 |
+| child | Array<JsonAddress> | 是 |
+
+# 事件
+
+| 事件名称     | 类型        | 描述                                                         |
+| ------------ | ----------- | ------------------------------------------------------------ |
+| cancel       | EventHandle | 用户点击取消时回调                                           |
+| change       | EventHandle | 用户点击确认按钮触发该事件，event = {areaCode: string,area: string,cityCode: string,provinceCode: string,province: string,city: string} |
+| columnchange | EventHandle | 某一列的值改变时触发 columnchange 事件，event = {column: number, value: number}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |
+