Skip to content

Commit ebbe7e4

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ Toast 支持通过props设置组件属性并新增局中显示的配置 (#888)
1 parent ed60852 commit ebbe7e4

6 files changed

Lines changed: 240 additions & 65 deletions

File tree

‎docs/component/toast.md‎

Lines changed: 51 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
轻提示组件，用于消息通知、加载提示、操作结果提示等场景，支持函数式调用。
44

5+
:::tip 提示
6+
`Toast` 自 $LOWEST_VERSION$ 版本起支持通过 `props` 属性控制组件样式，字段见[props](#props)，需要注意的是函数式调用api的`options`优先级高于`props`。
7+
:::
8+
59
## 基本用法
610

711
需要在页面中引入该组件，作为挂载点。
@@ -52,13 +56,21 @@ toast.show({
5256

5357
## 提示位置
5458

59+
通过设置 `position` 属性，可以设置提示信息的位置，默认为 `middle-top`。
60+
5561
```typescript
5662
// 顶部提示
5763
toast.show({
5864
position: 'top',
5965
msg: '提示信息'
6066
})
6167

68+
// 局中提示
69+
toast.show({
70+
position: 'middle',
71+
msg: '提示信息'
72+
})
73+
6274
// 底部提示
6375
toast.show({
6476
position: 'bottom',
@@ -109,29 +121,45 @@ toast.close()
109121

110122
## Attributes
111123

112-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
113-
| ------- | -------------------------------------- | --------------- | ------ | ------ | -------- |
114-
| options | 配置项，可以直接传入字符串作为提示信息 | string / object | - | - | - |
115-
116-
## options
117-
118-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
119-
| ------------ | --------------------------------------------------------------------------- | ---------- | ------------------------- | ---------------------- | -------- |
120-
| msg | 消息内容 | string | - | - | - |
121-
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
122-
| direction | 排版方向 | string | vertical / horizontal | horizontal | $LOWEST_VERSION$ |
123-
| iconName | 图标类型 | string | success / error / warning | - | - |
124-
| iconSize | 左侧图标尺寸 | string | - | - | - |
125-
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
126-
| classPrefix | 类名前缀，用于使用自定义图标 | string | - | - | - |
127-
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
128-
| zIndex | toast 层级 | number | - | 100 | - |
129-
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
130-
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
131-
| selector | 指定唯一标识 | string | - | - | - |
132-
| cover | 是否存在一个透明遮罩 | boolean | - | `loading`时默认为 true | 1.2.15 |
133-
| opened | 完全展示后的回调函数 | `Function` | - | - | 1.2.15 |
134-
| closed | 完全关闭后的回调函数 | `Function` | - | - | 1.2.15 |
124+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
125+
|--------------|------------------------------------------|----------|--------------------------------------------|------------|------------------|
126+
| selector | 选择器 | string | - | '' | - |
127+
| msg | 提示信息 | string | - | '' | $LOWEST_VERSION$ |
128+
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | $LOWEST_VERSION$ |
129+
| direction | 排列方向 | string | vertical / horizontal | horizontal | $LOWEST_VERSION$ |
130+
| iconName | 图标类型 | string | success / error / warning / loading / info | '' | $LOWEST_VERSION$ |
131+
| iconSize | 图标大小 | number | - | - | $LOWEST_VERSION$ |
132+
| loadingType | 加载类型 | string | outline / ring | outline | $LOWEST_VERSION$ |
133+
| loadingColor | 加载颜色 | string | - | #4D80F0 | $LOWEST_VERSION$ |
134+
| loadingSize | 加载大小 | number | - | - | $LOWEST_VERSION$ |
135+
| iconColor | 图标颜色 | string | - | - | $LOWEST_VERSION$ |
136+
| position | 提示信息框的位置 | string | top / middle-top / middle / bottom | middle-top | $LOWEST_VERSION$ |
137+
| zIndex | 层级 | number | - | 100 | $LOWEST_VERSION$ |
138+
| cover | 是否存在遮罩层 | boolean | - | false | $LOWEST_VERSION$ |
139+
| iconClass | 图标类名 | string | - | '' | $LOWEST_VERSION$ |
140+
| classPrefix | 类名前缀，用于使用自定义图标 | string | - | wd-icon | $LOWEST_VERSION$ |
141+
| opened | 完全展示后的回调函数 | Function | - | - | $LOWEST_VERSION$ |
142+
| closed | 完全关闭时的回调函数 | Function | - | - | $LOWEST_VERSION$ |
143+
144+
## Options
145+
146+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
147+
|--------------|-----------------------------------------------------------------------------|----------|---------------------------|------------|----------|
148+
| msg | 消息内容 | string | - | '' | - |
149+
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
150+
| direction | 排版方向 | string | vertical / horizontal | horizontal | $LOWEST_VERSION$ |
151+
| iconName | 图标类型 | string | success / error / warning | '' | - |
152+
| iconSize | 左侧图标尺寸 | number | - | - | - |
153+
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | '' | - |
154+
| classPrefix | 类名前缀，用于使用自定义图标 | string | - | 'wd-icon' | - |
155+
| position | 提示信息框的位置 | string | top / middle / bottom | middle-top | - |
156+
| zIndex | toast 层级 | number | - | 100 | - |
157+
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
158+
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
159+
| selector | 指定唯一标识 | string | - | '' | - |
160+
| cover | 是否存在一个透明遮罩 | boolean | - | false | - |
161+
| opened | 完全展示后的回调函数 | Function | - | - | - |
162+
| closed | 完全关闭后的回调函数 | Function | - | - | - |
135163

136164
## Methods
137165

‎src/pages/toast/Index.vue‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,13 @@
1717
</demo-block>
1818
<demo-block title="提示位置">
1919
<wd-button @click="showTopToast">顶部toast</wd-button>
20+
<wd-button @click="showMiddletoast">局中toast</wd-button>
2021
<wd-button @click="showBottomToast">底部toast</wd-button>
2122
</demo-block>
2223
<demo-block title="Loading">
2324
<wd-button @click="showLoadingToast">Loading加载</wd-button>
2425
<wd-button @click="showLoadingToast2">ring类型loading</wd-button>
26+
<wd-button @click="showLoadingToast3">纵向布局loading</wd-button>
2527
</demo-block>
2628
<demo-block title="排版方向">
2729
<wd-button @click="showHorizonToast">横向排版</wd-button>
@@ -63,6 +65,21 @@ function showTopToast() {
6365
}
6466
})
6567
}
68+
69+
function showMiddletoast() {
70+
toast.show({
71+
position: 'middle',
72+
iconClass: 'star',
73+
msg: '提示信息',
74+
closed() {
75+
console.log(232)
76+
},
77+
opened() {
78+
console.log(2323232)
79+
}
80+
})
81+
}
82+
6683
function showBottomToast() {
6784
toast.show({
6885
position: 'bottom',
@@ -85,6 +102,16 @@ function showLoadingToast2() {
85102
toast.close()
86103
}, 3000)
87104
}
105+
106+
function showLoadingToast3() {
107+
toast.loading({
108+
msg: '芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。',
109+
direction: 'vertical'
110+
})
111+
setTimeout(() => {
112+
toast.close()
113+
}, 3000)
114+
}
88115
function showLongToast() {
89116
toast.show('这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案')
90117
}
@@ -110,7 +137,7 @@ function showHorizonToast() {
110137
111138
function showVerticalToast() {
112139
toast.success({
113-
msg: '纵向排版',
140+
msg: '芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。',
114141
direction: 'vertical'
115142
})
116143
}

‎src/uni_modules/wot-design-uni/components/wd-toast/index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@include when(vertical) {
1717
flex-direction: column;
1818
}
19+
1920
@include e(msg) {
2021
font-size: $-toast-fs;
2122
line-height: 20px;
@@ -55,7 +56,7 @@
5556
@include m(top) {
5657
transform: translate3d(0, -40vh, 0);
5758
}
58-
@include m(middle){
59+
@include m(middle-top){
5960
transform: translate3d(0%,-18.8vh,0);
6061
}
6162
@include m(bottom) {

0 commit comments

Comments
 (0)