Column

Lane mode, a selection mode that uses multiple data columns to display administrative regions side by side

Component reference

Referencing components in your project

import {
  RegionColumnsCore,
  RegionFullColumnsCore,
  RegionColumns,
  RegionFullColumns
} from 'v-region'

Examples

Core Modules

The core module can be freely matched with other interactive forms

<RegionColumnsCore v-model="region" />
<RegionFullColumnsCore v-model="region" />

• 北京市
• 天津市
• 河北省
• 山西省
• 内蒙古自治区
• 辽宁省
• 吉林省
• 黑龙江省
• 上海市
• 江苏省
• 浙江省
• 安徽省
• 福建省
• 江西省
• 山东省
• 河南省
• 湖北省
• 湖南省
• 广东省
• 广西壮族自治区
• 海南省
• 重庆市
• 四川省
• 贵州省
• 云南省
• 西藏自治区
• 陕西省
• 甘肃省
• 青海省
• 宁夏回族自治区
• 新疆维吾尔自治区
• 香港特别行政区
• 澳门特别行政区
• 台湾省

Selector mode

Selector mode using built-in buttons as trigger elements

<RegionColumns language="en" v-model="region" />
<RegionFullColumns language="en" v-model="region" />

Custom selector trigger element

If the built-in trigger button of the component does not meet the needs of the application scenario, you can use the scoped slot Scoped slots to customize the selector trigger element. In addition, you can also customize the style of the selector trigger element and the drop-down container with custom-trigger-class and custom-container-class props

<RegionColumns
  custom-trigger-class="border border-secondary-subtle border-4 rounded-3"
  custom-container-class="border-0"
>
  <template #default="{ data, visible }">
    <button
      type="button"
      class="btn btn-primary"
    >
      data:{{ resultText(data) }},
      visible: {{ visible }}
    </button>
  </template>
</RegionColumns>

Selector scoped slot data format

interface RegionTriggerSlotData {
  /**
   * The currently selected administrative area data model
   */
  data?: RegionModel
  /**
   * Current selector visibility
   */
  visible?: boolean
}