next UI

# City 城市选择器

# 概述

快速选择中国城市，常用于地图、旅游等基于位置的城市选择场景。
该组件支持 Form 校验。

# 代码示例

基础用法
基本的用法，支持按城市、按省份切换排列，支持搜索，支持按城市、省份首字母快速定位。
设置属性 show-suffix 可以控制是否显示 市 字。
北京
北京市 
<template>
    <Row>
        <Col span="12">
            <City v-model="value1" />
        </Col>
        <Col span="12">
            <City v-model="value2" show-suffix />
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                value1: '110000',
                value2: '110000'
            }
        }
    }
</script>
Expand Copy
预设城市
设置属性 cities 可以预设一些指定的城市，它们会出现在快捷选择区域。
北京 
<template>
    <City v-model="value" :cities="cities" />
</template>
<script>
    export default {
        data () {
            return {
                value: '110000',
                cities: ['110000', '310000', '440100', '440300', '510100', '120000', '330100', '420100', '500000']
            }
        }
    }
</script>
Expand Copy

# API

# City props

属性 说明 类型 默认值
value 指定选中项目的 value 值，可以使用 v-model 双向绑定数据。该值为城市 code, 查看全部城市 code String -
use-name 1.2.0 value 值可以设置为名称，比如北京（名称不含“市”字 Boolean false
cities 预设城市，会出现在快捷选择区域，各项为城市 code Array []
disabled 是否禁用选择器 Boolean false
show-suffix 是否显示后缀“市”，例如开启则显示“北京市”，否则显示“北京” Boolean false
size 选择框大小，可选值为large、small、default 或者不填 String default
transfer 是否将弹层放置于 body 内 Boolean false
element-id 给表单元素设置 id，详见 Form 用法。 String -
placeholder 默认的提示文字 String 请选择
search-placeholder 搜索框默认文字 String 输入城市名称搜索

# City Events

事件名 说明 返回值
on-change 选择城市时触发，返回该城市的详细内容，包括城市 code (c)，对应省 code (p)，城市名 (n)，城市名首字母缩写 (l) data

← 通知菜单 →