uView Next

# AreaPicker 地区选择器 新

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

# 平台差异说明

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

# 基本使用

  • 通过show绑定一个布尔值变量，用于控制组件的弹出与收起。
<template>
	<view>
		<u-area-picker :show="show" v-model="value"></u-area-picker>
		<u-button @click="show = true">打开</u-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>
        <u-button @click="show = true">打开</u-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>
        <u-button @click="show = true">打开</u-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>
                <u-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 / modeValue 当前选中项对应的值 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 false true
immediateChange 是否在手指松开时立即触发change事件。若不开启则会在滚动动画结束后触发change事件，只在微信2.21.1及以上有效 Boolean false true
round 圆角值，默认无圆角 String | Number 0 -

# Events

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

# Slot

名称 说明
trigger 自定义触发

← Rate 评分 →