更新记录

1.0.0（2025-01-07）

插件市场处理

平台兼容性

RegionSelection 组件使用文档

功能简介

RegionSelection 是一个支持三级级联选择的 Uniapp 自定义组件，提供省、市、区的选择功能，适用于地址选择场景。组件内置数据加载逻辑和用户交互支持，可轻松集成到项目中。

安装与引入

1. 安装组件

将 RegionSelection 组件的代码复制到项目中的组件目录，例如 components/RegionSelection。

确保将 pca.json 文件存放到项目路径（如 @/static/utils/pca.json），用于加载省市区数据。

2. 引入组件

在需要使用的页面中引入组件：

import RegionSelection from '@/components/RegionSelection/RegionSelection';

3.注册组建

export default {
  components: {
    RegionSelection
  }
};

4.在页面直接使用模版

<regionselection 
  :city="city"
  :district="district"
  :province="province"
  @selection-confirm="handleRegionSelection"
/>

属性Props

子组建事件

示例

以下是一个父组建完整使用例子，包括地址选择和表单功能

<template>
  <view class="address">
    <!-- 地区选择组件 -->
    <regionselection 
      :city="city"
      :district="district"
      :province="province"
      @selection-confirm="handleRegionSelection"
    />

    <!-- 输入详细地址 -->
    <textarea 
      class="detailed_address" 
      placeholder="请输入详细地址" 
      v-model="detailed_address"
    />

    <!-- 收货人信息 -->
    <view class="contact-info">
      <input 
        type="text"
        placeholder="收货人姓名"
        v-model="receiverName"
      />
      <input 
        type="number"
        placeholder="手机号码"
        v-model="phoneNumber"
      />
    </view>

    <!-- 提交按钮 -->
    <button @click="submitAddress">保存地址</button>

  </view>

</template>
<script>
import RegionSelection from '@/components/RegionSelection/RegionSelection';

export default {
  components: {
    RegionSelection
  },
  data() {
    return {
      province: '',
      city: '',
      district: '',
      detailed_address: '',
      receiverName: '',
      phoneNumber: ''
    };
  },
  methods: {
    handleRegionSelection(region) {
      this.province = region.province;
      this.city = region.city;
      this.district = region.district;
    },
    submitAddress() {
      if (!this.province || !this.city || !this.district) {
        uni.showToast({ title: '请选择所在地区', icon: 'none' });
        return;
      }
      if (!this.detailed_address) {
        uni.showToast({ title: '请输入详细地址', icon: 'none' });
        return;
      }
      if (!this.receiverName) {
        uni.showToast({ title: '请输入收货人姓名', icon: 'none' });
        return;
      }
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
        return;
      }

      uni.showToast({ title: '地址保存成功', icon: 'success' });
    }
  }
};
</script>

效果图

以下是 RegionSelection 组件的实际效果演示：

注意事项

1. 数据加载：确保 pca.json 文件路径正确。
2. 事件监听：父组件需要监听 selection-confirm 事件以获取选择结果。
3. 组件嵌套：支持在复杂表单中嵌套使用，需根据具体场景调整样式和逻辑。