反馈组件

反馈组件用于向用户提供操作反馈、状态提示和交互响应。

Alert - 警告提示

用于页面中展示重要的提示信息。

基本用法

Alert() {
  // 警告内容
}

属性列表

属性	接受类型	默认值	说明
`type`	string	"info"	警告类型
`title`	string	""	警告标题
`message`	string	""	警告内容
`showIcon`	bool	true	是否显示图标
`closable`	bool	false	是否可关闭
`closeText`	string	"关闭"	关闭按钮文字
`onClose`	func	null	关闭事件
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	16	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"transparent"	背景颜色
`borderRadius`	string, int, singlef	4	圆角
`border`	string	"1px solid"	边框

类型值

值	说明
"success"	成功
"info"	信息
"warning"	警告
"error"	错误

示例

// 成功提示
Alert()
  .type("success")
  .title("操作成功")
  .message("您的操作已成功完成")
  .showIcon(true)
  .closable(true)

// 错误提示
Alert()
  .type("error")
  .title("操作失败")
  .message("请检查输入信息后重试")
  .showIcon(true)
  .onClose(() => {
    // 关闭处理
  })

Message - 消息提示

用于显示全局提示信息。

基本用法

Message() {
  // 消息内容
}

属性列表

属性	接受类型	默认值	说明
`type`	string	"info"	消息类型
`content`	string	""	消息内容
`duration`	int	3000	显示时长(毫秒)
`showIcon`	bool	true	是否显示图标
`closable`	bool	false	是否可关闭
`onClose`	func	null	关闭事件
`position`	string	"top"	显示位置
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	12	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#ffffff"	背景颜色
`color`	string	"#333333"	文字颜色
`borderRadius`	string, int, singlef	4	圆角
`boxShadow`	string	"0 2px 8px rgba(0,0,0,0.15)"	阴影

位置值

值	说明
"top"	顶部
"topLeft"	左上
"topRight"	右上
"bottom"	底部
"bottomLeft"	左下
"bottomRight"	右下

示例

// 成功消息
Message()
  .type("success")
  .content("保存成功")
  .duration(2000)
  .position("top")

// 错误消息
Message()
  .type("error")
  .content("网络连接失败")
  .duration(5000)
  .closable(true)
  .onClose(() => {
    // 关闭处理
  })

Notification - 通知

用于显示通知信息，支持更多自定义内容。

基本用法

Notification() {
  // 通知内容
}

属性列表

属性	接受类型	默认值	说明
`type`	string	"info"	通知类型
`title`	string	""	通知标题
`description`	string	""	通知描述
`duration`	int	4500	显示时长(毫秒)
`showIcon`	bool	true	是否显示图标
`closable`	bool	true	是否可关闭
`onClose`	func	null	关闭事件
`onClick`	func	null	点击事件
`position`	string	"topRight"	显示位置
`width`	string, int, singlef	320	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	16	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#ffffff"	背景颜色
`color`	string	"#333333"	文字颜色
`borderRadius`	string, int, singlef	6	圆角
`boxShadow`	string	"0 4px 12px rgba(0,0,0,0.15)"	阴影

示例

// 成功通知
Notification()
  .type("success")
  .title("上传完成")
  .description("文件已成功上传到服务器")
  .duration(3000)
  .position("topRight")

// 带操作的通知
Notification()
  .type("info")
  .title("新消息")
  .description("您有3条未读消息")
  .duration(0)
  .closable(true)
  .onClick(() => {
    // 跳转到消息页面
  })

Toast - 轻提示

用于显示轻量级的提示信息。

基本用法

Toast() {
  // 提示内容
}

属性列表

属性	接受类型	默认值	说明
`type`	string	"info"	提示类型
`content`	string	""	提示内容
`duration`	int	2000	显示时长(毫秒)
`position`	string	"center"	显示位置
`mask`	bool	false	是否显示遮罩
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	12	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"rgba(0,0,0,0.7)"	背景颜色
`color`	string	"#ffffff"	文字颜色
`borderRadius`	string, int, singlef	4	圆角

位置值

值	说明
"top"	顶部
"center"	居中
"bottom"	底部

示例

// 简单提示
Toast()
  .content("操作成功")
  .duration(1500)
  .position("center")

// 带遮罩的提示
Toast()
  .type("loading")
  .content("加载中...")
  .duration(0)
  .mask(true)
  .position("center")

用于显示模态对话框。

基本用法

Modal() {
  // 模态框内容
}

属性列表

属性	接受类型	默认值	说明
`visible`	bool	false	是否显示
`title`	string	""	标题
`width`	string, int, singlef	520	宽度
`height`	string, int, singlef	"auto"	高度
`mask`	bool	true	是否显示遮罩
`maskClosable`	bool	true	点击遮罩是否关闭
`closable`	bool	true	是否显示关闭按钮
`okText`	string	"确定"	确定按钮文字
`cancelText`	string	"取消"	取消按钮文字
`onOk`	func	null	确定事件
`onCancel`	func	null	取消事件
`onClose`	func	null	关闭事件
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#ffffff"	背景颜色
`borderRadius`	string, int, singlef	6	圆角
`boxShadow`	string	"0 4px 12px rgba(0,0,0,0.15)"	阴影

示例

// 确认对话框
Modal()
  .visible(true)
  .title("确认删除")
  .width(400)
  .okText("删除")
  .cancelText("取消")
  .onOk(() => {
    // 确认删除
  })
  .onCancel(() => {
    // 取消删除
  })

// 自定义内容
Modal()
  .visible(true)
  .title("用户信息")
  .width(600)
  .height(400)
  .maskClosable(false)
  .onClose(() => {
    // 关闭处理
  })

Drawer - 抽屉

用于从侧边滑出的面板。

基本用法

Drawer() {
  // 抽屉内容
}

属性列表

属性	接受类型	默认值	说明
`visible`	bool	false	是否显示
`title`	string	""	标题
`placement`	string	"right"	位置
`width`	string, int, singlef	300	宽度
`height`	string, int, singlef	"100%"	高度
`mask`	bool	true	是否显示遮罩
`maskClosable`	bool	true	点击遮罩是否关闭
`closable`	bool	true	是否显示关闭按钮
`onClose`	func	null	关闭事件
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#ffffff"	背景颜色
`borderRadius`	string, int, singlef	0	圆角
`boxShadow`	string	"0 4px 12px rgba(0,0,0,0.15)"	阴影

位置值

值	说明
"top"	顶部
"right"	右侧
"bottom"	底部
"left"	左侧

示例

// 右侧抽屉
Drawer()
  .visible(true)
  .title("设置")
  .placement("right")
  .width(400)
  .onClose(() => {
    // 关闭处理
  })

// 底部抽屉
Drawer()
  .visible(true)
  .title("选择选项")
  .placement("bottom")
  .height(300)
  .maskClosable(false)

用于显示气泡样式的弹出内容。

基本用法

Popover() {
  // 气泡内容
}

属性列表

属性	接受类型	默认值	说明
`visible`	bool	false	是否显示
`title`	string	""	标题
`content`	string	""	内容
`placement`	string	"top"	位置
`trigger`	string	"hover"	触发方式
`arrow`	bool	true	是否显示箭头
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	12	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#ffffff"	背景颜色
`color`	string	"#333333"	文字颜色
`borderRadius`	string, int, singlef	6	圆角
`boxShadow`	string	"0 2px 8px rgba(0,0,0,0.15)"	阴影

触发方式

值	说明
"hover"	悬停
"click"	点击
"focus"	聚焦

示例

// 悬停提示
Popover()
  .title("提示")
  .content("这是一个气泡提示")
  .placement("top")
  .trigger("hover")

// 点击弹出
Popover()
  .title("操作")
  .content("确认要执行此操作吗？")
  .placement("bottom")
  .trigger("click")
  .arrow(true)

用于显示简短的文字提示。

基本用法

Tooltip() {
  // 提示内容
}

属性列表

属性	接受类型	默认值	说明
`title`	string	""	提示文字
`placement`	string	"top"	位置
`trigger`	string	"hover"	触发方式
`arrow`	bool	true	是否显示箭头
`delay`	int	0	延迟显示(毫秒)
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	8	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"rgba(0,0,0,0.75)"	背景颜色
`color`	string	"#ffffff"	文字颜色
`borderRadius`	string, int, singlef	4	圆角

示例

// 简单提示
Tooltip()
  .title("这是一个按钮")
  .placement("top")

// 延迟提示
Tooltip()
  .title("长按查看详情")
  .placement("right")
  .delay(500)

Loading - 加载中

用于显示加载状态。

基本用法

Loading() {
  // 加载内容
}

属性列表

属性	接受类型	默认值	说明
`loading`	bool	true	是否加载中
`text`	string	"加载中..."	加载文字
`size`	string	"default"	尺寸
`spinning`	bool	true	是否旋转
`delay`	int	0	延迟显示(毫秒)
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	16	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"rgba(255,255,255,0.8)"	背景颜色
`color`	string	"#1890ff"	加载颜色

尺寸值

值	说明
"small"	小
"default"	默认
"large"	大

示例

// 简单加载
Loading()
  .loading(true)
  .text("加载中...")

// 大尺寸加载
Loading()
  .loading(true)
  .text("正在处理数据")
  .size("large")
  .delay(300)

Spin - 加载指示器

用于显示旋转的加载指示器。

基本用法

Spin() {
  // 内容
}

属性列表

属性	接受类型	默认值	说明
`spinning`	bool	true	是否旋转
`size`	string	"default"	尺寸
`tip`	string	""	提示文字
`delay`	int	0	延迟显示(毫秒)
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	16	内边距
`margin`	string, int, singlef	0	外边距
`color`	string	"#1890ff"	指示器颜色

示例

// 简单旋转器
Spin()
  .spinning(true)

// 带提示的旋转器
Spin()
  .spinning(true)
  .tip("正在加载数据")
  .size("large")

Skeleton - 骨架屏

用于在内容加载时显示骨架屏效果。

基本用法

Skeleton() {
  // 骨架内容
}

属性列表

属性	接受类型	默认值	说明
`loading`	bool	true	是否显示骨架屏
`active`	bool	false	是否显示动画
`avatar`	bool	false	是否显示头像占位
`title`	bool	true	是否显示标题占位
`paragraph`	bool	true	是否显示段落占位
`rows`	int	3	段落行数
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	16	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#f2f2f2"	背景颜色
`animationColor`	string	"#e6e6e6"	动画颜色

示例

// 简单骨架屏
Skeleton()
  .loading(true)
  .rows(3)

// 带头像的骨架屏
Skeleton()
  .loading(true)
  .avatar(true)
  .title(true)
  .paragraph(true)
  .rows(2)
  .active(true)

Empty - 空状态

用于显示空状态页面。

基本用法

Empty() {
  // 空状态内容
}

属性列表

属性	接受类型	默认值	说明
`image`	string	""	图片地址
`title`	string	"暂无数据"	标题
`description`	string	""	描述
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"transparent"	背景颜色
`color`	string	"#999999"	文字颜色

示例

// 简单空状态
Empty()
  .title("暂无数据")
  .description("请稍后再试")

// 自定义图片的空状态
Empty()
  .image("/images/empty.png")
  .title("没有找到相关内容")
  .description("请尝试其他搜索条件")

Result - 结果页

用于显示操作结果页面。

基本用法

Result() {
  // 结果内容
}

属性列表

属性	接受类型	默认值	说明
`status`	string	"info"	结果状态
`title`	string	""	标题
`subTitle`	string	""	副标题
`extra`	string	""	操作区内容
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"transparent"	背景颜色
`color`	string	"#333333"	文字颜色

状态值

值	说明
"success"	成功
"error"	错误
"info"	信息
"warning"	警告
"404"	404
"403"	403
"500"	500

示例

// 成功结果
Result()
  .status("success")
  .title("操作成功")
  .subTitle("您的操作已成功完成")
  .extra("返回首页")

// 错误结果
Result()
  .status("error")
  .title("操作失败")
  .subTitle("请检查网络连接后重试")
  .extra("重新尝试")

Snackbar - 消息条

用于显示简短的消息提示。

基本用法

Snackbar() {
  // 消息条内容
}

属性列表

属性	接受类型	默认值	说明
`visible`	bool	false	是否显示
`message`	string	""	消息内容
`action`	string	""	操作按钮文字
`duration`	int	4000	显示时长(毫秒)
`position`	string	"bottom"	显示位置
`onAction`	func	null	操作事件
`onClose`	func	null	关闭事件
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	16	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#323232"	背景颜色
`color`	string	"#ffffff"	文字颜色
`borderRadius`	string, int, singlef	4	圆角

示例

// 基本消息条
Snackbar()
  .visible(true)
  .message("操作成功")
  .duration(3000)
  .position("bottom")

// 带操作的消息条
Snackbar()
  .visible(true)
  .message("文件已删除")
  .action("撤销")
  .onAction(() => {
    // 撤销操作
  })

Dialog - 对话框

用于显示对话框内容。

基本用法

Dialog() {
  // 对话框内容
}

属性列表

属性	接受类型	默认值	说明
`visible`	bool	false	是否显示
`title`	string	""	标题
`width`	string, int, singlef	520	宽度
`height`	string, int, singlef	"auto"	高度
`mask`	bool	true	是否显示遮罩
`maskClosable`	bool	true	点击遮罩是否关闭
`closable`	bool	true	是否显示关闭按钮
`okText`	string	"确定"	确定按钮文字
`cancelText`	string	"取消"	取消按钮文字
`onOk`	func	null	确定事件
`onCancel`	func	null	取消事件
`onClose`	func	null	关闭事件
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"#ffffff"	背景颜色
`borderRadius`	string, int, singlef	6	圆角
`boxShadow`	string	"0 4px 12px rgba(0,0,0,0.15)"	阴影

示例

// 确认对话框
Dialog()
  .visible(true)
  .title("确认删除")
  .width(400)
  .okText("删除")
  .cancelText("取消")
  .onOk(() => {
    // 确认删除
  })

// 信息对话框
Dialog()
  .visible(true)
  .title("提示")
  .width(500)
  .height(300)
  .maskClosable(false)
  .onClose(() => {
    // 关闭处理
  })

Error - 错误状态

用于显示错误状态页面。

基本用法

Error() {
  // 错误状态内容
}

属性列表

属性	接受类型	默认值	说明
`title`	string	"出错了"	错误标题
`description`	string	"抱歉，出现了错误"	错误描述
`image`	string	""	错误图片
`retryText`	string	"重试"	重试按钮文字
`onRetry`	func	null	重试事件
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"transparent"	背景颜色
`color`	string	"#ff4d4f"	文字颜色

示例

// 基本错误状态
Error()
  .title("网络错误")
  .description("请检查网络连接后重试")
  .retryText("重新加载")
  .onRetry(() => {
    // 重试操作
  })

// 自定义错误状态
Error()
  .title("页面加载失败")
  .description("无法加载页面内容，请稍后再试")
  .image("/images/error.png")
  .onRetry(() => {
    // 重新加载页面
  })

Success - 成功状态

用于显示成功状态页面。

基本用法

Success() {
  // 成功状态内容
}

属性列表

属性	接受类型	默认值	说明
`title`	string	"操作成功"	成功标题
`description`	string	"您的操作已成功完成"	成功描述
`image`	string	""	成功图片
`actionText`	string	"继续"	操作按钮文字
`onAction`	func	null	操作事件
`width`	string, int, singlef	"auto"	宽度
`height`	string, int, singlef	"auto"	高度
`padding`	string, int, singlef	24	内边距
`margin`	string, int, singlef	0	外边距
`backgroundColor`	string	"transparent"	背景颜色
`color`	string	"#52c41a"	文字颜色

示例

// 基本成功状态
Success()
  .title("保存成功")
  .description("您的数据已成功保存")
  .actionText("继续编辑")
  .onAction(() => {
    // 继续操作
  })

// 自定义成功状态
Success()
  .title("注册成功")
  .description("欢迎加入我们！")
  .image("/images/success.png")
  .actionText("开始使用")
  .onAction(() => {
    // 跳转到首页
  })

Alert - 警告提示​

基本用法​

属性列表​

类型值​

示例​

Message - 消息提示​

基本用法​

属性列表​

位置值​

示例​

Notification - 通知​

基本用法​

属性列表​

示例​

Toast - 轻提示​

基本用法​

属性列表​

位置值​

示例​

Modal - 模态框​

基本用法​

属性列表​

示例​

Drawer - 抽屉​

基本用法​

属性列表​

位置值​

示例​

Popover - 气泡卡片​

基本用法​

属性列表​

触发方式​

示例​

Tooltip - 文字提示​

基本用法​

属性列表​

示例​

Loading - 加载中​

基本用法​

属性列表​

尺寸值​

示例​

Spin - 加载指示器​

基本用法​

属性列表​

示例​

Skeleton - 骨架屏​

基本用法​

属性列表​

示例​

Empty - 空状态​

基本用法​

属性列表​

示例​

Result - 结果页​

基本用法​

属性列表​

状态值​

示例​

Snackbar - 消息条​

基本用法​

属性列表​

示例​

Dialog - 对话框​

基本用法​

属性列表​

示例​

Error - 错误状态​

基本用法​

属性列表​

示例​

Success - 成功状态​

基本用法​

属性列表​

示例​

Alert - 警告提示

基本用法

属性列表

类型值

示例

Message - 消息提示

基本用法

属性列表

位置值

示例

Notification - 通知

基本用法

属性列表

示例

Toast - 轻提示

基本用法

属性列表

位置值

示例

Modal - 模态框

基本用法

属性列表

示例

Drawer - 抽屉

基本用法

属性列表

位置值

示例

Popover - 气泡卡片

基本用法

属性列表

触发方式

示例

Tooltip - 文字提示

基本用法

属性列表

示例

Loading - 加载中

基本用法

属性列表

尺寸值

示例

Spin - 加载指示器

基本用法

属性列表

示例

Skeleton - 骨架屏

基本用法

属性列表

示例

Empty - 空状态

基本用法

属性列表

示例

Result - 结果页

基本用法

属性列表

状态值

示例

Snackbar - 消息条

基本用法

属性列表

示例

Dialog - 对话框

基本用法

属性列表

示例

Error - 错误状态

基本用法

属性列表

示例

Success - 成功状态

基本用法

属性列表

示例