mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00

docs: 修复 Button/Icon/ConfigProvider/Popup 组件文档不一致问题 (#1190 )

* docs(button): 更新按钮组件文档对开放能力的描述

- 修改 session-message-title 和 session-message-path 属性名称
- 新增 chooseavatar 和 agreeprivacyauthorization 事件回调

* docs(icon): 更新图标组件文档

- 调整属性描述，明确 name 属性可用于图标名称或图片链接
- 添加事件列表，明确 click 事件的参数
- 移除英文示例代码中不必要的示例和图标列表
- 优化文档结构和格式，使信息更加清晰

* docs(config-provider): 更新全局配置组件文档

- 调整文档中的强调样式，使用加粗替代下划线
- 完善英文文档缺失的内容，保持和中文文档一致

* docs(component): 更新 Popup 组件文档

- 调整文档结构，优化标题层级
- 添加 v-model 使用示例，明确组件绑定值
- 移除冗余的代码示例，精简文档内容
- 更新属性表格，统一属性描述
- 添加防止滚动穿透的解决方案说明

2025-08-09 15:12:23 +08:00

2.0 KiB

Raw Blame History

Icon 图标

基于字体的图标集。

基本用法

通过 name 属性设置使用哪个图标。

<wd-icon name="add-circle" />

图标颜色

设置 color 属性。

<wd-icon name="add-circle" color="#0083ff" />

图标大小

设置 size 属性。

<wd-icon name="add-circle" size="20px" />

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

/* 路径 src/iconfont/index.css */

@font-face {
  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');
}

.fish {
  font-family: "fish" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fish-kehuishouwu:before {
  content: "\e627";
}

<!-- app.vue -->
 <style>
@import '@/iconfont/index.css';
</style>

<!-- 通过 class-prefix 指定类名为 fish -->
<wd-icon class-prefix="fish" name="kehuishouwu" />

Attributes

参数	说明	类型	可选值	默认值	最低版本
name	图标名称或图片链接	string	-	-	-
color	图标的颜色	string	-	inherit	-
size	图标的字体大小	string	-	inherit	-
classPrefix	类名前缀，用于使用自定义图标	string	-	'wd-icon'	0.1.27
custom-style	根节点样式	string	-	-	-

Events

事件名称	说明	参数	最低版本
click	点击图标时触发	event	-

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

2.0 KiB Raw Blame History