从 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，用于各个场景自定义头部底部内容

  1.   <div slot-scope="{ scene }" slot="header">
  2.     <md-notice-bar
  3.       v-if="scene === 'choose'"
  4.       mode="closable"
  5.       icon="warn"
  6.       type="warning"
  7.     ></md-notice-bar>
  8.   </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内容:

  1. <md-tabbar>
  2. <template slot="item" slot-scope="{ item, currentName, index, items }">
  3. <!-- content -->
  4. </template>
  5. </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获取所有面板选中的对象
  • 级联数据源数据格式
  1. {
  2.   // 唯一键名
  3.   name: '',
  4.   // 面板标签
  5.   label: '',
  6.   // 选项列表
  7.   options: [
  8.     {
  9.       // 选项值
  10.       value: "",
  11.       // 选项标签
  12.       label: "",
  13.       // 级联子面板
  14.       children: {
  15.         name: '',
  16.         label: '',
  17.         options: [
  18.           // ...
  19.         ]
  20.       }
  21.     }
  22.   ]
  23. }

Tabs

  • 不兼容改动

    • ⚠️ 组件拆分为Tabs和TabPane:
  1. <md-tabs>
  2. <md-tab-pane class="content" name="p1" label="第一章">
  3. 她对他很满意。走吧。好。他起身买单，腿却一拐一拐的。难怪他才华横溢，事业有成，却还是单身。趁着他买单，她赶紧悄悄走了。
  4. </md-tab-pane>
  5. <md-tab-pane class="content" name="p2" label="第二章">
  6. 又是一年，她又遇到了他，他正牵着孩子的手，走的飞快。
  7. </md-tab-pane>
  8. <md-tab-pane class="content" name="p3" label="第三章" disabled>
  9. 你的腿？她有些诧异。腿？我的腿怎么了？他更诧异。后来，她才知道他的腿，那天只是坐麻了而已。
  10. </md-tab-pane>
  11. </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