RegionsSelect 地区选择器

省市区三级联动选择。

• 注意: 该组件地区数据不全，请到下载最新数据，传入regions-data. 下载地址 (opens new window)

默认设置

通过v-model控制地区选择器的显示, regionsData设置区域数据, toolbar-position设置操作条位置(操作条在顶部有取消和确定按钮, 在底部只有确定按钮), show-title设置是否显示标题, @confirm监听确认按钮点击事件

<template>
  <pi-list title="地区选择">
    <pi-list-item title="地区" @tap="handleShowSelect('regions')">
      <input
        :value="form.regions.name"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
      </pi-list-item>
      <pi-list-item title="地区2" @tap="handleShowSelect('regions1')">
        <input
          :value="form.regions1.name"
          type="text"
          class="input"
          placeholder="请选择"
          disabled
        />
      </pi-list-item>
      <pi-list-item title="地区3" @tap="handleShowSelect('regions2')">
        <input
        :value="form.regions2.name"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-list-item>
  </pi-list>
  <pi-regions-select
      v-model="selectOptions.show"
      :regions-data="regionsData"
      :default-value="selectOptions.defaultValue"
      show-title
      height="60vh"
      toolbar-position="top"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
      @confirm="handleSelectConfirm"
    />
</template>

script

import regions from '@/assets/json/regions.json' // 下载的区域数据
export default {
  name: 'Select',
  data() {
    return {
      title: '',
      form: {
        regions: { code: '110101000000', name: '' },
        regions1: { code: '11', name: '' },
        regions2: { code: '442000000', name: '广东省中山市' }
      },
      selectOptions: {
        key: '',
        show: false,
        isMulti: false,
        defaultValue: null
      }
    }
  },
  computed: {
    regionsData() {
      return regions
    }
  },
  methods: {
    handleShowSelect(formKey) {
      this.selectOptions = {
        key: formKey,
        show: true,
        defaultValue: this.form[formKey],
        title: this.form[formKey].title
      }
    },
    handleSelectConfirm(value) {
      this.form[this.selectOptions.key] = value
      return true
    }
  }
}

Props

名称	描述	类型	必选	默认值
value	初始值	—	false	-
customStyle	自定义样式，对象形式（默认值：{}）	Object	false	{}
customClass	自定义样式类，字符串形式（''）	String	false	''
regionsData	区域数据（数据不全）	Array	false	-
keyField	选项id字段	String	false	'code'
displayField	选项显示字段	String	false	'name'
defaultValue	默认值，单选时传Object，多选时传Array	Object/Array	false	null
itemHeight	行高，单位(rpx)	String/Number	false	110
showItemBottomBorder	是否显示item下边框	Boolean	false	true
itemStyle	行样式	Object	false	{}
popupSelect	弹窗的配置	Object	false	popupSelect配置项
popup	弹窗的配置	Object	false	popup配置项
confirmBtn	弹窗的配置	Object	false	confirmBtn配置项
cancelBtn	弹窗的配置	Object	false	cancelBtn配置项

ConfirmBtn Props

提示

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

名称	描述	类型	必选	默认值
show	是否显示确认按钮	Boolean	false	true
text	确认文案	String	false	'确认'
width	确认按钮宽度	String | Number	false	100%
type	确认按钮预置样式	'default' 'primary' 'warn' 'secondary' 'line'	false	'primary'

CancelBtn Props

提示

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

名称	描述	类型	必选	默认值
show	是否显示取消按钮	Boolean	false	false
text	取消文案	String	false	'取消'
width	取消按钮宽度	String | Number	false	100%
type	取消按钮预置样式	'default' 'primary' 'warn' 'secondary' 'line'	false	'secondary'

Events

事件名	描述	参数
close	点击取消	-
confirm	点击事件	regions

Slots

名称	描述	插槽内容
title	标题	默认：prop tite
header	顶部区域	-
footer	底部区域	-

Methods

Method	Description	Parameters
handleCancel	取消选择	-
handleConfirm	确认选择	-