AreaPicker 地区选择器 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# AreaPicker 地区选择器

此选择器用于地区选择场景。

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

通过show绑定一个布尔值变量，用于控制组件的弹出与收起。

<template>
	<view>
		<u-area-picker :show="show" v-model="value"></u-area-picker>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                value:[],
				show: false,
			}
		}
	}
</script>
✅ Copy success!

# 设置默认值

<template>
	<view>
		<u-area-picker :show="show" v-model="value"></u-area-picker>
        <un-button @click="show = true">打开</un-button>
	</view>
</template>
<script>
export default {
	export default {
		data() {
			return {
                value:[130000, 130300, 130304],
				show: false,
			}
		}
	}
}
</script>
✅ Copy success!

# 只显示省市

<template>
	<view>
		<u-area-picker :show="show" :county="false" v-model="value"></u-area-picker>
        <un-button @click="show = true">打开</un-button>
	</view>
</template>
<script>
export default {
	export default {
		data() {
			return {
                value:[130000, 130300, 130304],
				show: false,
			}
		}
	}
}
</script>
✅ Copy success!

# 使用触发器

无需通过show变量控制弹出层的打开和收起

<template>
	<view>
		<u-area-picker v-model="value" @confirm="confirm">
            <template #trigger>
                <un-input :value="value1" placeholder="请选择地区" disabled-color="#fff" disabled clearable />
            </template>
        </u-area-picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			value:'',
            value1:''
		}
	}, 
      methods: {
		confirm(e) {
			this.value1 = e.value.join('')
		}
      }
}
</script>
✅ Copy success!

# 此页面源代码地址

页面源码地址

gitee

# API

# Props

参数	说明	类型	默认值	可选值
v-model	当前选中项对应的值	Array	-	-
show	用于控制选择器的弹出与收起	Boolean	false	true
showToolbar	是否显示顶部的操作栏	Boolean	true	false
province	显示省份	Boolean	true	false
city	显示城市	Boolean	true	false
county	显示区县	Boolean	true	false
title	顶部中间的标题	String	-	-
columns	设置每一列的数据，见上方说明	Array	-	-
loading	加载状态	Boolean	false	true
itemHeight	各列中，单个选项的高度	String \| Number	44	-
cancelText	取消按钮的文字	String	取消	-
confirmText	确认按钮的文字	String	确认	-
cancelColor	取消按钮的颜色	String	#909193	-
confirmColor	确认按钮的颜色	String	#3c9cff	-
visibleItemCount	每列中可见选项的数量	String \| Number	5	-
closeOnClickOverlay	是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	true	false
immediateChange	是否在手指松开时立即触发`change`事件。若不开启则会在滚动动画结束后触发`change`事件，只在微信`2.21.1`及以上有效	Boolean	false	true
round	圆角值，默认无圆角	String \| Number	0	-
showInput 3.2.5	是否显示input输入框	Boolean	false	true
inputProps 3.2.5	input属性，参考input组件	Object	-	-

# Events

事件名	说明	回调参数	版本
close	关闭选择器时触发	-	-
confirm	点击确定按钮，返回当前选择的值	Array: 见上方"回调参数"部分说明	-
change	当选择值变化时触发	Array: 见上方"回调参数"部分说明	-
cancel	点击取消按钮	-	-

# Slot

名称	说明
trigger	自定义触发 3.6.38
default	自定义触发 3.7.0

← Picker 选择器 Rate 评分 →