english_learned_master/docs/alert-tip-usage.md

AlertTip 组件使用说明

这是一个用于显示顶部提示信息的自定义组件，支持自定义文本内容、背景颜色、显示时长和淡出动画。

引入组件

在需要使用组件的页面的 JSON 配置文件中引入组件：

{
  "usingComponents": {
    "alert-tip": "../../components/alert-tip/alert-tip"
  }
}

在页面中使用组件

在页面的 WXML 中添加组件：

<alert-tip id="alertTip" 
  container-bg-color="#E3E3E3" 
  bg-color="#CA4B15" 
  text-color="#FFFFFF" 
  icon-path="../../pages/images/sysIcon_b11.png"
  duration="1000"
  fade-out-duration="1000">
</alert-tip>

组件属性

属性名	类型	默认值	说明
content	String	''	提示内容
bgColor	String	'#CA4B15'	背景颜色
textColor	String	'#FFFFFF'	文字颜色
iconPath	String	'../../pages/images/sysIcon_b11.png'	图标路径
duration	Number	1000	显示时长(毫秒)，显示多久后开始淡出
fadeOutDuration	Number	1000	淡出动画时长(毫秒)

组件方法

showAlert(content)

显示提示信息。

参数

• content (可选): 提示内容。如果提供，将覆盖组件的 content 属性。

示例

// 在页面的 JS 中调用组件的方法
Page({
  showTip: function() {
    // 使用组件的默认 content
    this.selectComponent('#alertTip').showAlert();
    
    // 或者提供新的 content
    this.selectComponent('#alertTip').showAlert("这是一条提示信息");
  }
})

完整示例

// 页面 JS
Page({
  data: {
    // 页面数据
  },
  
  onSomeAction: function() {
    // 当某个条件满足时，显示提示
    if (someCondition) {
      this.selectComponent('#alertTip').showAlert("操作成功");
    } else {
      this.selectComponent('#alertTip').showAlert("操作失败");
    }
  }
})

<!-- 页面 WXML -->
<alert-tip id="alertTip" 
  bg-color="#28a745" 
  text-color="#FFFFFF">
</alert-tip>

<button bindtap="onSomeAction">执行操作</button>

这样，当用户点击按钮时，如果条件满足，将显示绿色背景的"操作成功"提示；否则显示"操作失败"提示。