Skip to content

Commit fea5f17

Browse files
qifeng0748qifeng0748
committedAug 26, 2022
Merge branch 'dev'
·
v2.7.0v2.6.0
2 parents da61c1c + d9e2643 commit fea5f17

37 files changed

+354
-125
lines changed
 

‎CHANGELOG.md

+29-11
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,29 @@ title: 更新日志
33
toc: hidden
44
---
55

6+
### 2.6.0
7+
8+
`2022-08-26`
9+
10+
- Design
11+
- 🍭金融设计规范更新
12+
- 更新主题色，[详情](https://github.com/didi/mand-mobile/pull/755/files#diff-dafec5882d1f310bec1be2ca7fb586a99589509362a07d650e827813eee6136a)
13+
- `Toast` 背景色由半透明改为不透明
14+
- `Button` 圆角由 `4px` 修改为 `16px`
15+
- `Icon` 更新图标整体视觉效果
16+
17+
- Feature
18+
- `Toast`
19+
- 增加方形样式组件
20+
- `NumberKeyboard`
21+
- 增加禁用键盘选项
22+
- 增加 `00` 按键选项
23+
624
### 2.5.20
725

826
`2021-07-22`
927

10-
- Feat
28+
- Feature
1129
- 添加更多的国际化支持
1230

1331
### 2.5.19
@@ -31,7 +49,7 @@ toc: hidden
3149

3250
`2021-03-02`
3351

34-
- Feat
52+
- Feature
3553
- 添加国际化支持
3654

3755
### 2.5.16
@@ -52,7 +70,7 @@ toc: hidden
5270

5371
`2021-01-15`
5472

55-
- Feat
73+
- Feature
5674
- `Dialog`使用静态方法时支持传入`transition`[#716](https://github.com/didi/mand-mobile/issues/716)
5775
- Fix
5876
- 修复`Tip`组件子组件属性为空时导致报错
@@ -62,7 +80,7 @@ toc: hidden
6280

6381
`2020-09-17`
6482

65-
- Feat
83+
- Feature
6684
- `TextareaItem`支持格式化[#699](https://github.com/didi/mand-mobile/issues/699)
6785

6886
- Fix
@@ -97,7 +115,7 @@ toc: hidden
97115

98116
`2020-03-26`
99117

100-
- Feat
118+
- Feature
101119
- `CheckGroup`增加方法`toggleAll`用于全选/全不选和反选[#648](https://github.com/didi/mand-mobile/issues/648)
102120

103121
- Fix
@@ -107,7 +125,7 @@ toc: hidden
107125

108126
`2020-02-04`
109127

110-
- Feat
128+
- Feature
111129
- `Captcha`增加属性`auto-send`，用于控制验证码弹窗第一次展示时是否自动触发`send`事件
112130
- `ResultPage`属性增加动态变更响应
113131

@@ -123,7 +141,7 @@ toc: hidden
123141

124142
`2019-12-26`
125143

126-
- Feat
144+
- Feature
127145
- `Landscape`增加属性`transition`，用于自定义展示动效
128146

129147
- Fix
@@ -150,7 +168,7 @@ toc: hidden
150168

151169
`2019-11-02`
152170

153-
- Feat
171+
- Feature
154172
- `ScrollView`增加方法`getOffsets`，用于获取当前滚动距离
155173

156174
- Fix
@@ -163,7 +181,7 @@ toc: hidden
163181

164182
`2019-10-11`
165183

166-
- Feat
184+
- Feature
167185
- `TextareaItem`增加属性`clearable`[#589](https://github.com/didi/mand-mobile/issues/589)
168186

169187
- Fix
@@ -174,7 +192,7 @@ toc: hidden
174192

175193
`2019-09-20`
176194

177-
- Feat
195+
- Feature
178196
- `Picker`和`DatePicker`增加属性`keep-index`，用于设置当列数据发生变更时，保持上次停留位置
179197

180198
- Fix
@@ -186,7 +204,7 @@ toc: hidden
186204

187205
`2019-09-04`
188206

189-
- Feat
207+
- Feature
190208
- 增加部分全局[reset样式](https://github.com/didi/mand-mobile/pull/539/files)
191209
- 新增组件`Skeleton`
192210
- 新增组件`TextareaItem`

‎components/_style/mixin/theme.basic.styl

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ font-weight-semibold = 600
4141

4242
/// Radius Size
4343
radius-normal = 16px
44+
radius-medium = 24px
4445
radius-circle = 50%
4546

4647
/// Border Size

‎components/_style/mixin/theme.components.styl

+4-5
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ icon-size-xs = 20px
214214
icon-size-sm = 24px
215215
icon-size-md = 32px
216216
icon-size-lg = 42px
217-
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")
217+
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")
218218

219219
/// image-viewer
220220
image-viewer-index-font-size = 32px
@@ -402,11 +402,10 @@ tip-shadow = 0 5px 20px rgba(0, 0, 0, .08)
402402
tip-zindex = 1303
403403

404404
/// toast
405-
toast-fill = rgba(65, 72, 93, .77)
405+
toast-fill = #4B5265
406406
toast-font-size = font-body-large
407407
toast-color = #fff
408408
toast-radius = radius-normal
409-
toast-padding = 20px 30px
409+
toast-radius-medium = radius-medium
410+
toast-padding = 20px 32px
410411
toast-zindex = 1700
411-
412-

‎components/_style/mixin/theme.variable.styl

+2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ font-weight-normal = var(--font-weight-normal)
3535
font-weight-medium = var(--font-weight-medium)
3636
font-weight-semibold = var(--font-weight-semibold)
3737
radius-normal = var(--radius-normal)
38+
radius-medium = var(--radius-medium)
3839
radius-circle = var(--radius-circle)
3940
border-width-base = var(--border-width-base)
4041
h-gap-xs = var(--h-gap-xs)
@@ -371,5 +372,6 @@ toast-fill = var(--toast-fill)
371372
toast-font-size = var(--toast-font-size)
372373
toast-color = var(--toast-color)
373374
toast-radius = var(--toast-radius)
375+
toast-radius-medium = var(--toast-radius-medium)
374376
toast-padding = var(--toast-padding)
375377
toast-zindex = var(--toast-zindex)

‎components/action-sheet/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import ActionSheet from './action-sheet.vue'
2+
import ActionSheet from './action-sheet'
33

44
const noop = function() {}
55

‎components/agree/README.en-US.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Vue.component(Agree.name, Agree)
2424
| v-model | checked | Boolean | `false` |-|
2525
| disabled | - | Boolean | `false` |-|
2626
| size | size of icon | String | `md` | refer to `Icon` for optional values |
27-
27+
| iconType | select Icon | String | `circle` | optional value `circle` or `square` |
2828
#### Agree Instance Events
2929

3030
##### @change(name, checked)

‎components/agree/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ Vue.component(Agree.name, Agree)
2424
|v-model|是否选中|Boolean|`false`|-|
2525
|disabled|是否禁用|Boolean|`false`|-|
2626
|size|按钮大小|String|`md`|可选值参考组件`Icon`|
27+
|iconType|选中图标|string|`circle`|可选值`circle` ｜ `square`|
2728

2829
#### Agree Events
2930

‎components/agree/demo/cases/demo0.vue

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
v-model="agreeConf.checked"
55
:disabled="agreeConf.disabled"
66
:size="agreeConf.size"
7+
icon-type="square"
78
@change="onChange(agreeConf.name, agreeConf.checked, $event)"
89
>
910
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意<a>《投保须知》</a>, <a>《保险条款》</a>

‎components/agree/index.vue

+16-6
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,14 @@
1212
@click="$_onChange($event)">
1313
<div class="md-agree-icon-container">
1414
<slot name="icon" :checked="value">
15-
<md-icon name="checked" :size="size"></md-icon>
16-
<md-icon name="check" :size="size"></md-icon>
15+
<span v-if="iconType === 'square'">
16+
<md-icon name="square-checked" :size="size"></md-icon>
17+
<md-icon name="square-check" :size="size"></md-icon>
18+
</span>
19+
<span v-else>
20+
<md-icon name="checked" :size="size"></md-icon>
21+
<md-icon name="check" :size="size"></md-icon>
22+
</span>
1723
</slot>
1824
</div>
1925
</div>
@@ -44,6 +50,10 @@ export default {
4450
type: String,
4551
default: 'md',
4652
},
53+
iconType: {
54+
type: String,
55+
default: 'circle',
56+
},
4757
},
4858
4959
data() {
@@ -89,20 +99,20 @@ export default {
8999
height auto
90100
line-height 1
91101
will-change auto
92-
&.md-icon-checked
102+
&.md-icon-checked,&.md-icon-square-checked
93103
position absolute
94104
top 0
95105
left 0
96106
transform scale(0.6)
97107
color transparent
98108
transition all .3s ease-in-out-quint
99-
&.md-icon-check
109+
&.md-icon-check,&.md-icon-square-check
100110
color agree-fill
101111
&.checked .md-agree-icon-container
102-
.md-icon-checked
112+
.md-icon-checked,.md-icon-square-checked
103113
transform scale(1)
104114
color agree-fill
105-
.md-icon-check
115+
.md-icon-check,.md-icon-square-check
106116
opacity 0.8
107117
108118
.md-agree-content

‎components/agree/test/__snapshots__/demo.spec.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`Agree - Demo Disabled selected 1`] = `
44
<div class="md-example-child md-example-child-agree md-example-child-2">
55
<div class="md-agree disabled">
66
<div class="md-agree-icon checked">
7-
<div class="md-agree-icon-container"><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
7+
<div class="md-agree-icon-container"><span><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></span></div>
88
</div>
99
<div class="md-agree-content">
1010
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
@@ -17,7 +17,7 @@ exports[`Agree - Demo Disabled unselected 1`] = `
1717
<div class="md-example-child md-example-child-agree md-example-child-3">
1818
<div class="md-agree disabled">
1919
<div class="md-agree-icon">
20-
<div class="md-agree-icon-container"><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
20+
<div class="md-agree-icon-container"><span><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></span></div>
2121
</div>
2222
<div class="md-agree-content">
2323
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
@@ -30,7 +30,7 @@ exports[`Agree - Demo Selected 1`] = `
3030
<div class="md-example-child md-example-child-agree md-example-child-0">
3131
<div class="md-agree">
3232
<div class="md-agree-icon checked">
33-
<div class="md-agree-icon-container"><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
33+
<div class="md-agree-icon-container"><span><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></span></div>
3434
</div>
3535
<div class="md-agree-content">
3636
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意<a>《投保须知》</a>, <a>《保险条款》</a></div>
@@ -42,7 +42,7 @@ exports[`Agree - Demo Unselected 1`] = `
4242
<div class="md-example-child md-example-child-agree md-example-child-1">
4343
<div class="md-agree">
4444
<div class="md-agree-icon">
45-
<div class="md-agree-icon-container"><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
45+
<div class="md-agree-icon-container"><span><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i> <i class="md-icon icon-font md-icon-check check md" style="color:;"></i></span></div>
4646
</div>
4747
<div class="md-agree-content">
4848
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意

‎components/date-picker/test/__snapshots__/demo.spec.js.snap

+1
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ exports[`DatePicker - Demo Date & Time selection 1`] = `
224224
<li class="column-item" style="height: 45px; line-height: 45px;">2039年</li>
225225
<li class="column-item" style="height: 45px; line-height: 45px;">2040年</li>
226226
<li class="column-item" style="height: 45px; line-height: 45px;">2041年</li>
227+
<li class="column-item" style="height: 45px; line-height: 45px;">2042年</li>
227228
</ul>
228229
</div>
229230
<div class="md-picker-column-item">

‎components/dialog/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import {t} from '../_locale'
3-
import Dialog from './dialog.vue'
3+
import Dialog from './dialog'
44

55
/* istanbul ignore next */
66
const noop = function() {}

‎components/icon/demo/cases/demo0.vue

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export default {
3030
data() {
3131
return {
3232
iconList: [
33+
'square-checked',
34+
'square-check',
3335
'rectangle',
3436
'right',
3537
'wrong',

‎components/icon/iconfont.ttf

100755100644
-156 Bytes
Binary file not shown.

‎components/icon/iconfont.woff

100755100644
-5.1 KB
Binary file not shown.

‎components/icon/index.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,10 @@ export default {
219219
content "\e634"
220220
.md-icon-close:before
221221
content "\e68c"
222-
222+
.md-icon-square-check:before
223+
content "\e695"
224+
.md-icon-square-checked:before
225+
content "\e696"
223226
@font-face
224227
font-family Mand-Mobile-Icon
225228
font-style normal

‎components/icon/selection.json

+28
Original file line numberDiff line numberDiff line change
@@ -1556,6 +1556,34 @@
15561556
"setIdx": 0,
15571557
"setId": 4,
15581558
"iconIdx": 53
1559+
},
1560+
{
1561+
"icon": {
1562+
"paths": [
1563+
"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"
1564+
],
1565+
"isMulticolor": false,
1566+
"isMulticolor2": false,
1567+
"tags": ["square-checked"],
1568+
"defaultCode": 59030,
1569+
"grid": 16,
1570+
"attrs": [],
1571+
"colorPermutations": {
1572+
"21822122812552552551": [],
1573+
"25525525516572931": []
1574+
}
1575+
},
1576+
"properties": {
1577+
"id": 4,
1578+
"order": 120,
1579+
"ligatures": "square-checked",
1580+
"prevSize": 32,
1581+
"code": 59030,
1582+
"name": "square-checked"
1583+
},
1584+
"setIdx": 0,
1585+
"setId": 4,
1586+
"iconIdx": 54
15591587
}
15601588
],
15611589
"height": 1024,

‎components/number-keyboard/README.en-US.md

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ Vue.component(NumberKeyboard.name, NumberKeyboard)
2828
|is-hide-confirm|automatically hide the keyboard when confirming|Boolean|`true`| -|
2929
|text-render|customize value of specified key|Function(value: string): string|-|replaceable key `0,1,...9,.`|
3030
|ok-text|text of confirmation key|String|`confirm`|-|
31+
|disabled <sup class="version-after">2.6.0+|to disable the keyboard|Boolean|`false`|-|
32+
|duplicate-zero <sup class="version-after">2.6.0+</sup>|show `00` key|Boolean|`false`|This props is valid only when `type` is `professional` |
3133

3234
#### NumberKeyboard Slots
3335

‎components/number-keyboard/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ Vue.component(NumberKeyboard.name, NumberKeyboard)
2828
|is-hide-confirm|确认时自动隐藏键盘|Boolean|`true`| -|
2929
|text-render|自定义指定按键的值|Function(value: string): string|-|可替换键`0,1,...9,.`|
3030
|ok-text|键盘确认键文案|String|`确认`|-|
31+
|disabled <sup class="version-after">2.6.0+</sup>|禁用键盘|Boolean|`false`|-|
32+
|duplicate-zero <sup class="version-after">2.6.0+</sup>|展示 `00` 按键|Boolean|`false`|仅 `type` 为 `professional`模式下生效|
3133

3234
#### NumberKeyboard Slots
3335

‎components/number-keyboard/demo/cases/demo0.vue

+16
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,22 @@
2222
@enter="onNumberEnter"
2323
@delete="onNumberDelete"
2424
></md-number-keyboard>
25+
26+
<md-button @click="toggleKeyboard(3)">{{ isKeyBoardShow[3] ? '收起键盘' : '唤起键盘，00 按键' }}</md-button>
27+
<md-number-keyboard
28+
v-model="isKeyBoardShow[3]"
29+
:duplicate-zero="true"
30+
@enter="onNumberEnter"
31+
@delete="onNumberDelete"
32+
></md-number-keyboard>
33+
34+
<md-button @click="toggleKeyboard(4)">{{ isKeyBoardShow[4] ? '收起键盘' : '唤起键盘，禁用键盘' }}</md-button>
35+
<md-number-keyboard
36+
v-model="isKeyBoardShow[4]"
37+
:disabled="true"
38+
@enter="onNumberEnter"
39+
@delete="onNumberDelete"
40+
></md-number-keyboard>
2541
<div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
2642
</div>
2743
</template>

‎components/number-keyboard/demo/cases/demo4.vue

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-1">
3+
<md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
4+
<md-number-keyboard
5+
v-model="isKeyBoardShow"
6+
disabled
7+
@enter="onNumberEnter"
8+
@delete="onNumberDelete"
9+
></md-number-keyboard>
10+
<div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
11+
</div>
12+
</template>
13+
14+
<script>import {NumberKeyboard, Button} from 'mand-mobile'
15+
16+
export default {
17+
name: 'number-keyboard-demo',
18+
/* DELETE */
19+
title: '禁用键盘',
20+
titleEnUS: 'Disable the keyboard',
21+
/* DELETE */
22+
components: {
23+
[Button.name]: Button,
24+
[NumberKeyboard.name]: NumberKeyboard,
25+
},
26+
data() {
27+
return {
28+
isKeyBoardShow: false,
29+
number: '',
30+
}
31+
},
32+
methods: {
33+
onNumberEnter(val) {
34+
this.number += val
35+
},
36+
onNumberDelete() {
37+
if (this.number === '') {
38+
return
39+
}
40+
this.number = this.number.substr(0, this.number.length - 1)
41+
},
42+
},
43+
}
44+
</script>
45+
46+
<style lang="stylus" scoped>
47+
.md-example-display
48+
position fixed
49+
top 30%
50+
left 50%
51+
z-index 9999
52+
transform translate(-50%, -50%)
53+
font-size 120px
54+
text-shadow 0 4px 20px #666
55+
</style>

‎components/number-keyboard/demo/index.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@ import Demo0 from './cases/demo0'
1515
import Demo1 from './cases/demo1'
1616
import Demo2 from './cases/demo2'
1717
import Demo3 from './cases/demo3'
18-
export default {...createDemoModule('number-keyboard', [Demo0, Demo1, Demo2, Demo3])}
18+
import Demo4 from './cases/demo4'
19+
export default {...createDemoModule('number-keyboard', [Demo0, Demo1, Demo2, Demo3, Demo4])}
1920
</script>

‎components/number-keyboard/index.vue

+6
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
:hide-dot="hideDot"
1414
:text-render="textRender"
1515
:disabled="disabled"
16+
:duplicate-zero="duplicateZero"
1617
@enter="$_onEnter"
1718
@delete="$_onDelete"
1819
@confirm="$_onConfirm"
@@ -39,6 +40,7 @@
3940
:is-view="isView"
4041
:hide-dot="hideDot"
4142
:text-render="textRender"
43+
:duplicate-zero="duplicateZero"
4244
:disabled="disabled"
4345
@enter="$_onEnter"
4446
@delete="$_onDelete"
@@ -95,6 +97,10 @@ export default {
9597
textRender: {
9698
type: Function,
9799
},
100+
duplicateZero: {
101+
type: Boolean,
102+
default: false,
103+
},
98104
},
99105
100106
data() {

‎components/tab-bar/index.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
class="md-tab-bar-item"
1818
:class="{
1919
'is-active': currentName === item.name,
20-
'is-disabled': !!item.disabled
20+
'is-disabled': !!item.disabled,
21+
'more-than-five': items.length > 5 && index === 0
2122
}"
2223
v-for="(item, index) in items"
2324
:key="item.name"
@@ -294,7 +295,9 @@ export default {
294295
color tab-active-color
295296
&.is-disabled
296297
color tab-disabled-color
297-
298+
.more-than-five
299+
padding 0
300+
margin-right tab-item-gap
298301
.md-tab-bar-ink
299302
position absolute
300303
bottom 10px

‎components/tab-bar/test/__snapshots__/demo.spec.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ exports[`TabBar - Demo Scroll 1`] = `
8686
<!---->
8787
<div scroll-wrapper="" class="scroll-view-container">
8888
<!---->
89-
<div class="md-tab-bar-list" style="width:0px;"><a class="md-tab-bar-item is-active">精选</a><a class="md-tab-bar-item">全部</a><a class="md-tab-bar-item">满减券</a><a class="md-tab-bar-item">立减券</a><a class="md-tab-bar-item">免息券</a><a class="md-tab-bar-item">校园专享</a><a class="md-tab-bar-item">夜间优惠</a><a class="md-tab-bar-item">红包</a></div> <span class="md-tab-bar-ink" style="width:0px;transform:translateX(0px);"></span>
89+
<div class="md-tab-bar-list" style="width:0px;"><a class="md-tab-bar-item is-active more-than-five">精选</a><a class="md-tab-bar-item">全部</a><a class="md-tab-bar-item">满减券</a><a class="md-tab-bar-item">立减券</a><a class="md-tab-bar-item">免息券</a><a class="md-tab-bar-item">校园专享</a><a class="md-tab-bar-item">夜间优惠</a><a class="md-tab-bar-item">红包</a></div> <span class="md-tab-bar-ink" style="width:0px;transform:translateX(0px);"></span>
9090
<!---->
9191
</div>
9292
<!---->

‎components/tip/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import TipOptions from './tip.vue'
2+
import TipOptions from './tip'
33
import {randomId} from '../_util'
44
const Tip = Vue.extend(TipOptions)
55

‎components/toast/README.en-US.md

+17-15
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ this.$toast.info('hint') // Totally Import
2222

2323
#### Toast Static Methods
2424

25-
##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode})
25+
##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode, square})
2626
Dynamically create a toast
2727

2828
| Props | Description | Type | Default | Note |
@@ -34,8 +34,9 @@ Dynamically create a toast
3434
| position | display position | String | `center` | `top/center/bottom` |
3535
| hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - |
3636
| parentNode | portal node of toast | HTMLElement | `document.body`| - |
37+
| square <sup class="version-after">2.6.0+</sup> | use square style | Boolean | `false`|-|
3738

38-
##### Toast.info(content, duration, hasMask, parentNode)
39+
##### Toast.info(content, duration, hasMask, parentNode, square)
3940
Dynamically create a text toast
4041

4142
| Props | Description | Type | Default | Note |
@@ -44,8 +45,9 @@ Dynamically create a text toast
4445
| duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
4546
| hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - |
4647
| parentNode | portal node of toast | HTMLElement | `document.body`| - |
48+
| square <sup class="version-after">2.6.0+</sup> | use square style | Boolean | `false`|-|
4749

48-
##### Toast.succeed(content, duration, hasMask, parentNode)
50+
##### Toast.succeed(content, duration, hasMask, parentNode, square)
4951
Dynamically create a success toast
5052

5153
| Props | Description | Type | Default | Note |
@@ -54,8 +56,9 @@ Dynamically create a success toast
5456
| duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
5557
| hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - |
5658
| parentNode | portal node of toast | HTMLElement | `document.body`| - |
59+
| square <sup class="version-after">2.6.0+</sup> | use square style | Boolean | `false`|-|
5760

58-
##### Toast.failed(content, duration, hasMask, parentNode)
61+
##### Toast.failed(content, duration, hasMask, parentNode, square)
5962
Dynamically create a failed toast
6063

6164
| Props | Description | Type | Default | Note |
@@ -64,8 +67,9 @@ Dynamically create a failed toast
6467
| duration |toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
6568
| hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - |
6669
| parentNode | portal node of toast | HTMLElement | `document.body`| - |
70+
| square <sup class="version-after">2.6.0+</sup> | use square style | Boolean | `false`|-|
6771

68-
##### Toast.loading(content, duration, hasMask, parentNode)
72+
##### Toast.loading(content, duration, hasMask, parentNode, square)
6973
Dynamically create a loading toast
7074

7175
| Props | Description | Type | Default | Note |
@@ -74,13 +78,12 @@ Dynamically create a loading toast
7478
| duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `0` | - |
7579
| hasMask | whether to show a transparent mask, which will prevent users from clicking | Boolean | `false` | - |
7680
| parentNode | portal node of toast | HTMLElement | `document.body`| - |
81+
| square <sup class="version-after">2.6.0+</sup> | use square style | Boolean | `false`|-|
7782

7883
##### Toast.hide()
7984
Hide current toast
8085

81-
#### Toast.component Props
82-
83-
<sup class="version-after">2.3.0+</sup>
86+
#### Toast Props <sup class="version-after">2.3.0+</sup>
8487

8588
| Props | Description | Type | Default | Note |
8689
|----|-----|------|------|------|
@@ -90,29 +93,28 @@ Hide current toast
9093
| duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
9194
| position | display position | String | `center` | `top/center/bottom` |
9295
| hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - |
96+
| square <sup class="version-after">2.6.0+</sup> | use square style | Boolean | `false`|-|
9397

98+
#### Toast Slots
99+
#### default
94100
```html
95101
<md-toast>
96102
<md-activity-indicator>loading...</md-activity-indicator>
97103
</md-toast>
98104
```
99105

100-
#### Toast.component Methods
101-
102-
<sup class="version-after">2.3.0+</sup>
106+
#### Toast Methods <sup class="version-after">2.3.0+</sup>
103107

104108
##### show()
105109
Show toast
106110

107111
##### hide()
108112
Hide toast
109113

110-
#### Toast.component Events
111-
112-
<sup class="version-after">2.3.0+</sup>
114+
#### Toast Events <sup class="version-after">2.3.0+</sup>
113115

114116
##### @show()
115117
Toast show event
116118

117119
##### @hide()
118-
Toast hidden event
120+
Toast hidden event

‎components/toast/README.md

+41-39
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入
2424

2525
#### Toast Static Methods
2626

27-
##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode})
27+
##### Toast({content, icon, iconSvg, duration, position, hasMask, parentNode, square})
2828
显示自定义提示
2929

3030
|属性 | 说明 | 类型 | 默认值|备注|
@@ -36,53 +36,56 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入
3636
| position | 展示位置 | String | `center` | `top/center/bottom` |
3737
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
3838
| parentNode | 组件挂载节点 | HTMLElement | `document.body`|- |
39+
| square <sup class="version-after">2.6.0+</sup> | 使用方形样式 | Boolean | `false`|-|
3940

40-
##### Toast.info(content, duration, hasMask, parentNode)
41+
##### Toast.info(content, duration, hasMask, parentNode, square)
4142
显示纯文本提示
4243

43-
|属性 | 说明 | 类型 | 默认值|
44-
|----|-----|------|------|
45-
| content | 提示内容文本 | String | - |
46-
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` |
47-
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` |
48-
| parentNode | 组件挂载节点 | HTMLElement | `document.body` |
44+
|属性 | 说明 | 类型 | 默认值|备注|
45+
|----|-----|------|------|------|
46+
| content | 提示内容文本 | String | - | - |
47+
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
48+
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
49+
| parentNode | 组件挂载节点 | HTMLElement | `document.body` | - |
50+
| square <sup class="version-after">2.6.0+</sup> | 使用方形样式 | Boolean | `false`|-|
4951

50-
##### Toast.succeed(content, duration, hasMask, parentNode)
52+
##### Toast.succeed(content, duration, hasMask, parentNode, square)
5153
显示成功提示
5254

53-
|属性 | 说明 | 类型 | 默认值|
54-
|----|-----|------|------|
55-
| content | 提示内容文本 | String | - |
56-
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` |
57-
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` |
58-
| parentNode | 组件挂载节点 | HTMLElement | `document.body` |
55+
|属性 | 说明 | 类型 | 默认值|备注|
56+
|----|-----|------|------|------|
57+
| content | 提示内容文本 | String | - | - |
58+
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
59+
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
60+
| parentNode | 组件挂载节点 | HTMLElement | `document.body` | - |
61+
| square <sup class="version-after">2.6.0+</sup> | 使用方形样式 | Boolean | `false`|-|
5962

60-
##### Toast.failed(content, duration, hasMask, parentNode)
63+
##### Toast.failed(content, duration, hasMask, parentNode, square)
6164
显示失败提示
6265

63-
|属性 | 说明 | 类型 | 默认值|
64-
|----|-----|------|------|
65-
| content | 提示内容文本 | String | - |
66-
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` |
67-
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` |
68-
| parentNode | 组件挂载节点 | HTMLElement | `document.body`|
66+
|属性 | 说明 | 类型 | 默认值|备注|
67+
|----|-----|------|------|------|
68+
| content | 提示内容文本 | String | - | - |
69+
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
70+
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
71+
| parentNode | 组件挂载节点 | HTMLElement | `document.body`| - |
72+
| square <sup class="version-after">2.6.0+</sup> | 使用方形样式 | Boolean | `false`|-|
6973

70-
##### Toast.loading(content, duration, hasMask, parentNode)
74+
##### Toast.loading(content, duration, hasMask, parentNode, square)
7175
显示载入提示
7276

73-
|属性 | 说明 | 类型 | 默认值|
74-
|----|-----|------|------|
75-
| content | 提示内容文本 | String, Number | - |
76-
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `0` |
77-
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `true` |
78-
| parentNode | 组件挂载节点 | HTMLElement | `document.body`|
77+
|属性 | 说明 | 类型 | 默认值|备注|
78+
|----|-----|------|------|------|
79+
| content | 提示内容文本 | String, Number | - | - |
80+
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `0` | - |
81+
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `true` | - |
82+
| parentNode | 组件挂载节点 | HTMLElement | `document.body`| - |
83+
| square <sup class="version-after">2.6.0+</sup> | 使用方形样式 | Boolean | `false`|-|
7984

8085
##### Toast.hide()
8186
隐藏提示
8287

83-
#### Toast.component Props
84-
85-
<sup class="version-after">2.3.0+</sup>
88+
#### Toast Props <sup class="version-after">2.3.0+</sup>
8689

8790
|属性 | 说明 | 类型 | 默认值|备注|
8891
|----|-----|------|------|------|
@@ -92,29 +95,28 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入
9295
| duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
9396
| position | 展示位置 | String | `center` | `top/center/bottom` |
9497
| hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |
98+
| square <sup class="version-after">2.6.0+</sup> | 使用方形样式 | Boolean | `false`|-|
9599

100+
#### Toast Slots
101+
#### default
96102
```html
97103
<md-toast>
98104
<md-activity-indicator>loading...</md-activity-indicator>
99105
</md-toast>
100106
```
101107

102-
#### Toast.component Methods
103-
104-
<sup class="version-after">2.3.0+</sup>
108+
#### Toast Methods <sup class="version-after">2.3.0+</sup>
105109

106110
##### show()
107111
展示提示
108112

109113
##### hide()
110114
隐藏提示
111115

112-
#### Toast.component Events
113-
114-
<sup class="version-after">2.3.0+</sup>
116+
#### Toast Events <sup class="version-after">2.3.0+</sup>
115117

116118
##### @show()
117119
提示展示事件
118120

119121
##### @hide()
120-
提示隐藏事件
122+
提示隐藏事件

‎components/toast/demo/cases/demo9.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="md-example-child md-example-child-toast md-example-child-toast-7">
3+
<md-toast ref="toast" icon="success" content="方形 Toast 最多支持2行文字" square>
4+
</md-toast>
5+
<md-button @click="showTextToast">方形Toast长文字</md-button>
6+
</div>
7+
</template>
8+
9+
<script>import {Toast, Button, ActivityIndicator} from 'mand-mobile'
10+
11+
export default {
12+
name: 'toast-demo',
13+
/* DELETE */
14+
title: '方形 Toast 长文本',
15+
titleEnUS: 'Cube toast long text',
16+
/* DELETE */
17+
components: {
18+
[Toast.component.name]: Toast.component,
19+
[Button.name]: Button,
20+
[ActivityIndicator.name]: ActivityIndicator,
21+
},
22+
data() {
23+
return {
24+
isShow: false,
25+
}
26+
},
27+
methods: {
28+
showTextToast() {
29+
if (this.isShow) {
30+
this.$refs.toast.hide()
31+
this.isShow = false
32+
} else {
33+
this.$refs.toast.show()
34+
this.isShow = true
35+
}
36+
},
37+
},
38+
}
39+
</script>

‎components/toast/demo/index.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import Demo5 from './cases/demo5'
2020
import Demo6 from './cases/demo6'
2121
import Demo7 from './cases/demo7'
2222
import Demo8 from './cases/demo8'
23+
import Demo9 from './cases/demo9'
2324
24-
export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8])}
25+
export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8, Demo9])}
2526
</script>

‎components/toast/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import ToastOptions from './toast.vue'
2+
import ToastOptions from './toast'
33

44
/**
55
* Toast factory

‎components/toast/toast.vue

+20-12
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default {
109109
flex-shrink 0
110110
color toast-color
111111
.md-icon + .md-toast-text
112-
margin-left h-gap-xs
112+
margin-left h-gap-sm
113113
.md-popup
114114
.md-popup-box
115115
width 540px
@@ -144,20 +144,28 @@ export default {
144144
background-color toast-fill
145145
box-sizing border-box
146146
overflow hidden
147+
.md-toast-text
148+
white-space nowrap
149+
text-overflow: ellipsis
150+
overflow hidden
147151
&.square
148152
display flex
149153
flex-direction column
150-
width 300px
151-
height 240px
152-
padding 56px 60px
154+
width 240px
155+
min-height 232px
156+
padding 54px 36px 48px 36px
157+
border-radius toast-radius-medium
158+
.md-toast-text
159+
margin-left 0
160+
line-height 40px
161+
word-break break-all
162+
white-space normal
163+
display -webkit-box
164+
-webkit-box-orient vertical
165+
-webkit-line-clamp 2
153166
.md-icon
154167
margin-bottom 32px
155-
width 60px
156-
height 60px
157-
font-size 60px
158-
159-
.md-toast-text
160-
white-space nowrap
161-
text-overflow: ellipsis
162-
overflow hidden
168+
width 58px
169+
height 58px
170+
font-size 58px
163171
</style>

‎package-lock.json

+34-13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mand-mobile",
3-
"version": "2.6.0-beta.7",
3+
"version": "2.6.0",
44
"description": "A Vue.js 2.0 Mobile UI Toolkit",
55
"homepage": "https://didi.github.io/mand-mobile",
66
"main": "lib/mand-mobile.umd.js",
@@ -224,5 +224,9 @@
224224
"browserslist": [
225225
"iOS >= 8",
226226
"Android > 4.0"
227-
]
227+
],
228+
"engines": {
229+
"node": ">=6 <13",
230+
"npm": ">=3"
231+
}
228232
}

‎site/docs/design/preface/introduce.en-US.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ title: FD+ introduce
1515
</style>
1616

1717
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.
18-
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.
18+
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.
1919

2020
<strong class="work-show">2021 Didi Financial Design Team Work Show</strong><a href="https://z.didi.cn/5mqnc" target="_blank">See</a>
2121
<img class="fd-team" src="https://pt-starimg.didistatic.com/static/starimg/img/4PJN8s5DLq1643105615244.png" alt="FD+ team" width="943"/>

‎site/docs/design/preface/introduce.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ title: FD+介绍
1515
</style>
1616

1717
我们追求极简，有温度的设计，但我们更在意设计在金融业务中的价值呈现，其中重要的环节是如何提升生产协作效率。<br/>
18-
随着滴滴金融业务线的扩展，产品线形态差别很大，分支较多且模式复杂，在设计与研发协同共建中，从中梳理并提取稳定且可以高服用的控件、组件、页面成为了我们共建的目标。我们希望通过组件化的解决方案，快速拉齐标准，降低生产成本，让设计师能更好的专注于效率之外的增长创新设计体验中。
18+
随着滴滴金融业务线的扩展，产品线形态差别很大，分支较多且模式复杂，在设计与研发协同共建中，从中梳理并提取稳定且可以高复用的控件、组件、页面成为了我们共建的目标。我们希望通过组件化的解决方案，快速拉齐标准，降低生产成本，让设计师能更好的专注于效率之外的增长创新设计体验中。
1919

2020
<strong class="work-show">2021年滴滴金融设计团队Work Show</strong><a href="https://z.didi.cn/5mqnc" target="_blank">点击查看</a>
2121

‎types/toast.d.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { MandComponent } from './component'
33
export type ToastOptions = {
44
content: string
55
duration?: number
6-
parentNode?: Element,
6+
parentNode?: Element
77
hasMask?: boolean
8+
square?: boolean
89
}
910

1011
export type ToastConstructorOptions = {
@@ -14,10 +15,10 @@ export type ToastConstructorOptions = {
1415

1516
export interface Toast {
1617
(options?: ToastConstructorOptions): void
17-
info(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void
18-
succeed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void
19-
failed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void
20-
loading(content: string, duration?: number, hasMask?: boolean, parentNode?: Element): void
18+
info(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void
19+
succeed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void
20+
failed(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void
21+
loading(content: string, duration?: number, hasMask?: boolean, parentNode?: Element, square?: boolean): void
2122
hide(): void
2223
component: MandComponent
2324
}

0 commit comments

Comments
 (0)
Please sign in to comment.