# AlertTip 组件使用说明

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

## 引入组件

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

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

## 在页面中使用组件

在页面的 WXML 中添加组件：

```html
<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 属性。

**示例**

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

## 完整示例

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

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

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

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