| title | 从 1.x 迁移 |
|---|
- 全新的金融视觉规范,组件设计更加美观大气,品牌色由
#FC9153改为#2F86F6 - 支持服务端渲染
- 新增CellItem组件,用于承载功能入口、功能操作、信息展示等功能
- 新增DetailItem组件,用于展示一些列表信息
- 新增Bill组件,用于展示电子账单或票据
- 新增Progress组件,用于进度可视化
- 新增Slider组件
- 新增Transition组件,将组件库内用到的动画封装和复用
- 新增WaterMask组件,作为自带水印背景的容器
- 新增字体图标54个
-
不兼容改动
⚠️ 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
- 🔅
- 新增功能
- 🔅 新增方法
resetcount,用于重置倒计时
- 🔅 新增方法
-
新增功能
- 🔅 属性
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,CheckBox,CheckGroup,CheckList
-
不兼容改动
⚠️ 不再支持12小时制,属性half-day-text、is-twelve-hours被移除(为满足min-date和max-date可控制到时分)
-
新增功能
- 🔅 新增属性
describe,用于设置选择器描述
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
icon-svg,用于使用SVG类型图标,默认为false - 🔅 新增属性
layout,用于设置按钮排列方式,默认为row
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
brief,用于副标题描述 - 🔅 新增属性
plain,用于镂空样式 - 🔅 新增属性
disabled,用于禁用区域 - 🔅 新增插槽
header,action,footer
- 🔅 新增属性
-
不兼容改动
⚠️ 属性customized被移出⚠️ 属性align被移出⚠️ 属性value被移出
-
新增功能
- 🔅 新增属性
addon,用于显示附加内容 - 🔅 新增插槽
children
- 🔅 新增属性
-
不兼容改动
⚠️ 默认使用字体图标,如需使用SVG类型图标,将svg置为true⚠️ 原内置SVG类型图标除spinner外其他移除(内置图标中SVG类型的仅包含具有固定颜色的图标,其他采用字体图标)
-
新增功能
- 🔅 新增54个内置字体图标
- 🔅 新增
svg属性,用于SVG类型图标 - 🔅 SVG类型图标新增
success-color,warn-color
-
不兼容改动
⚠️ 属性is-highlight,用于表单获得焦点时高亮底部边框
-
新增功能
- 🔅 新增属性
brief,用于描述 - 🔅 新增插槽
brief,error
- 🔅 新增属性
-
不兼容改动
⚠️ 属性scroll被移除
-
新增功能
- 🔅 新增属性
full-screen,用于全屏展示,默认为false - 🔅 新增事件
show、hide
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
mode,用于设置通知栏模式 - 🔅 新增属性
type,用于设置通知栏主题,可选default(蓝色)、activity(黄色)、warning(红色),默认为default - 🔅 新增属性
round,用于通知栏圆角展示,默认为false - 🔅 新增属性
multi-rows,用于通知栏多行展示,默认为false - 🔅 新增属性
scrollable,用于通知栏滚动展示,默认为false - 🔅 新增属性
icon-svg,用于通知栏使用svg图标,默认为false - 🔅 新增插槽
left和right,用于自定义左右内容 - 🔅 新增事件
close,通告栏被关闭时触发
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
text-render,用于自定义指定按键的值
- 🔅 新增属性
-
不兼容改动
⚠️ 属性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和RadioList
-
新增功能
- 🔅 新增属性
icon-disabled,用于设置禁用项图标,默认为check-disabled - 🔅 新增属性
icon-svg,用于使用SVG类型图标,默认为false
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
manual-init,用于设置手动初始化滚动区域 - 🔅 新增方法
init,用于手动初始化滚动区域
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
describe,用于设置选择器描述 - 🔅 新增属性
min-height,用于设置选择器最小高度
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
direction,用于设置步骤条展示方向,默认为horizontal - 🔅 新增属性
transition,用于进度变化动效
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
transition-duration
- 🔅 新增属性
-
不兼容改动
⚠️ 属性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>
- 🔅 新增属性
-
不兼容改动
⚠️ 属性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和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>
⚠️ Tabs原属性全部移除⚠️ 方法selectTab被移除,可直接使用v-model⚠️ 事件change(index, prevIndex)改为change(tab)
-
新增功能
- 🔅 新增属性
v-model,用于双向绑定的标签对象name - 🔅 新增属性
immediate, 用于初始化完成后立刻触发一次change事件 - 🔅 新增子组件
TabPane
- 🔅 新增属性
- 新增功能
- 🔅 属性
shape可选值新增quarter,coupon
- 🔅 属性
- 新增功能
- 🔅 新增属性
name,用于特殊类名 - 🔅 新增属性
icon、icon-svg,用于添加左侧图标 - 🔅 新增属性
fill,用于控制提示条充满子元素 - 🔅 新增属性
offset,用于设置提示条偏移量
- 🔅 新增属性
- 新增功能
- 🔅 新增属性
icon-svg,用于使用svg图标,默认为false
- 🔅 新增属性