diff --git a/docs/component/icon.md b/docs/component/icon.md index 8d265ae7..2877bab1 100644 --- a/docs/component/icon.md +++ b/docs/component/icon.md @@ -30,25 +30,40 @@ ## 自定义图标 如果需要在现有 Icon 的基础上使用更多图标,可以引入第三方 iconfont 对应的字体文件和 CSS 文件,之后就可以在 Icon 组件中直接使用。 -``` scss -/* 引入第三方或自定义的字体图标样式 */ + +``` css +/* 路径 src/iconfont/index.css */ + @font-face { - font-family: 'my-icon'; - src: url('./my-icon.ttf') format('truetype'); + font-family: "fish"; + src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'), + url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'), + url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype'); } -.my-icon { - font-family: 'my-icon'; +.fish { + font-family: "fish" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.my-icon-extra::before { - content: '\e626'; +.fish-kehuishouwu:before { + content: "\e627"; } + +``` +```html + + ``` ```html - - + + ``` ## Attributes diff --git a/docs/component/toast.md b/docs/component/toast.md index 60e6f331..e9c5b04e 100644 --- a/docs/component/toast.md +++ b/docs/component/toast.md @@ -31,6 +31,25 @@ toast.warning('提示信息') toast.info('常规提示信息') ``` +## 使用图标 +可以使用`iconClass`指定图标,结合`classPrefix`可以使用自定义图标,参见[icon](/component/icon#自定义图标)。 +```ts +// 使用组件库内部图标 +toast.show({ + iconClass: 'star', + msg: '使用组件库内部图标' +}) +``` + +```ts +// 使用自定义图标 +toast.show({ + iconClass: 'kehuishouwu', + classPrefix: 'fish', + msg: '使用自定义图标' +}) +``` + ## 提示位置 ```typescript @@ -89,9 +108,9 @@ toast.close() | msg | 消息内容 | string | - | - | - | | duration | 持续时间,单位 ms,为 0 时表示不自动关闭 | number | - | 2000 | - | | iconName | 图标类型 | string | success / error / warning | - | - | -| iconSize | 左侧图标尺寸 | string | - | 42px | - | +| iconSize | 左侧图标尺寸 | string | - | - | - | | iconClass | 图标类目,自定义图标,可以使用 Icon 章节的那些图标类名,iconName 优先级更高 | string | - | - | - | -| customIcon | 自定义图标,开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - | +| classPrefix | 类名前缀,用于使用自定义图标 | string | - | - | - | | position | 提示信息框的位置 | string | top / middle / bottom | middle | - | | zIndex | toast 层级 | number | - | 100 | - | | loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - | @@ -116,4 +135,3 @@ toast.close() | 类名 | 说明 | 最低版本 | | ----------------- | -------------- | -------- | | custom-class | 根节点样式 | - | -| custom-icon-class | 自定义图标类名 | - | diff --git a/src/App.vue b/src/App.vue index 818396d4..94406c4d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -33,6 +33,8 @@ onHide(() => { })