RegionPicker 地域选择

示例

Chinese Regions

Selected IDs: -
<template>
<article>
  <h4>Chinese Regions</h4>
  <section>
    <veui-region-picker
      v-model="selected"
      :datasource="region"
    />
  </section>
  <section>Selected IDs: {{ result }}</section>
</article>
</template>

<script>
import { RegionPicker } from 'veui'
import region from '@/common/region'

export default {
  components: {
    'veui-region-picker': RegionPicker
  },
  data () {
    return {
      region,
      selected: null
    }
  },
  computed: {
    result () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

API

属性

名称类型默认值描述
datasourceArray<Object>[]

数据源，项目类型为 {label, value, disabled, children, ...}。

名称类型描述
labelstring节点的文字说明。
valuestring=节点对应的值。
disabledboolean=节点是否为禁用。
childrenArray<Object>=子节点列表，列表项类型与本节点相同。
selectedArray<string>-

v-model

已选项 value 的数组。

include-indeterminatebooleanfalse是否将半选状态的节点加入已选项。datasource 节点中的非叶子节点若有部分子孙节点被选中，则为半选状态。
disabledbooleanfalse是否为禁用状态。
readonlybooleanfalse是否为只读状态。

插槽

名称描述
label

每个节点文本描述的内容。

默认内容：每个节点 label 字段对应的文本内容。

名称类型描述
labelstring节点的文字说明。
valuestring节点对应的值。
disabledboolean=节点是否为禁用。
childrenArray<Object>=子节点列表，列表项类型与本节点相同。
levelnumber节点所在的层级。顶层节点层级为 0。
overlayboolean=是否在浮层中。

另外，datasource 内节点中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。

level 为 2 且 overlay 为 true 时为在浮层中展现的三级标题，默认内容会附带被选中的子节点个数及子节点总数信息。

事件

名称描述
select

v-model

选中状态变化后触发，回调参数为 (value: Array)。value 类型与 selected 属性相同。