# RegionsSelectInput 地区选择输入 v1.2.6

地区选择组件用于表单中，与输入框同步弹出选择地区

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

提示

该组件在小程序中，因为层级问题，可能会被页面的pi-bottom-bar 布局覆盖，使用后请谨慎测试

# 示例

# 基础用法

可通过v-model | value：控制选择项

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
     <pi-form-item required prop="regions" label="省市区">
        <pi-regions-select-input v-model="form.regions" />
      </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { regions: '110106000' }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 绑定对象模式

可通过v-model | value：绑定对象模式选择项

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="objectRegions" label="绑定对象模式">
      <pi-regions-select-input
        v-model="form.objectRegions"
        :regions-select="{
          keyDefaultValue: false
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { objectRegion: { id: 'zhuhai', text: '珠海' }, }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# API

# Props

名称	描述	类型	必选	默认值
value	选择组件默认值	—	`false`	-
customStyle	自定义样式，对象形式	`Object`	`false`	{}
customClass	自定义样式类，字符串形式	`String`	`false`	''
rangeSplit	选择项分隔符	`String`	`false`	,
parseValueFn	解析值的方法，如果配置了，则读取该函数的返回值作为显示的内容	`Function`	`false`	-
input	输入框的配置	`Object`	`false`	input配置项
regionsSelect	regionsSelect弹窗的配置	`Object`	`false`	regionsSelect配置项

# Input Props

提示

以下属性覆盖pi-input配置，其余属性参考input配置项

名称	描述	类型	必选	默认值
placeholder	-	`String`	`false`	'请选择'
disabled	-	`Boolean`	`false`	true

# RegionsSelect Props

提示

以下属性覆盖pi-regions-select配置，其余属性参考regionsSelect配置项

名称	描述	类型	必选	默认值
keyDefaultValue	是否只绑定keyField的默认值，默认false	`Boolean`	`false`	`true`

# Slots

名称	说明
default	默认插槽

# Events

方法名称	说明	参数
change	输入框值发生变化	value(String)

← SelectInput 选择输入 Form 表单 →