diff --git a/CHANGELOG.md b/CHANGELOG.md index 4edf0a843..e5d18a949 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,11 +3,29 @@ title: 更新日志 toc: hidden --- +### 2.6.0 + +`2022-08-26` + +- Design + - 🍭金融设计规范更新 + - 更新主题色，[详情](https://github.com/didi/mand-mobile/pull/755/files#diff-dafec5882d1f310bec1be2ca7fb586a99589509362a07d650e827813eee6136a) + - `Toast` 背景色由半透明改为不透明 + - `Button` 圆角由 `4px` 修改为 `16px` + - `Icon` 更新图标整体视觉效果 + +- Feature + - `Toast` + - 增加方形样式组件 + - `NumberKeyboard` + - 增加禁用键盘选项 + - 增加 `00` 按键选项 + ### 2.5.20 `2021-07-22` -- Feat +- Feature - 添加更多的国际化支持 ### 2.5.19 @@ -31,7 +49,7 @@ toc: hidden `2021-03-02` -- Feat +- Feature - 添加国际化支持 ### 2.5.16 @@ -52,7 +70,7 @@ toc: hidden `2021-01-15` -- Feat +- Feature - `Dialog`使用静态方法时支持传入`transition`[#716](https://github.com/didi/mand-mobile/issues/716) - Fix - 修复`Tip`组件子组件属性为空时导致报错 @@ -62,7 +80,7 @@ toc: hidden `2020-09-17` -- Feat +- Feature - `TextareaItem`支持格式化[#699](https://github.com/didi/mand-mobile/issues/699) - Fix @@ -97,7 +115,7 @@ toc: hidden `2020-03-26` -- Feat +- Feature - `CheckGroup`增加方法`toggleAll`用于全选/全不选和反选[#648](https://github.com/didi/mand-mobile/issues/648) - Fix @@ -107,7 +125,7 @@ toc: hidden `2020-02-04` -- Feat +- Feature - `Captcha`增加属性`auto-send`，用于控制验证码弹窗第一次展示时是否自动触发`send`事件 - `ResultPage`属性增加动态变更响应 @@ -123,7 +141,7 @@ toc: hidden `2019-12-26` -- Feat +- Feature - `Landscape`增加属性`transition`，用于自定义展示动效 - Fix @@ -150,7 +168,7 @@ toc: hidden `2019-11-02` -- Feat +- Feature - `ScrollView`增加方法`getOffsets`，用于获取当前滚动距离 - Fix @@ -163,7 +181,7 @@ toc: hidden `2019-10-11` -- Feat +- Feature - `TextareaItem`增加属性`clearable`[#589](https://github.com/didi/mand-mobile/issues/589) - Fix @@ -174,7 +192,7 @@ toc: hidden `2019-09-20` -- Feat +- Feature - `Picker`和`DatePicker`增加属性`keep-index`，用于设置当列数据发生变更时，保持上次停留位置 - Fix @@ -186,7 +204,7 @@ toc: hidden `2019-09-04` -- Feat +- Feature - 增加部分全局[reset样式](https://github.com/didi/mand-mobile/pull/539/files) - 新增组件`Skeleton` - 新增组件`TextareaItem` diff --git a/components/_style/mixin/theme.basic.styl b/components/_style/mixin/theme.basic.styl index 89732299f..01cade7b6 100644 --- a/components/_style/mixin/theme.basic.styl +++ b/components/_style/mixin/theme.basic.styl @@ -41,6 +41,7 @@ font-weight-semibold = 600 /// Radius Size radius-normal = 16px +radius-medium = 24px radius-circle = 50% /// Border Size diff --git a/components/_style/mixin/theme.components.styl b/components/_style/mixin/theme.components.styl index ca51278f2..030e0e869 100644 --- a/components/_style/mixin/theme.components.styl +++ b/components/_style/mixin/theme.components.styl @@ -214,7 +214,7 @@ icon-size-xs = 20px icon-size-sm = 24px icon-size-md = 32px icon-size-lg = 42px -icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.ttf") format("truetype") +icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile-iconfont.2.6.0.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile-iconfont.2.6.0.ttf") format("truetype") /// image-viewer image-viewer-index-font-size = 32px @@ -402,11 +402,10 @@ tip-shadow = 0 5px 20px rgba(0, 0, 0, .08) tip-zindex = 1303 /// toast -toast-fill = rgba(65, 72, 93, .77) +toast-fill = #4B5265 toast-font-size = font-body-large toast-color = #fff toast-radius = radius-normal -toast-padding = 20px 30px +toast-radius-medium = radius-medium +toast-padding = 20px 32px toast-zindex = 1700 - - diff --git a/components/_style/mixin/theme.variable.styl b/components/_style/mixin/theme.variable.styl index af3f8725a..f53869faf 100644 --- a/components/_style/mixin/theme.variable.styl +++ b/components/_style/mixin/theme.variable.styl @@ -35,6 +35,7 @@ font-weight-normal = var(--font-weight-normal) font-weight-medium = var(--font-weight-medium) font-weight-semibold = var(--font-weight-semibold) radius-normal = var(--radius-normal) +radius-medium = var(--radius-medium) radius-circle = var(--radius-circle) border-width-base = var(--border-width-base) h-gap-xs = var(--h-gap-xs) @@ -371,5 +372,6 @@ toast-fill = var(--toast-fill) toast-font-size = var(--toast-font-size) toast-color = var(--toast-color) toast-radius = var(--toast-radius) +toast-radius-medium = var(--toast-radius-medium) toast-padding = var(--toast-padding) toast-zindex = var(--toast-zindex) diff --git a/components/action-sheet/index.js b/components/action-sheet/index.js index 66baa03f9..dcd6ff686 100644 --- a/components/action-sheet/index.js +++ b/components/action-sheet/index.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import ActionSheet from './action-sheet.vue' +import ActionSheet from './action-sheet' const noop = function() {} diff --git a/components/agree/README.en-US.md b/components/agree/README.en-US.md index 89f84ee0b..74fee5907 100644 --- a/components/agree/README.en-US.md +++ b/components/agree/README.en-US.md @@ -24,7 +24,7 @@ Vue.component(Agree.name, Agree) | v-model | checked | Boolean | `false` |-| | disabled | - | Boolean | `false` |-| | size | size of icon | String | `md` | refer to `Icon` for optional values | - +| iconType | select Icon | String | `circle` | optional value `circle` or `square` | #### Agree Instance Events ##### @change(name, checked) diff --git a/components/agree/README.md b/components/agree/README.md index 54748d666..a97bcd5d8 100644 --- a/components/agree/README.md +++ b/components/agree/README.md @@ -24,6 +24,7 @@ Vue.component(Agree.name, Agree) |v-model|是否选中|Boolean|`false`|-| |disabled|是否禁用|Boolean|`false`|-| |size|按钮大小|String|`md`|可选值参考组件`Icon`| +|iconType|选中图标|string|`circle`|可选值`circle` ｜ `square`| #### Agree Events diff --git a/components/agree/demo/cases/demo0.vue b/components/agree/demo/cases/demo0.vue index fdeae38b6..477d9094e 100644 --- a/components/agree/demo/cases/demo0.vue +++ b/components/agree/demo/cases/demo0.vue @@ -4,6 +4,7 @@ v-model="agreeConf.checked" :disabled="agreeConf.disabled" :size="agreeConf.size" + icon-type="square" @change="onChange(agreeConf.name, agreeConf.checked, $event)" > 本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意《投保须知》, 《保险条款》 diff --git a/components/agree/index.vue b/components/agree/index.vue index 13dee4fdf..bfad5ec2b 100644 --- a/components/agree/index.vue +++ b/components/agree/index.vue @@ -12,8 +12,14 @@ @click="$_onChange($event)">
- - + + + + + + + +
@@ -44,6 +50,10 @@ export default { type: String, default: 'md', }, + iconType: { + type: String, + default: 'circle', + }, }, data() { @@ -89,20 +99,20 @@ export default { height auto line-height 1 will-change auto - &.md-icon-checked + &.md-icon-checked,&.md-icon-square-checked position absolute top 0 left 0 transform scale(0.6) color transparent transition all .3s ease-in-out-quint - &.md-icon-check + &.md-icon-check,&.md-icon-square-check color agree-fill &.checked .md-agree-icon-container - .md-icon-checked + .md-icon-checked,.md-icon-square-checked transform scale(1) color agree-fill - .md-icon-check + .md-icon-check,.md-icon-square-check opacity 0.8 .md-agree-content diff --git a/components/agree/test/__snapshots__/demo.spec.js.snap b/components/agree/test/__snapshots__/demo.spec.js.snap index 21f0b3ff4..1954bd2e8 100644 --- a/components/agree/test/__snapshots__/demo.spec.js.snap +++ b/components/agree/test/__snapshots__/demo.spec.js.snap @@ -4,7 +4,7 @@ exports[`Agree - Demo Disabled selected 1`] = `
-
+
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意 @@ -17,7 +17,7 @@ exports[`Agree - Demo Disabled unselected 1`] = `
-
+
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意 @@ -30,7 +30,7 @@ exports[`Agree - Demo Selected 1`] = `
-
+
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意《投保须知》, 《保险条款》
@@ -42,7 +42,7 @@ exports[`Agree - Demo Unselected 1`] = `
-
+
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意 diff --git a/components/date-picker/test/__snapshots__/demo.spec.js.snap b/components/date-picker/test/__snapshots__/demo.spec.js.snap index ea7119010..ee73b2c19 100644 --- a/components/date-picker/test/__snapshots__/demo.spec.js.snap +++ b/components/date-picker/test/__snapshots__/demo.spec.js.snap @@ -224,6 +224,7 @@ exports[`DatePicker - Demo Date & Time selection 1`] = `
  • 2039年
  • 2040年
  • 2041年
    • +
  • 2042年
    • diff --git a/components/dialog/index.js b/components/dialog/index.js index 7ae8e91f5..aa530151e 100644 --- a/components/dialog/index.js +++ b/components/dialog/index.js @@ -1,6 +1,6 @@ import Vue from 'vue' import {t} from '../_locale' -import Dialog from './dialog.vue' +import Dialog from './dialog' /* istanbul ignore next */ const noop = function() {} diff --git a/components/icon/demo/cases/demo0.vue b/components/icon/demo/cases/demo0.vue index 49c31d783..1c0b7dac3 100644 --- a/components/icon/demo/cases/demo0.vue +++ b/components/icon/demo/cases/demo0.vue @@ -30,6 +30,8 @@ export default { data() { return { iconList: [ + 'square-checked', + 'square-check', 'rectangle', 'right', 'wrong', diff --git a/components/icon/iconfont.ttf b/components/icon/iconfont.ttf old mode 100755 new mode 100644 index 02712ffe0..90b181fd8 Binary files a/components/icon/iconfont.ttf and b/components/icon/iconfont.ttf differ diff --git a/components/icon/iconfont.woff b/components/icon/iconfont.woff old mode 100755 new mode 100644 index 8c39bda90..bba9881f8 Binary files a/components/icon/iconfont.woff and b/components/icon/iconfont.woff differ diff --git a/components/icon/index.vue b/components/icon/index.vue index 7ac0a5ec6..17d9c7ae8 100644 --- a/components/icon/index.vue +++ b/components/icon/index.vue @@ -219,7 +219,10 @@ export default { content "\e634" .md-icon-close:before content "\e68c" - +.md-icon-square-check:before + content "\e695" +.md-icon-square-checked:before + content "\e696" @font-face font-family Mand-Mobile-Icon font-style normal diff --git a/components/icon/selection.json b/components/icon/selection.json index dd95a1893..a0d00c2b4 100755 --- a/components/icon/selection.json +++ b/components/icon/selection.json @@ -1556,6 +1556,34 @@ "setIdx": 0, "setId": 4, "iconIdx": 53 + }, + { + "icon": { + "paths": [ + "M854.624 214.624l-45.248-45.248-297.376 297.376-297.376-297.376-45.248 45.248 297.376 297.376-297.376 297.376 45.248 45.248 297.376-297.376 297.376 297.376 45.248-45.248-297.376-297.376z" + ], + "isMulticolor": false, + "isMulticolor2": false, + "tags": ["square-checked"], + "defaultCode": 59030, + "grid": 16, + "attrs": [], + "colorPermutations": { + "21822122812552552551": [], + "25525525516572931": [] + } + }, + "properties": { + "id": 4, + "order": 120, + "ligatures": "square-checked", + "prevSize": 32, + "code": 59030, + "name": "square-checked" + }, + "setIdx": 0, + "setId": 4, + "iconIdx": 54 } ], "height": 1024, diff --git a/components/number-keyboard/README.en-US.md b/components/number-keyboard/README.en-US.md index 511389443..d453bd52f 100644 --- a/components/number-keyboard/README.en-US.md +++ b/components/number-keyboard/README.en-US.md @@ -28,6 +28,8 @@ Vue.component(NumberKeyboard.name, NumberKeyboard) |is-hide-confirm|automatically hide the keyboard when confirming|Boolean|`true`| -| |text-render|customize value of specified key|Function(value: string): string|-|replaceable key `0,1,...9,.`| |ok-text|text of confirmation key|String|`confirm`|-| +|disabled 2.6.0+|to disable the keyboard|Boolean|`false`|-| +|duplicate-zero 2.6.0+|show `00` key|Boolean|`false`|This props is valid only when `type` is `professional` | #### NumberKeyboard Slots diff --git a/components/number-keyboard/README.md b/components/number-keyboard/README.md index 26aeb95e6..ca1517686 100644 --- a/components/number-keyboard/README.md +++ b/components/number-keyboard/README.md @@ -28,6 +28,8 @@ Vue.component(NumberKeyboard.name, NumberKeyboard) |is-hide-confirm|确认时自动隐藏键盘|Boolean|`true`| -| |text-render|自定义指定按键的值|Function(value: string): string|-|可替换键`0,1,...9,.`| |ok-text|键盘确认键文案|String|`确认`|-| +|disabled 2.6.0+|禁用键盘|Boolean|`false`|-| +|duplicate-zero 2.6.0+|展示 `00` 按键|Boolean|`false`|仅 `type` 为 `professional`模式下生效| #### NumberKeyboard Slots diff --git a/components/number-keyboard/demo/cases/demo0.vue b/components/number-keyboard/demo/cases/demo0.vue index d2b421f8c..66f8925f4 100644 --- a/components/number-keyboard/demo/cases/demo0.vue +++ b/components/number-keyboard/demo/cases/demo0.vue @@ -22,6 +22,22 @@ @enter="onNumberEnter" @delete="onNumberDelete" > + + {{ isKeyBoardShow[3] ? '收起键盘' : '唤起键盘，00 按键' }} + + + {{ isKeyBoardShow[4] ? '收起键盘' : '唤起键盘，禁用键盘' }} +
    diff --git a/components/number-keyboard/demo/cases/demo4.vue b/components/number-keyboard/demo/cases/demo4.vue new file mode 100644 index 000000000..88d5d13c9 --- /dev/null +++ b/components/number-keyboard/demo/cases/demo4.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/components/number-keyboard/demo/index.vue b/components/number-keyboard/demo/index.vue index 8ca741efa..e625a34ae 100644 --- a/components/number-keyboard/demo/index.vue +++ b/components/number-keyboard/demo/index.vue @@ -15,5 +15,6 @@ import Demo0 from './cases/demo0' import Demo1 from './cases/demo1' import Demo2 from './cases/demo2' import Demo3 from './cases/demo3' -export default {...createDemoModule('number-keyboard', [Demo0, Demo1, Demo2, Demo3])} +import Demo4 from './cases/demo4' +export default {...createDemoModule('number-keyboard', [Demo0, Demo1, Demo2, Demo3, Demo4])} diff --git a/components/number-keyboard/index.vue b/components/number-keyboard/index.vue index 7354d4b42..01326ece3 100644 --- a/components/number-keyboard/index.vue +++ b/components/number-keyboard/index.vue @@ -13,6 +13,7 @@ :hide-dot="hideDot" :text-render="textRender" :disabled="disabled" + :duplicate-zero="duplicateZero" @enter="$_onEnter" @delete="$_onDelete" @confirm="$_onConfirm" @@ -39,6 +40,7 @@ :is-view="isView" :hide-dot="hideDot" :text-render="textRender" + :duplicate-zero="duplicateZero" :disabled="disabled" @enter="$_onEnter" @delete="$_onDelete" @@ -95,6 +97,10 @@ export default { textRender: { type: Function, }, + duplicateZero: { + type: Boolean, + default: false, + }, }, data() { diff --git a/components/tab-bar/index.vue b/components/tab-bar/index.vue index 384f08d1a..1576c0439 100644 --- a/components/tab-bar/index.vue +++ b/components/tab-bar/index.vue @@ -17,7 +17,8 @@ class="md-tab-bar-item" :class="{ 'is-active': currentName === item.name, - 'is-disabled': !!item.disabled + 'is-disabled': !!item.disabled, + 'more-than-five': items.length > 5 && index === 0 }" v-for="(item, index) in items" :key="item.name" @@ -294,7 +295,9 @@ export default { color tab-active-color &.is-disabled color tab-disabled-color - +.more-than-five + padding 0 + margin-right tab-item-gap .md-tab-bar-ink position absolute bottom 10px diff --git a/components/tab-bar/test/__snapshots__/demo.spec.js.snap b/components/tab-bar/test/__snapshots__/demo.spec.js.snap index 30dc4c5dd..d55846059 100644 --- a/components/tab-bar/test/__snapshots__/demo.spec.js.snap +++ b/components/tab-bar/test/__snapshots__/demo.spec.js.snap @@ -86,7 +86,7 @@ exports[`TabBar - Demo Scroll 1`] = `
    -
    精选全部满减券立减券免息券校园专享夜间优惠红包
    +
    精选全部满减券立减券免息券校园专享夜间优惠红包
    diff --git a/components/tip/index.js b/components/tip/index.js index 340bc445f..f81148b1d 100644 --- a/components/tip/index.js +++ b/components/tip/index.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import TipOptions from './tip.vue' +import TipOptions from './tip' import {randomId} from '../_util' const Tip = Vue.extend(TipOptions) diff --git a/components/toast/README.en-US.md b/components/toast/README.en-US.md index 7fe7575e9..1f762a0d4 100644 --- a/components/toast/README.en-US.md +++ b/components/toast/README.en-US.md @@ -22,7 +22,7 @@ this.$toast.info('hint') // Totally Import #### Toast Static Methods -##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode}) +##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode, square}) Dynamically create a toast | Props | Description | Type | Default | Note | @@ -34,8 +34,9 @@ Dynamically create a toast | position | display position | String | `center` | `top/center/bottom` | | hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - | | parentNode | portal node of toast | HTMLElement | `document.body`| - | +| square 2.6.0+ | use square style | Boolean | `false`|-| -##### Toast.info(content, duration, hasMask, parentNode) +##### Toast.info(content, duration, hasMask, parentNode, square) Dynamically create a text toast | Props | Description | Type | Default | Note | @@ -44,8 +45,9 @@ Dynamically create a text toast | duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - | | hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - | | parentNode | portal node of toast | HTMLElement | `document.body`| - | +| square 2.6.0+ | use square style | Boolean | `false`|-| -##### Toast.succeed(content, duration, hasMask, parentNode) +##### Toast.succeed(content, duration, hasMask, parentNode, square) Dynamically create a success toast | Props | Description | Type | Default | Note | @@ -54,8 +56,9 @@ Dynamically create a success toast | duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - | | hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - | | parentNode | portal node of toast | HTMLElement | `document.body`| - | +| square 2.6.0+ | use square style | Boolean | `false`|-| -##### Toast.failed(content, duration, hasMask, parentNode) +##### Toast.failed(content, duration, hasMask, parentNode, square) Dynamically create a failed toast | Props | Description | Type | Default | Note | @@ -64,8 +67,9 @@ Dynamically create a failed toast | duration |toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - | | hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - | | parentNode | portal node of toast | HTMLElement | `document.body`| - | +| square 2.6.0+ | use square style | Boolean | `false`|-| -##### Toast.loading(content, duration, hasMask, parentNode) +##### Toast.loading(content, duration, hasMask, parentNode, square) Dynamically create a loading toast | Props | Description | Type | Default | Note | @@ -74,13 +78,12 @@ Dynamically create a loading toast | duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `0` | - | | hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - | | parentNode | portal node of toast | HTMLElement | `document.body`| - | +| square 2.6.0+ | use square style | Boolean | `false`|-| ##### Toast.hide() Hide current toast -#### Toast.component Props - -2.3.0+ +#### Toast Props 2.3.0+ | Props | Description | Type | Default | Note | |----|-----|------|------|------| @@ -90,16 +93,17 @@ Hide current toast | duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - | | position | display position | String | `center` | `top/center/bottom` | | hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - | +| square 2.6.0+ | use square style | Boolean | `false`|-| +#### Toast Slots +#### default ```html loading... ``` -#### Toast.component Methods - -2.3.0+ +#### Toast Methods 2.3.0+ ##### show() Show toast @@ -107,12 +111,10 @@ Show toast ##### hide() Hide toast -#### Toast.component Events - -2.3.0+ +#### Toast Events 2.3.0+ ##### @show() Toast show event ##### @hide() -Toast hidden event \ No newline at end of file +Toast hidden event diff --git a/components/toast/README.md b/components/toast/README.md index 8e33c3342..afb61c806 100644 --- a/components/toast/README.md +++ b/components/toast/README.md @@ -24,7 +24,7 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入 #### Toast Static Methods -##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode}) +##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode, square}) 显示自定义提示 |属性 | 说明 | 类型 | 默认值|备注| @@ -36,53 +36,56 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入 | position | 展示位置 | String | `center` | `top/center/bottom` | | hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - | | parentNode | 组件挂载节点 | HTMLElement | `document.body`|- | +| square 2.6.0+ | 使用方形样式 | Boolean | `false`|-| -##### Toast.info(content, duration, hasMask, parentNode) +##### Toast.info(content, duration, hasMask, parentNode, square) 显示纯文本提示 -|属性 | 说明 | 类型 | 默认值| -|----|-----|------|------| -| content | 提示内容文本 | String | - | -| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | -| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | -| parentNode | 组件挂载节点 | HTMLElement | `document.body` | +|属性 | 说明 | 类型 | 默认值|备注| +|----|-----|------|------|------| +| content | 提示内容文本 | String | - | - | +| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - | +| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - | +| parentNode | 组件挂载节点 | HTMLElement | `document.body` | - | +| square 2.6.0+ | 使用方形样式 | Boolean | `false`|-| -##### Toast.succeed(content, duration, hasMask, parentNode) +##### Toast.succeed(content, duration, hasMask, parentNode, square) 显示成功提示 -|属性 | 说明 | 类型 | 默认值| -|----|-----|------|------| -| content | 提示内容文本 | String | - | -| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | -| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | -| parentNode | 组件挂载节点 | HTMLElement | `document.body` | +|属性 | 说明 | 类型 | 默认值|备注| +|----|-----|------|------|------| +| content | 提示内容文本 | String | - | - | +| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - | +| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - | +| parentNode | 组件挂载节点 | HTMLElement | `document.body` | - | +| square 2.6.0+ | 使用方形样式 | Boolean | `false`|-| -##### Toast.failed(content, duration, hasMask, parentNode) +##### Toast.failed(content, duration, hasMask, parentNode, square) 显示失败提示 -|属性 | 说明 | 类型 | 默认值| -|----|-----|------|------| -| content | 提示内容文本 | String | - | -| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | -| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | -| parentNode | 组件挂载节点 | HTMLElement | `document.body`| +|属性 | 说明 | 类型 | 默认值|备注| +|----|-----|------|------|------| +| content | 提示内容文本 | String | - | - | +| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - | +| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - | +| parentNode | 组件挂载节点 | HTMLElement | `document.body`| - | +| square 2.6.0+ | 使用方形样式 | Boolean | `false`|-| -##### Toast.loading(content, duration, hasMask, parentNode) +##### Toast.loading(content, duration, hasMask, parentNode, square) 显示载入提示 -|属性 | 说明 | 类型 | 默认值| -|----|-----|------|------| -| content | 提示内容文本 | String, Number | - | -| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `0` | -| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `true` | -| parentNode | 组件挂载节点 | HTMLElement | `document.body`| +|属性 | 说明 | 类型 | 默认值|备注| +|----|-----|------|------|------| +| content | 提示内容文本 | String, Number | - | - | +| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `0` | - | +| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `true` | - | +| parentNode | 组件挂载节点 | HTMLElement | `document.body`| - | +| square 2.6.0+ | 使用方形样式 | Boolean | `false`|-| ##### Toast.hide() 隐藏提示 -#### Toast.component Props - -2.3.0+ +#### Toast Props 2.3.0+ |属性 | 说明 | 类型 | 默认值|备注| |----|-----|------|------|------| @@ -92,16 +95,17 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入 | duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - | | position | 展示位置 | String | `center` | `top/center/bottom` | | hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - | +| square 2.6.0+ | 使用方形样式 | Boolean | `false`|-| +#### Toast Slots +#### default ```html loading... ``` -#### Toast.component Methods - -2.3.0+ +#### Toast Methods 2.3.0+ ##### show() 展示提示 @@ -109,12 +113,10 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入 ##### hide() 隐藏提示 -#### Toast.component Events - -2.3.0+ +#### Toast Events 2.3.0+ ##### @show() 提示展示事件 ##### @hide() -提示隐藏事件 \ No newline at end of file +提示隐藏事件 diff --git a/components/toast/demo/cases/demo9.vue b/components/toast/demo/cases/demo9.vue new file mode 100644 index 000000000..bfb93d6a0 --- /dev/null +++ b/components/toast/demo/cases/demo9.vue @@ -0,0 +1,39 @@ + + + diff --git a/components/toast/demo/index.vue b/components/toast/demo/index.vue index cbecc51d2..9689c66d2 100644 --- a/components/toast/demo/index.vue +++ b/components/toast/demo/index.vue @@ -20,6 +20,7 @@ import Demo5 from './cases/demo5' import Demo6 from './cases/demo6' import Demo7 from './cases/demo7' import Demo8 from './cases/demo8' +import Demo9 from './cases/demo9' -export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8])} +export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8, Demo9])} diff --git a/components/toast/index.js b/components/toast/index.js index 77806bb3b..b841b072c 100644 --- a/components/toast/index.js +++ b/components/toast/index.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import ToastOptions from './toast.vue' +import ToastOptions from './toast' /** * Toast factory diff --git a/components/toast/toast.vue b/components/toast/toast.vue index 493d19186..013fa40ff 100644 --- a/components/toast/toast.vue +++ b/components/toast/toast.vue @@ -109,7 +109,7 @@ export default { flex-shrink 0 color toast-color .md-icon + .md-toast-text - margin-left h-gap-xs + margin-left h-gap-sm .md-popup .md-popup-box width 540px @@ -144,20 +144,28 @@ export default { background-color toast-fill box-sizing border-box overflow hidden + .md-toast-text + white-space nowrap + text-overflow: ellipsis + overflow hidden &.square display flex flex-direction column - width 300px - height 240px - padding 56px 60px + width 240px + min-height 232px + padding 54px 36px 48px 36px + border-radius toast-radius-medium + .md-toast-text + margin-left 0 + line-height 40px + word-break break-all + white-space normal + display -webkit-box + -webkit-box-orient vertical + -webkit-line-clamp 2 .md-icon margin-bottom 32px - width 60px - height 60px - font-size 60px - -.md-toast-text - white-space nowrap - text-overflow: ellipsis - overflow hidden + width 58px + height 58px + font-size 58px diff --git a/package-lock.json b/package-lock.json index e8a5a9964..7fcca4838 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mand-mobile", - "version": "2.5.20", + "version": "2.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2322,6 +2322,7 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz", "integrity": "sha1-emNune1O/O+xnO9JR6PGffrukRs=", "dev": true, + "optional": true, "requires": { "hoek": "0.9.x" } @@ -7131,7 +7132,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7152,12 +7154,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7172,17 +7176,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7299,7 +7306,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7311,6 +7319,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7325,6 +7334,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7332,12 +7342,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7356,6 +7368,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7436,7 +7449,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7448,6 +7462,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7533,7 +7548,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7569,6 +7585,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7588,6 +7605,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7631,12 +7649,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -8710,7 +8730,8 @@ "version": "0.9.1", "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz", "integrity": "sha1-PTIkYrrfB3Fup+uFuviAec3c5QU=", - "dev": true + "dev": true, + "optional": true }, "home-or-tmp": { "version": "2.0.0", diff --git a/package.json b/package.json index 6a37b2a15..3b52febe8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mand-mobile", - "version": "2.6.0-beta.7", + "version": "2.6.0", "description": "A Vue.js 2.0 Mobile UI Toolkit", "homepage": "https://didi.github.io/mand-mobile", "main": "lib/mand-mobile.umd.js", @@ -224,5 +224,9 @@ "browserslist": [ "iOS >= 8", "Android > 4.0" - ] + ], + "engines": { + "node": ">=6 <13", + "npm": ">=3" + } } diff --git a/site/docs/design/preface/introduce.en-US.md b/site/docs/design/preface/introduce.en-US.md index b5c1fbab6..241db72a0 100644 --- a/site/docs/design/preface/introduce.en-US.md +++ b/site/docs/design/preface/introduce.en-US.md @@ -15,7 +15,7 @@ title: FD+ introduce We pursue minimalist and warm design, but we are more concerned about the value presentation of design in financial business, an important part of which is how to improve the efficiency of production collaboration. -With the expansion of Didi’s financial business line, the product lines are very different in form, with many branches and complex models. In the collaborative construction of design and R&D, sorting out and extracting stable and highly usable controls, components and pages has become a Our shared goal. We hope that through componentized solutions, standards can be quickly aligned, production costs can be reduced, and designers can better focus on the growth and innovative design experience beyond efficiency. +With the expansion of Didi’s financial business line, the product lines are very different in form, with many branches and complex models. In the collaborative construction of design and R&D, sorting out and extracting stable and highly reuse controls, components and pages has become a Our shared goal. We hope that through componentized solutions, standards can be quickly aligned, production costs can be reduced, and designers can better focus on the growth and innovative design experience beyond efficiency. 2021 Didi Financial Design Team Work ShowSee FD+ team diff --git a/site/docs/design/preface/introduce.md b/site/docs/design/preface/introduce.md index 5cb72359b..297e50949 100644 --- a/site/docs/design/preface/introduce.md +++ b/site/docs/design/preface/introduce.md @@ -15,7 +15,7 @@ title: FD+介绍 我们追求极简，有温度的设计，但我们更在意设计在金融业务中的价值呈现，其中重要的环节是如何提升生产协作效率。
    -随着滴滴金融业务线的扩展，产品线形态差别很大，分支较多且模式复杂，在设计与研发协同共建中，从中梳理并提取稳定且可以高服用的控件、组件、页面成为了我们共建的目标。我们希望通过组件化的解决方案，快速拉齐标准，降低生产成本，让设计师能更好的专注于效率之外的增长创新设计体验中。 +随着滴滴金融业务线的扩展，产品线形态差别很大，分支较多且模式复杂，在设计与研发协同共建中，从中梳理并提取稳定且可以高复用的控件、组件、页面成为了我们共建的目标。我们希望通过组件化的解决方案，快速拉齐标准，降低生产成本，让设计师能更好的专注于效率之外的增长创新设计体验中。 2021年滴滴金融设计团队Work Show点击查看 diff --git a/types/toast.d.ts b/types/toast.d.ts index 75325c185..c675bfab7 100644 --- a/types/toast.d.ts +++ b/types/toast.d.ts @@ -3,8 +3,9 @@ import { MandComponent } from './component' export type ToastOptions = { content: string duration?: number - parentNode?: Element, + parentNode?: Element hasMask?: boolean + square?: boolean } export type ToastConstructorOptions = { @@ -14,10 +15,10 @@ export type ToastConstructorOptions = { export interface Toast { (options?: ToastConstructorOptions): void - info(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void - succeed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void - failed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void - loading(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void + info(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void + succeed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void + failed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void + loading(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void hide(): void component: MandComponent }