Skip to content

Commit 723c51b

Browse files
MoonofweishengMoonofweisheng
committed
feat: ✨ Toast 轻提示组件支持使用组件库内置和自定义图标
✅ Closes: #444
1 parent 0e835fa commit 723c51b

File tree

15 files changed

+153
-71
lines changed

15 files changed

+153
-71
lines changed

‎docs/component/icon.md‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,40 @@
3030
## 自定义图标
3131
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
3232

33-
``` scss
34-
/* 引入第三方或自定义的字体图标样式 */
33+
34+
``` css
35+
/* 路径 src/iconfont/index.css */
36+
3537
@font-face {
36-
font-family: 'my-icon';
37-
src: url('./my-icon.ttf') format('truetype');
38+
font-family: "fish";
39+
src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),
40+
url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),
41+
url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');
3842
}
3943

40-
.my-icon {
41-
font-family: 'my-icon';
44+
.fish {
45+
font-family: "fish" !important;
46+
font-size: 16px;
47+
font-style: normal;
48+
-webkit-font-smoothing: antialiased;
49+
-moz-osx-font-smoothing: grayscale;
4250
}
4351

44-
.my-icon-extra::before {
45-
content: '\e626';
52+
.fish-kehuishouwu:before {
53+
content: "\e627";
4654
}
55+
56+
```
57+
```html
58+
<!-- app.vue -->
59+
<style>
60+
@import '@/iconfont/index.css';
61+
</style>
4762
```
4863

4964
```html
50-
<!-- 通过 class-prefix 指定类名为 my-icon -->
51-
<wd-icon class-prefix="my-icon" name="extra" />
65+
<!-- 通过 class-prefix 指定类名为 fish -->
66+
<wd-icon class-prefix="fish" name="kehuishouwu" />
5267
```
5368

5469
## Attributes

‎docs/component/toast.md‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,25 @@ toast.warning('提示信息')
3131
toast.info('常规提示信息')
3232
```
3333

34+
## 使用图标
35+
可以使用`iconClass`指定图标，结合`classPrefix`可以使用自定义图标，参见[icon](/component/icon#自定义图标)。
36+
```ts
37+
// 使用组件库内部图标
38+
toast.show({
39+
iconClass: 'star',
40+
msg: '使用组件库内部图标'
41+
})
42+
```
43+
44+
```ts
45+
// 使用自定义图标
46+
toast.show({
47+
iconClass: 'kehuishouwu',
48+
classPrefix: 'fish',
49+
msg: '使用自定义图标'
50+
})
51+
```
52+
3453
## 提示位置
3554

3655
```typescript
@@ -89,9 +108,9 @@ toast.close()
89108
| msg | 消息内容 | string | - | - | - |
90109
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
91110
| iconName | 图标类型 | string | success / error / warning | - | - |
92-
| iconSize | 左侧图标尺寸 | string | - | 42px | - |
111+
| iconSize | 左侧图标尺寸 | string | - | - | - |
93112
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
94-
| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
113+
| classPrefix | 类名前缀，用于使用自定义图标 | string | - | - | - |
95114
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
96115
| zIndex | toast 层级 | number | - | 100 | - |
97116
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
@@ -116,4 +135,3 @@ toast.close()
116135
| 类名 | 说明 | 最低版本 |
117136
| ----------------- | -------------- | -------- |
118137
| custom-class | 根节点样式 | - |
119-
| custom-icon-class | 自定义图标类名 | - |

‎src/App.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ onHide(() => {
3333
})
3434
</script>
3535
<style lang="scss">
36+
@import '@/iconfont/index.css';
37+
3638
::-webkit-scrollbar {
3739
width: 0;
3840
height: 0;

‎src/iconfont/index.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@font-face {
2+
font-family: "fish"; /* Project id 4626013 */
3+
src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),
4+
url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),
5+
url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');
6+
}
7+
8+
.fish {
9+
font-family: "fish" !important;
10+
font-size: 16px;
11+
font-style: normal;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
.fish-kehuishouwu:before {
17+
content: "\e627";
18+
}

‎src/pages/toast/Index.vue‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
<!--
2-
* @Author: weisheng
3-
* @Date: 2023-09-20 11:10:44
4-
* @LastEditTime: 2024-04-11 13:13:28
5-
* @LastEditors: weisheng
6-
* @Description:
7-
* @FilePath: \wot-design-uni\src\pages\toast\Index.vue
8-
* 记得注释
9-
-->
101
<template>
112
<view>
123
<page-wraper>
@@ -20,6 +11,10 @@
2011
<wd-button @click="showWarnToast">警告toast</wd-button>
2112
<wd-button @click="showNormalToast">常规toast</wd-button>
2213
</demo-block>
14+
<demo-block title="使用图标">
15+
<wd-button @click="showInnerIconToast">内部图标</wd-button>
16+
<wd-button @click="showCustomIconToast">自定义图标</wd-button>
17+
</demo-block>
2318
<demo-block title="提示位置">
2419
<wd-button @click="showTopToast">顶部toast</wd-button>
2520
<wd-button @click="showBottomToast">底部toast</wd-button>
@@ -54,6 +49,7 @@ function showNormalToast() {
5449
function showTopToast() {
5550
toast.show({
5651
position: 'top',
52+
iconClass: 'star',
5753
msg: '提示信息',
5854
closed() {
5955
console.log(232)
@@ -88,6 +84,21 @@ function showLoadingToast2() {
8884
function showLongToast() {
8985
toast.show('这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案')
9086
}
87+
88+
function showInnerIconToast() {
89+
toast.show({
90+
iconClass: 'star',
91+
msg: '使用组件库内部图标'
92+
})
93+
}
94+
95+
function showCustomIconToast() {
96+
toast.show({
97+
iconClass: 'kehuishouwu',
98+
classPrefix: 'fish',
99+
msg: '使用自定义图标'
100+
})
101+
}
91102
</script>
92103
<style lang="scss" scoped>
93104
:deep(button) {

‎src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -630,10 +630,14 @@ $-toast-radius: var(--wot-toast-radius, 8px) !default; // 圆角大小
630630
$-toast-bg: var(--wot-toast-bg, $-overlay-bg) !default; // 背景色
631631
$-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号
632632
$-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度
633-
$-toast-icon-size: var(--wot-toast-icon-size, 39px) !default; // 图标大小
633+
$-toast-icon-size: var(--wot-toast-icon-size, 32px) !default; // 图标大小
634+
$-toast-icon-margin-right: var(--wot-toast-icon-margin-right, 12px) !default; // 图标右边距
634635
$-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading 下的padding
635636
$-toast-box-shadow: var(--wot-toast-box-shadow, 0px 6px 16px 0px rgba(0, 0, 0, 0.08)) !default; // 外部阴影
636637

638+
/* loading */
639+
$-loading-size: var(--wot-loading-size, 32px) !default; // loading 大小
640+
637641
/* tooltip */
638642
$-tooltip-bg: var(--wot-tooltip-bg, rgba(38, 39, 40, 0.8)) !default; // 背景色
639643
$-tooltip-color: var(--wot-tooltip-color, $-color-white) !default; // 文字颜色
@@ -890,4 +894,4 @@ $-text-success-color: var(--wot-text-success-color, $-color-success) !default;
890894
/* video-preview */
891895
$-video-preview-bg: var(--wot-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
892896
$-video-preview-close-color: var(--wot-video-preview-close-color, #fff) !default; // 图标颜色
893-
$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小
897+
$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小

‎src/uni_modules/wot-design-uni/components/common/util.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function s4() {
2222
* @return {string} num+px
2323
*/
2424
export function addUnit(num: number | string) {
25-
return Number.isNaN(Number(num)) ? num : `${num}px`
25+
return !isNumber(num) ? num : `${num}px`
2626
}
2727

2828
/**

‎src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -648,10 +648,15 @@ export type toastThemeVars = {
648648
toastFs?: string
649649
toastWithIconMinWidth?: string
650650
toastIconSize?: string
651+
toastIconMarginRight?: string
651652
toastLoadingPadding?: string
652653
toastBoxShadow?: string
653654
}
654655

656+
export type loadingThemeVars = {
657+
loadingSize?: string
658+
}
659+
655660
export type tooltipThemeVars = {
656661
tooltipBg?: string
657662
tooltipColor?: string
@@ -966,6 +971,7 @@ export type ConfigProviderThemeVars = baseThemeVars &
966971
tabsThemeVars &
967972
tagThemeVars &
968973
toastThemeVars &
974+
loadingThemeVars &
969975
tooltipThemeVars &
970976
popoverThemeVars &
971977
gridItemThemeVars &

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
line-height: 0;
77
vertical-align: middle;
88
display: inline-block;
9+
width: $-loading-size;
10+
height: $-loading-size;
911

1012
@include e(body) {
1113
width: 100%;

‎src/uni_modules/wot-design-uni/components/wd-loading/types.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2024-03-15 20:40:34
4-
* @LastEditTime: 2024-05-27 18:49:28
4+
* @LastEditTime: 2024-07-18 22:09:12
55
* @LastEditors: weisheng
66
* @Description:
7-
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-loading\types.ts
7+
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
88
* 记得注释
99
*/
1010
import type { ExtractPropTypes } from 'vue'
@@ -25,7 +25,7 @@ export const loadingProps = {
2525
/**
2626
* 设置加载指示器大小
2727
*/
28-
size: makeNumericProp('32px')
28+
size: makeNumericProp('')
2929
}
3030

3131
export type LoadingProps = ExtractPropTypes<typeof loadingProps>

0 commit comments

Comments
 (0)