从 1.x 迁移

主要变化

• 全新的金融视觉规范，组件设计更加美观大气，品牌色由#FC9153改为#2F86F6
• 支持服务端渲染
• 新增CellItem组件，用于承载功能入口、功能操作、信息展示等功能
• 新增DetailItem组件，用于展示一些列表信息
• 新增Bill组件，用于展示电子账单或票据
• 新增Progress组件，用于进度可视化
• 新增Slider组件
• 新增Transition组件，将组件库内用到的动画封装和复用
• 新增WaterMask组件，作为自带水印背景的容器
• 新增字体图标54个

组件改动

Button

• 不兼容改动

  • ⚠️ type属性可选值ghost, ghost-primary被移除
  • ⚠️ disabled属性被移除

• 新增功能

  • ? type属性可选值新增default, warning, disabled
  • ? 新增属性native-type，用于更改原生Tag，默认值为button
  • ? 新增属性plain，用于展示朴素类型按钮，默认为false
  • ? 新增属性round，用于展示圆角按钮，默认为false
  • ? 新增属性inline，用于行内按钮，默认为false
  • ? 新增属性icon-svg，用于按钮使用SVG类型图标，默认为false
  • ? 新增属性inactive，用于展示按钮未激活状态，默认为false

Captcha

• 新增功能
  • ? 新增方法resetcount，用于重置倒计时

Cashier

• 新增功能

  • ? 属性channels数组元素增加字段iconSvg、action，可用于使用SVG类型图标和为支付渠道增加特殊操作动作，如“更换银行卡”

  • ? 新增属性pay-button-disabled，用于禁用支付按钮

  • ? 场景captcha配置，新字段brief，用于发送验证码简要描述

  • ? 新增scoped插槽header、footer，用于各个场景自定义头部底部内容

  <div slot-scope="{ scene }" slot="header">
    <md-notice-bar
      v-if="scene === 'choose'"
      mode="closable"
      icon="warn"
      type="warning"
    ></md-notice-bar>
  </div>

• ? 新增scoped插槽channel，用于添加特殊支付渠道

• ? 新增scoped插槽payButton，用于自定义支付按钮内容

Check

• 不兼容改动
  • ⚠️ 组件拆分为Check，CheckBox，CheckGroup，CheckList

DatePicker

• 不兼容改动

  • ⚠️ 不再支持12小时制，属性half-day-text、is-twelve-hours被移除（为满足min-date和max-date可控制到时分）

• 新增功能

  • ? 新增属性describe，用于设置选择器描述

Dialog

• 新增功能
  • ? 新增属性icon-svg，用于使用SVG类型图标，默认为false
  • ? 新增属性layout，用于设置按钮排列方式，默认为row

Field

• 新增功能
  • ? 新增属性brief，用于副标题描述
  • ? 新增属性plain，用于镂空样式
  • ? 新增属性disabled，用于禁用区域
  • ? 新增插槽header, action, footer

FieldItem

• 不兼容改动

  • ⚠️ 属性customized被移出
  • ⚠️ 属性align被移出
  • ⚠️ 属性value被移出

• 新增功能

  • ? 新增属性addon，用于显示附加内容
  • ? 新增插槽children

Icon

• 不兼容改动

  • ⚠️ 默认使用字体图标，如需使用SVG类型图标，将svg置为true
  • ⚠️ 原内置SVG类型图标除spinner外其他移除（内置图标中SVG类型的仅包含具有固定颜色的图标，其他采用字体图标）

• 新增功能

  • ? 新增54个内置字体图标
  • ? 新增svg属性，用于SVG类型图标
  • ? SVG类型图标新增success-color, warn-color

InputItem

• 不兼容改动

  • ⚠️ 属性is-highlight，用于表单获得焦点时高亮底部边框

• 新增功能

  • ? 新增属性brief，用于描述
  • ? 新增插槽brief，error

Landscape

• 不兼容改动

  • ⚠️ 属性scroll被移除

• 新增功能

  • ? 新增属性full-screen，用于全屏展示，默认为false
  • ? 新增事件show、hide

NoticeBar

• 新增功能
  • ? 新增属性mode，用于设置通知栏模式
  • ? 新增属性type，用于设置通知栏主题，可选default(蓝色)、activity(黄色)、warning(红色)，默认为default
  • ? 新增属性round，用于通知栏圆角展示，默认为false
  • ? 新增属性multi-rows，用于通知栏多行展示，默认为false
  • ? 新增属性scrollable，用于通知栏滚动展示，默认为false
  • ? 新增属性icon-svg，用于通知栏使用svg图标，默认为false
  • ? 新增插槽left和right，用于自定义左右内容
  • ? 新增事件close，通告栏被关闭时触发

NumberKeyboard

• 新增功能
  • ? 新增属性text-render，用于自定义指定按键的值

Popup

• 不兼容改动

  • ⚠️ 属性prevent-scroll、prevent-scroll-exclude不建议再使用，可使用组件ScrollView

• 新增功能

  • ? 属性transition可选值增加为fade/fade-bounce/fade-slide/fade-zoom, slide-up/slide-down/slide-left/slide-right
  • ? 子组件PopupTitleBar新增属性describe用于简要描述

Radio

• 不兼容改动

  • ⚠️ 组件拆分为Radio和RadioList

• 新增功能

  • ? 新增属性icon-disabled，用于设置禁用项图标，默认为check-disabled
  • ? 新增属性icon-svg，用于使用SVG类型图标，默认为false

ScrollView

• 新增功能
  • ? 新增属性manual-init，用于设置手动初始化滚动区域
  • ? 新增方法init，用于手动初始化滚动区域

Selector

• 新增功能
  • ? 新增属性describe，用于设置选择器描述
  • ? 新增属性min-height，用于设置选择器最小高度

Steps

• 新增功能
  • ? 新增属性direction，用于设置步骤条展示方向，默认为horizontal
  • ? 新增属性transition，用于进度变化动效

Swiper

• 新增功能
  • ? 新增属性transition-duration

TabBar

• 不兼容改动

  • ⚠️ 属性titles改为items
  • ⚠️ 属性show-ink-bar改为has-ink
  • ⚠️ 属性ink-bar-length改为ink-length
  • ⚠️ 属性ink-bar-animate被移除
  • ⚠️ 属性default-index改为v-model
  • ⚠️ 方法selectTab被移除，可直接使用v-model
  • ⚠️ 事件indexChanged(index, prevIndex)改为change(item, index, prevIndex)

• 新增功能

  • ? 新增属性v-model，用于双向绑定的标签对象name

  • ? 新增方法reflow，用于重新计算样式布局

  • ? 新增scoped插槽，用于自定义tab内容:

<md-tabbar>
<template slot="item" slot-scope="{ item, currentName, index, items }">
<!-- content -->
</template>
</md-tabbar>

TabPicker

• 不兼容改动

  • ⚠️ 属性data-struct被移除
  • ⚠️ 属性default-index被移出
  • ⚠️ 属性option-render被移出
  • ⚠️ 属性async-func被移出
  • ⚠️ 属性ok-text被移出
  • ⚠️ 属性cancel-text被移出
  • ⚠️ 属性errorLabel被移出
  • ⚠️ 属性loadingLabel被移出
  • ⚠️ 属性data数据结构改动
  • ⚠️ 方法getSelectedItem被移出
  • ⚠️ 事件change返回数据格式改动
  • ⚠️ 事件confirm被移出

• 新增功能

  • ? 新增属性default-value
  • ? 新增属性describe副标题描述文本
  • ? 新增方法getSelectedValues获取所有面板选中的值
  • ? 新增方法getSelectedOptions获取所有面板选中的对象
• 级联数据源数据格式

{
  // 唯一键名
  name: '',
  // 面板标签
  label: '',
  // 选项列表
  options: [
    {
      // 选项值
      value: "",
      // 选项标签
      label: "",
      // 级联子面板
      children: {
        name: '',
        label: '',
        options: [
          // ...
        ]
      }
    }
  ]
}

Tabs

• 不兼容改动

  • ⚠️ 组件拆分为Tabs和TabPane:

<md-tabs>
<md-tab-pane class="content" name="p1" label="第一章">
她对他很满意。走吧。好。他起身买单，腿却一拐一拐的。难怪他才华横溢，事业有成，却还是单身。趁着他买单，她赶紧悄悄走了。
</md-tab-pane>
<md-tab-pane class="content" name="p2" label="第二章">
又是一年，她又遇到了他，他正牵着孩子的手，走的飞快。
</md-tab-pane>
<md-tab-pane class="content" name="p3" label="第三章" disabled>
你的腿？她有些诧异。腿？我的腿怎么了？他更诧异。后来，她才知道他的腿，那天只是坐麻了而已。
</md-tab-pane>
</md-tabs>

- ⚠️ <code>Tabs</code>原属性全部移除
- ⚠️ 方法<code>selectTab</code>被移除，可直接使用<code>v-model</code>
- ⚠️ 事件<code>change(index, prevIndex)</code>改为<code>change(tab)</code>

• 新增功能

  • ? 新增属性v-model，用于双向绑定的标签对象name
  • ? 新增属性immediate, 用于初始化完成后立刻触发一次change事件
  • ? 新增子组件TabPane

Tag

• 新增功能
  • ? 属性shape可选值新增quarter, coupon

Tip

• 新增功能
  • ? 新增属性name，用于特殊类名
  • ? 新增属性icon、icon-svg，用于添加左侧图标
  • ? 新增属性fill，用于控制提示条充满子元素
  • ? 新增属性offset，用于设置提示条偏移量

Toast

• 新增功能
  • ? 新增属性icon-svg，用于使用svg图标，默认为false