CityPicker

城市选择器模式

组件引用

在项目中引入组件

import { RegionCityPicker } from 'v-region'

实例

快速应用

<template>
  <RegionCityPicker
    v-model="selected"
    @change="change"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RegionCityPicker } from 'v-region'
import type { RegionItem } from 'v-region'

const selected = ref<string[]>(['110000', '130200', '140100'])
function change (data: RegionItem[]): void {
  console.log(data)
}
</script>

响应数据

v-model values

[
  "110000",
  "130200",
  "140100"
]

change event response results

[
  {
    "key": "110000",
    "value": "北京市"
  },
  {
    "key": "130200",
    "value": "唐山市"
  },
  {
    "key": "140100",
    "value": "太原市"
  }
]

清空/重置

传递一个空数组即可清空选择

selected.value = []

折叠项目

在默认情况下，选择超过 2 个城市项目，将会被统一收纳显示，并显示折叠收纳数量

设置 overflow props 为 true 后，选择项目将被完整显示在触发对象中，不再进行折叠

<RegionCityPicker
  v-model="selected"
  :overflow="true"
/>

Props

interface CityPickerProps {
  /**
   * 语言
   * @default `cn`
   */
  language?: string
  /**
   * 禁用组件
   * @default false
   */
  disabled?: boolean
  /** 为触发对象添加自定义样式类 */
  customTriggerClass?: string
  /** 为下拉容器添加自定义样式类 */
  customContainerClass?: string
  /** 输入区域编码列表 */
  modelValue?: string[]
  /**
   * 按钮中显示选中城市模式
   * true: 显示所有选中城市名称
   * false: 选中的城市多于两个时，仅显示前两个城市名称，其他城市会被收起
   *
   * @default false
   */
  overflow?: boolean
}

事件

城市选择器组件各类操作响应事件

update:modelValue

响应城市选择变化，响应内容为选择城市的编码值

update:modelValue: (data: string[]) => void

change

响应城市选择变化，响应内容为选择城市的模型

change: (data: RegionItem[]) => void

visible-change

响应下拉栏打开 / 关闭的状态变化

visibleChange: (visible: boolean) => void