props

Events

• focus <event>
• click <event>
• blur <event>
• change <value, event>
• input <value, event>

usage

<veui-input ui="small" 
    v-model="password"
    type="password"
    composition
    select-on-focus
    fit-content
    autofocus
    placeholder="请输入密码"
    @click="log('click')"></veui-input>

props

• uploaderType 上传类型，file或image
• name 数据名称
• action 提交地址
• files 已经上传了的文件
• throughIfame 是否通过iframe上传兼容ie9
• withCredentials 不通过iframe上传时，xhr的withCredentials
• headers 不通过iframe上传时，xhr的头部
• iframeCallbackType 通过iframe上传时，取值为‘postmessage’（通过postMessage回调）
  或者'func'（上传时把回调函数名传给后端，后端返回parent.veuiUploaderCallback【回调函数名】(data))
• convertResponse 一个用来转换后端返回数据的函数
  组件里用后端返回的data.status === 'success' 或data.status === 'failure‘来判断上传是否成功
  如果后端返回其他格式的data需要用这个函数进行转换
  函数的参数是后端返回的data，函数return的object需要包含status，值为'success'或'failure'
• disabled 是否禁用
• previewImage 上传类型是file时，是否显示小图预览
• extentionTypes 允许的扩展类型，字符串或数组
• maxSize 单个文件的大小限制，单位为MB
• maxCount 最多可以上传的文件数量，当超过这一数量时，会自动删除掉最先上传的文件
• needButton 上传类型是image时，上传按钮是列表外的button还是列表里的一个+号
• ui 样式 （multiline: 文件名过长时多行显示 ellipsis:文件名过长时截断 horizontal: 横向排列
  large: 上传类型是image时，显示大图 small: 显示小图
  bottom-mask: 上传类型是image时，预览图hover时使用在底部的局部遮罩浮层
  list-icon: 上传类型是file时，在文件列表的文件名前显示一个文件图标）
• uploadingContent 值为'text'显示uploadingText
  值为'progressPercent'显示进度百分比
  值为'progressBar‘显示进度条
  iframe模式时只能取'text'
• args 需要提交的额外参数，Object，value可以是常量或函数
• autoUpload 选完文件后是否自动上传

slots

• tip: 提示内容
• warning: 警告内容
• button: 用来放置自定义的上传按钮，这个slot里只能放置一个节点，如果这个slot里有东西，会把本来的
  label的opacity设为0，并且宽高设置成和slot里的节点一样，但需要自己用css把slot里的button放到
  label下面
• file-content：文件列表每行的内容
• uploading-content：文件列表上传中的显示内容
• failure-content：文件列表上传失败的显示内容

events

• change 添加新文件时的事件，参数为组件内部的fileList
• success 上传成功时的事件，参数为后端返回的data
• failure 上传成功时的事件，参数为后端返回的data
• delete 要删除文件时抛出的事件，参数为要删除的file
• cancel 要取消上传时抛出的事件，参数为要取消上传的file，在xhr模式下可以file.xhr.abort()

Form系列组件

一些约定

1. Form 系列组件包括 Form/FieldSet/Field，按上述顺序嵌套使用，理论上没有互相嵌套的用法，FieldSet可选
2. Form 的主要责任是提供一个表单数据级别的提交流程，数据输入输出上的格式应该是 vm 的事情
3. FieldSet 主要做展示上的事情，没有校验的功能
4. Field 和 InputComponent 其实是一个不可分割的东西，抽取了 InputComponent 关于校验层面的东西，提供 InputComponent 的单值校验功能，重置值功能；需要注意的是，Field 内部的 InputComponent 不允许单独变更，如果需要 v-for/v-if 需要在 Field 层面操作，如果强烈需要在 InputComponent 层面 v-for，目前应该需要自己实现成一个 veui InputComponent
5. InputComponent 可以脱离 Field 使用，但是没有校验功能
6. Field 是 Form 输出的最小单位，一个 Field 下边只能可以有多个 InputComponent，存在多个则会合并成数组输出，如果需要特殊处理其中的 InputComponent，应该分成多个 Field

Form

Props

Props.validators

提供给表单级别联动校验/异步校验的功能，格式如下

[
  {
    fields: ['start', 'end'],
    handler (start, end) {
      if (!start || !end) {
        return true
      }
      if (parseInt(start, 10) >= parseInt(end, 10)) {
        return {
          start: '下限必须小于上限'
        }
      }
      return true
    },
    triggers: 'change,input'
  },
  {
    fields: 'phone',
    handler (phone) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          if (phone === '18888888888') {
            return reject({
              phone: '该手机已被注册'
            })
          }
          return resolve()
        }, 3000)
      })
    }
  }
]

Data

• fields
  • @type {Array} 管理 FieldSet 和 Field

Computed

• formData
  • @type {Object} 绑定了 this.data 则为 this.data，否则取内部 Field 的值计算

Methods

1. validate(names)

   根据 Field 上边 的 rules 和 Form.validators 进行校验，由于可以涉及异步校验，统一采用 Promise 返回

   @param {Array} [names] 针对部分属性进行校验，不传则检查 form 内所有 Field
   @return {Promise} 校验成功进入resolve流程，无参数，校验失败进入reject流程，参数是以 InputComponent 的 name为key，message为值的对象。

2. reset

   重置到表单初始化值，清除校验信息

Events

1. sumbit

   原生submit事件触发时抛出

   @event Form#submit

   @param {Object} data - 表单数据对象，见 props.data 的说明

   @param {Object} event - 原生submit事件

2. invalid

   校验失败时触发

   @event Form#invalid

   @param {Object} errorMessage - 错误信息对象，key 为 InputComponent name，值为出错信息字符串

props

• pageNo 第几页，默认：1
• pageSize 每页多少条，默认：30
• pageTotal 一共多少条
• hrefTpl 链接模板，默认：$page
• layout 布局类型，enum{basic, advanced, full, hetero}

events

• redirect 点击数字翻页时触发事件，回调函数接收目标页数

usage

<veui-pager :page-total="233" href-tpl="#!/path/to/page/$page/" />

<veui-pager :page-total="233" @redirect="handlePageRedirect" />

Select

props

以下类型继承于InputControl的mixin
* name: 表单名
* value: 表单值
* disabled: 是否禁用

新增props如下：

• ui: Select下拉框的类名，如"primary large"
• placeholder: 占位符

slots

• option 列表项

events

• change: 选中值发生改变时触发
• visible-change: 下拉框出现/隐藏时触发

使用示例

<veui-select ui="primary large" name="demo" value="2">
    <veui-option name="我是第一项" value="1"></veui-option>
    <veui-option name="我是第二项" value="2" disabled></veui-option>
    <veui-option name="我是第三项" value="3"></veui-option>
</veui-select>

<template>
  <veui-select ui="primary large" name="demo" value="2" :options="options">
    <template slot="option" scope="item">
      <span :value="item.value">{{item.label}}</span>
    </template>
  </veui-select>
</template>

InputControl 实现规范

InputControl必须要实现的公开属性：

1. value，组件初始化及输出的格式化数据
2. name，组件数据输出名称
3. readonly，只读状态
4. disabled，禁用状态
5. uiTypes，描述组件的类型

InputControl必须要实现的私有属性：

1. _rawValue，组件内部处理时使用的结构化数据

InputControl必须要实现的公开方法：

1. serialize，提供给外部比如Form序列化表单数据使用的方法

InputControl必须要实现的私有方法：

1. _convert，从组件value转化为_rawValue的内部方法

以上属性由mixins/input.js提供声明及部分默认定义，创建InputControl需要mixin该模块，并对部分需要增强自身逻辑的属性及方法进行覆盖。具体接口实现请关注 #10

• Tabs (@qbaty)
• Searchbox (@teazean)
• Step (@Justineo)
• Toast (@feibinyang)
• Alert (@feibinyang)
• AlertBox (@yibuyisheng)
• ConfirmBox (@yibuyisheng)
• PromptBox (@yibuyisheng)
• RegionPicker (@Justineo)

把 icon 的接口和实现在 veui 解耦，每个组件只按实际语义定义图标的「接口」，然后由主题包来对接实现。这样还可以使 veui 不需要用目前的「引入虚拟路径供改写」的方式直接引入图标的实现。

目前需要分几步来改造：

• babel-plugin-veui 支持自动引入主题包的 JS 文件，去除自动直接引入主题包内 icon 的逻辑。

• 主题包中给每个组件提供图标配置、引入的逻辑（同时这里还可以给不同主题配置不同的默认配置）。

  // veui-theme-x/components/DatePicker.js
  import { config } from 'veui/managers'
  import '../icons/calendar'
  import '../icons/cross-o'
  
  config.defaults('datepicker.icons', {
    calendar: 'calendar',
    clear: 'cross-o'
  })

• 创建 icons mixin，为使用了图标的组件添加一个 computed 值 icons。

• 改造组件图标的引入逻辑，通过实际语义来命名图标，主题包可以自行根据对应名字进行注册。

  <veui-icon class="veui-date-picker-icon" :name="icons.calendar"></veui-icon>

如题。

Tabs

props

events

change

slots

<veui-tabs active="1" @change="changed" tabPosition="left">
     <veui-tab-panel name="1" label="Tab one">This is Tab one content</veui-tab-panel>
     <veui-tab-panel name="2" label="Tab two">This is Tab two content</veui-tab-panel>
     <veui-tab-panel name="3" label="Tab three">This is Tab three content</veui-tab-panel>
</veui-tabs>

InputComponent 实现规范

InputComponent必须要实现的公开属性：

1. uiTypes，描述组件的类型
2. value，组件初始化及实现双绑的数据
3. name，组件数据输出名称
4. readonly，只读状态
5. disabled，禁用状态

InputComponent必须要实现的事件：

1. @input，抛出由交互产生变动的新value值，用于实现v-model

以上属性由mixins/input.js提供声明及部分默认定义，创建InputComponent需要mixin该模块，并对部分需要增强自身逻辑的属性进行覆盖。具体接口实现参考 #10 。

• 选项默认颜色不对

• 右侧有图标时文字右边距太小

• 缺少灰底样式

• 缺少分隔线

• Demo 缺少禁用、只读样式

• 缺前置样式

• 下拉框高度是否可以指定？（须和 UE 确认）

• 下拉框边缘似乎有淡出效果

Dialog

props

• title 对话框标题
• ui reverse->对话框标题白底蓝字 normal->对话框标题蓝底白字（默认值）
• center 是否在浏览器视口居中显示
• top 对话框顶部到浏览器视口顶部的距离，可以是百分数，优先级高于center
• left 对话框到浏览器视口左侧的距离，可以是百分数，优先级高于center
• mask 是否需要遮罩层
• draggable 是否能拖拽
• closeVisible 是否展示关闭按钮
• visible 是否显示对话框
• height 高度
• width 宽度

slots

• title

• - 内容块

• foot

events

• show
• hide
• sizechange
• positionchange

props

events

click

usage

<veui-button-group :items="items3" :current="current" :vertical="vertical"></veui-button-group>

本 issue 记录 0.2.4 → 0.3.0 时，Uploader 组件接口的 breaking change。

Props

• uploaderType → type
• extensionTypes → extensions
• uploadingContent → progress
• previewImage 移除

Slots

• text → button-label
• button 移除
• tip → desc
• warning 移除
• typeInvalidText 移除
• sizeInvalidText 移除
• file-content → file
• successText → success-label
• failure-content → failure
• failureText → failure-label
• uploading-content → uploading
• uploadingText → uploading-label

可以考虑参考浏览器默认行为：

• Dialog 支持无标题栏样式
• outside 指令 hover 触发时的实现调整为使用 mouseenter / mouseleave
• OverlayManager 实现同 context 浮层的优先级处理
• Overlay 在 tether 计算位置之前，设置 opacity 为 0
• DatePicker 支持快捷选择
• DatePicker 支持disabled/readonly
• DatePicker 时段选择选完开始时间显示已选日期
• Form 支持层级disabled/readonly
• Uploader 支持 v-model
• Select 组件分隔线支持
• Select 组件下拉框截断部分边缘淡出效果
• 去除对 vue-awesome/icons 的依赖

「Form 支持多提交按钮带参数」暂不实现了。

• 合并单元格
• 固定表头
• 固定列
• 提示
• 展开行
• 调整列宽
• 筛选
• 跨页选择

合并单元格

为 Column 组件新增 prop：span。

可以配置为返回如下格式对象的函数：

{
  row: 2,
  col: 2
}

固定表头

有两个方案：

1. 锁定到屏幕上边缘；
2. 固定表格高度，在表格内部滚动。

固定列

为 Column 组件新增 prop: fixed。

可配置为 Boolean 或 String（left/right）。

提示

在 TableHead 下方增加一行，并合并整行单元格，用来显示提示。

展开行

待补充。

调整列宽

待补充。

筛选

待补充。

跨页选择

待补充。

RT

chrome 61.0.3163.100
OS X

Props

• datasource: Array

[
  {
    value: '1',
    label: 'Steve Rogers'
  },
  {
    value: '2',
    label: 'Natasha Romanov',
    children: [
      {
        value: '3',
        label: 'Bruce Banner'
      }
    ]
  },
  ...
]

• searchable: boolean

• filter: Function

• placeholder: string

slots

• head

• no-data

scopedSlots

• default

Props

• datasource: Array

  数据源。预定义的字段如下：

  • src - 图片地址
  • type - 类型，默认 img，可选值 video / img
  • name - 业务逻辑中引用的 slug 名称
  • label - 文本标题
  • caption - 完整标题

• index: Number

  当前激活的项目序号。[.sync]

• indicator: String

  进度指示器的显示模式，默认 radio，可选值 radio / number / tab / none。

• switch-trigger: String

  指示器触发翻页的条件，默认 click，可选值 click / hover。

• pause-on-hover: Boolean

  鼠标悬浮时暂停自动播放，默认值 true。

• autoplay: Boolean

  是否自动播放，默认值 true。

• interval: Number

  相邻项目切换间隔毫秒数，默认值 3000。

Slot

• default

  轮播项的内容，scope 传入 datasource[index] 对应的 item（展开）及 index。

Event

• change

  轮播项变化的时候触发。参数列表 index、item，分别为变更后的序号、数据源项目。

Props

• datasource: Array

[
  {
    value: '1',
    label: 'Steve Rogers'
  },
  {
    value: '2',
    label: 'Natasha Romanov',
    children: [
      {
        value: '3',
        label: 'Bruce Banner'
      }
    ]
  },
  ...
]

• itemClick: 'toggle' | 'none'

Events

• click

• expand

• collapse

Scoped Slots

• item

• item-label

实现 :focus-ring 样式，模拟类似 Chrome 中 <button> 仅在键盘导航触发聚焦时显示 focus ring 的效果。（:focus 条件过于宽泛，因为鼠标点击后仍然处于聚焦状态，造成一种「按钮被选中」的假象。）

比如下图的按钮组：

第一个按钮被鼠标点击后效果如下：

可以引入 polyfill 后将 :focus 样式调整为 .focus-ring 的样式。

BreadcrumbItem

props

• separator 节点分隔符
• to 要跳转到的链接

events

• click

slots

<veui-breadcrumb-item to="http://www.baidu.com">首页</veui-breadcrumb-item>

Breadcrumb

props

• separator 节点分隔符

events

• item-click 会传递给回调函数$index参数

slots

示例：

<veui-breadcrumb @item-click="onBreadcrumbItemClick($index)">
    <veui-breadcrumb-item :to="'http://www.baidu.com'">首页</veui-breadcrumb-item>
    <veui-breadcrumb-item>用户列表</veui-breadcrumb-item>
</veui-breadcrumb>

to 和 item-click 互斥，to 的优先级更高。

props

events

click/change

usage

props

Range Object

function addDays(days) {
  let current = new Date();
  return current.setDate(current.getDate() + days);
}

const current = new Date();
enum ShortDayRange {
    weekday,
    weekend
}
const range: {
        from: current,
        to: addDays(7),
        exclude: [Date/String/ShortDayRange]
    }

disabledDates

function disabledDate(current) {
  // can not select days before today and today
  return current && current.valueOf() < Date.now();
}

<veui-datepicker :disabledDates="disabledDate"></veui-datepicker>

Events

• change
• click

目前 select/Option的slot只能算是 slot[name=label]，计划再增加一个 option/item级别的默认slot。

但是发现一个问题，也是之前讨论过的：

在select/Select使用select/Option是，好像是只能往外开放select/Option的默认slot；如果select/Option有slot[name=default]和slot[name=label]这样的话，按照目前的设计，就永远也不能达到 ui=checkmark下，只覆盖label的情况。

<veui-option
            v-else
            v-bind="option"
            :ui="ui"
            :selected="option.value === value"
            :key="option.value"
            @select="handleSelect(option)">
            <slot name="option" v-bind="option" :selected="option.value === value"></slot>
</veui-option>

像变量没有使用、缩进错误、数组逗号等并不影响代码运行的规则能否不要在 dev 时检查，否则 debug 时比较麻烦。

这些检查可以配置到 git commit 的 hook 上进行检查。

• Transfer (@yibuyisheng)
• Carousel (@Justineo)
• Progress (@Justineo)
• Schedule (@Justineo)
• NumberInput (@chestnutchen)
• Slider (@599316527)

这些组件暂缓。

• ColorPicker (@599316527)
• Anchor
• TokenInput
• TimePicker

Steps Props

Steps.Step Props

usage

<veui-steps>
  <veui-step title="第一步" />
  <veui-step title="第二步" />
  <veui-step title="第三步" />
</veui-steps>

主要约束组件文件名、组件 name 属性和主元素的 class。

规则为将 PascalCase 的文件名严格转为 kebab-case 的形式。由于之前未约定，需要修改部分已有的公有组件。（注意这是多个 breaking change，如果为特定组件 class 覆盖过样式需要随此变更更新自定义代码。）

修改清单：

CheckboxGroup
class: veui-checkboxgroup → veui-checkbox-group

RadioGroup
class: veui-radiogroup → veui-radio-group
name: veui-radiogroup → veui-radio-group

DatePicker
class: veui-datepicker → veui-date-picker
name: veui-datepicker → veui-date-picker

RegionPicker
class: veui-regionpicker → veui-region-picker
name: veui-regionpicker → veui-region-picker

PromptBox
class: veui-promptbox → veui-prompt-box
name: veui-promptbox → veui-prompt-box

Color Swatch 色样组件

Props

<veui-color-swatch color="#ff00ff" ui="small hex alpha"></veui-color-swatch>

Color Picker 取色器组件

Props

<veui-color-picker v-model="color" ui="normal"></veui-color-picker>
<veui-color-picker :color.sync="color" ui="large"></veui-color-picker>

Events

Color Palette 色板组件

Props

Events

<veui-color-picker v-model="color">
  <veui-color-palette :colors="colors" ui="small"
    @select="handlePaletteColorSelect"
    @remove="handlePaletteColorRemove"
    @add="handlePaletteColorAdd"
  ></veui-color-palette>
</veui-color-picker>

• Button (@Justineo)
• Calendar (@Justineo)
• DatePicker (@Justineo)
• Table (@Justineo)
• Pager (@599316527)
• Select (@Justineo)
• Searchbox (@teazean)
• Tooltip (@Justineo)
• Radiobox (@Justineo)
• RadioGroup (@Justineo)
• RadioButtonGroup (@Justineo)
• ButtonGroup (@Justineo)
• Checkbox (@Justineo)
• CheckboxGroup (@Justineo)
• CheckButtonGroup (@Justineo)
• Tab (@qbaty)
• Breadcrumb (@yibuyisheng)
• Dropdown (@Justineo)
• Steps (@Justineo)
• Input (@Justineo)
• RegionPicker (@Justineo)
• Toast (@Justineo)
• Form (@yibuyisheng)
• AlertBox (@yibuyisheng)

• ConfirmBox (@yibuyisheng)
• PromptBox (@yibuyisheng)

target 指定为 ref 字符串的时候，targetNode 使用 computed 会阻止后续重新计算。

• Breadcrumb (@yibuyisheng)
• Overlay (@yibuyisheng)
• Dialog (@yibuyisheng)
• Icon (@Justineo)
• Button (@Justineo)
• Table (@Justineo)
• Calendar (@Justineo)
• DatePicker (@Justineo)
• ButtonGroup (@neverlandcx)
• Switch (@neverlandcx)
• Uploader (@r7r10t32)
• Select (@feibinyang)
• Dropdown (@feibinyang)
• Tooltip (@feibinyang)
• Radiobox (@miyakosama)
• Checkbox (@miyakosama)
• BoxGroup (@miyakosama)
• Form (@chestnutchen)
• Input (@chestnutchen)
• Pager (@599316527)

安装

安装依赖

配置

• babel-plugin-veui

• veui-loader

• Postcss

指南

组件

分类/字母序组织组件

• props/slots/scoped slots/events/ui
• sync/v-model
• 预设的全局配置

指令

• v-drag
• v-outside

插件

• 指令式 Toast 调用插件

高级

主题包

• 预设主题包
• 如何定制

表单

• 校验、提交
• 扩展自定义规则

全局配置

选项配置

图标配置

• 替换预设图标
• 构建自己的图标集

浮层管理

• 浮层堆叠原理
• 自定义浮层组件

[草稿]

Props

• datasource: Array

  [
    {
      id: '1',
      label: 'Steve Rogers'
    },
    {
      id: '2',
      label: 'Natasha Romanov'
    },
    ...
  ]

• searchable: Boolean

• filter: Function

• selected: Array [v-model]

Events

• select [v-model]

Slots

• default

• candidate-label

• selected-label

Scoped Slots

• canditate-item

• selected-item

属于输入组件 提供disabled readonly autofocus等功能。

Props

Events

体验类

• Select 等下拉框滚动区域上下渐变遮罩
• Uploader 交互细节更新
• Dialog 关闭按钮交互视觉反馈

功能类

• Dropdown 组件支持 split

暂缓

• 图标设计与手百合并后更新（#230）

1 希望能够自定义select组件中 overlay的overlayClass
2希望增加事件（点击option）可以反回当前item 对象。
3 如果能有文档 || 源码 || demo 中能加入组件”参数“配置的注释就更好了

Slider（部分内容待完善）

props

code待添加

event

设计思路，以默认水平方向滑块轨道说明（以下内容待完善）

1.百分比value值
2.百分比width值

两种轨迹思路
1.全部的轨道，包含滑块在内，对应滑块的圆心轨迹，在轨道上
2.除滑块以外的宽度，对应滑块的左侧边缘轨迹在轨道上

对应HTML结构设计
1.待完善
2.待完善

如果一个target[ref]是在v-for循环里面，target的值只能是数组，可以在当前vm提前获取target的HTMLElement，传给Tooltip，但到Tooltip会抛warning.

[Vue warn]: Invalid prop: type check failed for prop "target". Expected String, got HTMLDivElement.

InputComponent 接口

如果一个组件希望在 Form 中被感知并处理数据，必须实现该接口。

涉及组件

第一批组件 #1 中需要实现的如下列表：

• Button
• Uploader
• Select
• RangeCalendar
• Radiobox
• Checkbox
• BoxGroup
• Calendar
• TextInput

接口描述

• InputComponent.uiTypes
  • @type {Array} 组件内部类型，默认为['input']，直接mixin到vm上
• InputComponent.props.value
  • @type {Mixed}
• InputComponent.props.name
  • @type {string}
• InputComponent.props.readonly
  • @type {Boolean} 组件只读状态，默认为false
• InputComponent.props.disabled
  • @type {Boolean} 组件禁用状态，默认为false
• @emit input
  • @param {Mixed} newVal 由组件内部更新data._rawValue后格式化输出的值，用于实现通知外部更新props.value

具体实现

通过具体组件添加input的mixin实现

• uiTypes

  给组件混入一个uiTypes的属性，默认为['input']，组件内部追加自己的详细type，通过mergeStrategy处理合并。

  uiTypes: ['input']

• value

  给组件声明一个props的value值，不限定类型，初始值可由组件覆盖。

  props: {
    value: null
  }

• name

  给组件声明一个props的name值，类型为字符串。

  props: {
    name: String
  }

• readonly

  给组件声明一个props的readonly值，类型为布尔值，默认值false。

  props: {
    readonly: String
  }

• disabled

  给组件声明一个props的disabled值，类型为布尔值，默认值false。

  props: {
    disabled: String
  }

• @input

  输入型组件必须实现该事件，在用户修改原生DOM对内部造成value变化时，需要触发该事件，并传递一个和props.value类型及格式保持一致的数据。

属于输入控件，提供 disabled / readonly 状态，并实现 v-model。

props

• datasource

  地域数据，结构为：

  [
    {
      label: '全国', // 没有 id 则不会出现在结果中
      children: [
        {
          label: '华北地区',
          children: [
            {
              label: '北京',
              id: '1' // id 是字符串
            },
            {
              label: '天津',
              id: '2'
            },
            {
              label: '河北',
              id: '3',
              children: [
                {
                  label: '石家庄',
                  id: '4'
                },
                ...
              ]
            },
            ...
          ]
        }
      ]
    }
  ]

• selected (v-model)

  输出值，表示被选中的区域。值为区域 id 的数组。

  ['1', '2', '4']

• includeIndeterminate

  是否输出部分选择的节点。

events

• change (v-model)

  用户操作导致选项发生变化时触发，参数为所有选中项。

• select

  用户操作导致选项发生变化时触发，参数为 1. 是否选中，2. 变化的项目 id。

slots

• label (scoped)

  scope 参数：

  • level - Number 类型，表示层级数。默认情况下，0 表示根节点，1 ~ 3 为地区、省、市。
  • label - String 类型，当前项目文本。
  • id - String 类型，当前项目 id。

使用方法

<veui-regionpicker :datasource="regionData" v-model="regions">
  <template slot="label" scope="props">
    <strong v-if="props.level === 0">**</strong>
    <strong v-else-if="props.id">{{ props.label }}</strong>
    <span v-else>{{ props.label }}</span>
  </template>
</veui-regionpicker>

Select、BoxGroup 等包含 options/datasource 的组件，value 同步时需要在其中过滤。

Props

Events

• input <value, event>
• search <value, event>

usage

<veui-search-box ui="small alt" 
    v-model="searchText"
    select-on-focus
    autofocus
    placeholder="查找广告主"
    @search="log('search')"></veui-search-box>

Mixins

• input

Props

• selected: Object [v-model]

  已选的时间段。格式如下：

  {
    0: [ [0, 23] ],           // 周日
    1: [ [9, 12], [13, 18] ], // 周一
    3: [ [13, 16] ]           // 周三
  }

• hourClass: String | Object | Function

  代表小时的每一格的附加 class，支持 Vue 模板绑定能够识别的 class 格式。为 Function 时，传入的参数列表为 day, hour。

• disabledHour: Function

  判断该小时是否为禁用状态，传入的参数列表为 day, hour。

• shortcuts: Array

  快捷选择。格式和 selected 相同。

• shortcutsDisplay: String

  快捷选择的显示模式，默认 expanded，可选值 expanded / collapsed。

• statuses: Array

  日期单元格的状态，用来在图例中显示。数组项格式为 { name, label }。会在图例上生成 veui-schedule-legend-${name} 这个 class。

Events

• select [v-model]

Slots

• header

  组件上方头部的区域。默认内容为快捷选择 + 图例。

• shortcuts

  快捷选择的内容。

• legend

  图例内容。

Scoped Slots

• hour

  代表一小时的格子内容。参数为 { day, hour }。

• tooltip

  代表单元格浮层里的内容。参数为 { day, hour }。

• label

  选择时段后显示的文字标签。参数为 { day, from, to }。