• 主要变化
  • 组件改动
    • Button
    • Captcha
    • Cashier
    • Check
    • DatePicker
    • Dialog
    • Field
    • FieldItem
    • Icon
    • InputItem
    • Landscape
    • NoticeBar
    • NumberKeyboard
    • Popup
    • Radio
    • ScrollView
    • Selector
    • Steps
    • Swiper
    • TabBar
    • TabPicker
    • Tabs
    • Tag
    • Tip
    • Toast

    从 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数组元素增加字段iconSvgaction,可用于使用SVG类型图标和为支付渠道增加特殊操作动作,如“更换银行卡”

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

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

      • ? 新增scoped插槽headerfooter,用于各个场景自定义头部底部内容

    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

    • 不兼容改动
      • ⚠️ 组件拆分为CheckCheckBoxCheckGroupCheckList

    DatePicker

    • 不兼容改动

      • ⚠️ 不再支持12小时制,属性half-day-textis-twelve-hours被移除(为满足min-datemax-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,用于描述
      • ? 新增插槽brieferror

    Landscape

    • 不兼容改动

      • ⚠️ 属性scroll被移除
    • 新增功能

      • ? 新增属性full-screen,用于全屏展示,默认为false
      • ? 新增事件showhide

    NoticeBar

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

    NumberKeyboard

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

    Popup

    • 不兼容改动

      • ⚠️ 属性prevent-scrollprevent-scroll-exclude不建议再使用,可使用组件ScrollView
    • 新增功能

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

    Radio

    • 不兼容改动

      • ⚠️ 组件拆分为RadioRadioList
    • 新增功能

      • ? 新增属性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

    • 不兼容改动

      • ⚠️ 组件拆分为TabsTabPane:
    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,用于特殊类名
      • ? 新增属性iconicon-svg,用于添加左侧图标
      • ? 新增属性fill,用于控制提示条充满子元素
      • ? 新增属性offset,用于设置提示条偏移量

    Toast

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