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 { RegionColumns, RegionFullColumns, RegionDropdown } 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" />

Dropdown mode

Dropdown selection mode using built-in buttons as trigger elements

auto-select-first

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

Custom dropdown trigger object

If the built-in trigger button of the component does not meet the needs of the application scenario, you can customize the trigger through the trigger slot

template

<RegionDropdown>
  <template #trigger="{ visible }">
    <button
      type="button"
      class="btn btn-primary"
    >
      data:{{ resultText() }},
      visible: {{ visible }}
    </button>
  </template>
  <RegionColumns @change="change" />
</RegionDropdown>

js

const model = ref()

function resultText() {
  ...
}
function change(data) {
  model.value = data
}