Column

泳道模式，使用多数据列并排展示行政区域的选择模式

组件引用

在项目中引入组件

import { RegionColumns, RegionFullColumns, RegionDropdown } from 'v-region'

实例

核心模块

核心模块可自由搭配其他交互形式

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

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

选择器模式

使用内置按钮作为触发对象的选择器模式

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

自定义选择器触发对象

若组件内置的触发器按钮不满足应用场景需求，可通过 trigger 插槽对触发器进行自定义

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
}