Column

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

组件引用

在项目中引入组件

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

实例

核心模块

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

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

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

选择器模式

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

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

自定义选择器触发对象

若组件内置的触发器按钮不满足应用场景需求，可使用作用域插槽 Scoped slots 自定义选择器触发对象，另外同时可以配合 custom-trigger-class 和 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>

选择器作用域插槽数据格式

interface RegionTriggerSlotData {
  /**
   * 当前选择的行政区域数据模型
   */
  data?: RegionModel
  /**
   * 当前选择器是否可见
   */
  visible?: boolean
}