地区选择弹窗组件 (c-selectDistrict)

地区选择弹窗组件用于选择省、市、区三级地区，支持自定义选择层级，常用于表单、地址选择等场景。

基本用法

<template>
  <view>
    <c-selectDistrict
      :show="show"
      :type="3"
      close-on-click-overlay
      @confirm="onConfirm"
      @cancel="onCancel"
    ></c-selectDistrict>
    <u-button @click="show = true">选择地区</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    onConfirm(e) {
      // 处理选择结果
      this.show = false;
      console.log("选择结果", e);
    },
    onCancel() {
      this.show = false;
    },
  },
};
</script>

接口调用

TIP

如接口不一致 需咨询后端 现框架: /ruoyi/city/getByPid

const getArea = (data = {}, config) =>
  http.get("/ruoyi/city/getByPid", { params: data, ...config });

属性说明

属性名	类型	默认值	说明
show	Boolean	false	是否显示弹窗
type	Number | String	3	选择类型：1-省，2-省市，3-省市区

事件说明

事件名	说明	回调参数
confirm	点击确定按钮时触发	选中的地区数据
cancel	点击取消按钮时触发	-
change	选择内容变化时触发	变化事件对象

注意事项

1. 组件依赖 u-picker 组件和 $api.getArea 接口，请确保项目中已集成相关依赖。
2. type 属性为 1 时仅选择省，2 时选择省市，3 时选择省市区（默认）。
3. 事件 confirm 返回选中的完整地区信息，可用于表单提交等场景。
4. 组件内部会自动根据选择类型动态加载下一级地区数据。