# CAlert 弹窗

## 功能说明

基于 Taro UI 的模态框（AtModal）封装的alert弹窗组件，支持Alert（提示）和Confirm（确认）两种模式。

## 引用方式

```js
import CAlert from '@components/layout/alert';
```

## 组件参数

- `onConfirm` (Function，可选)：确认模式下，点击确认按钮的回调函数

## 实例方法

- `$alert(option, callback)`：显示提示弹窗
  - `option` (String|Object)：弹窗配置，可以是字符串或对象
    - 当为字符串时，直接作为弹窗内容
    - 当为对象时，支持以下属性：
      - `title` (String)：弹窗标题
      - `content` (String)：弹窗主要内容
      - `contents` (Array)：弹窗内容数组，会逐行显示
  - `callback` (Function)：点击"知道了"按钮后的回调函数
  
- `$confirm(option, callback)`：显示确认弹窗
  - `option` (String|Object)：弹窗配置，参数同`$alert`
  - `callback` (Function)：点击"取消"或"确定"按钮后的回调函数

## 使用示例

### 基础提示框用法

```html
<template>
  <view class="page">
    <button @tap="evt => showAlert()">显示提示</button>
    <CAlert ref="alert" />
  </view>
</template>

<script>
import CAlert from '@components/layout/alert';

export default {
  components: {
    CAlert
  },
  methods: {
    showAlert() {
      this.$refs.alert.$alert('这是一条提示信息');
    }
  }
}
</script>
```

### 带标题的提示框

```html
<template>
  <view class="page">
    <button @tap="evt => showAlertWithTitle()">显示带标题的提示</button>
    <CAlert ref="alert" />
  </view>
</template>

<script>
import CAlert from '@components/layout/alert';

export default {
  components: {
    CAlert
  },
  methods: {
    showAlertWithTitle() {
      this.$refs.alert.$alert({
        title: '提示',
        content: '这是一条提示信息'
      });
    }
  }
}
</script>
```

### 确认框用法

```html
<template>
  <view class="page">
    <button @tap="evt => showConfirm()">显示确认框</button>
    <CAlert 
      ref="alert" 
      :onConfirm="handleConfirm"
    />
  </view>
</template>

<script>
import CAlert from '@components/layout/alert';

export default {
  components: {
    CAlert
  },
  methods: {
    showConfirm() {
      this.$refs.alert.$confirm('是否确认此操作？');
    },
    handleConfirm() {
      console.log('用户点击了确认');
      // 执行确认操作
    }
  }
}
</script>
```

## 注意事项

1. 弹窗内容支持普通文本，不支持HTML结构
2. 使用确认框时，需要通过props传入`onConfirm`回调函数来响应用户的确认操作
3. 组件内部存在一个拼写错误，确认模式的变量名为`'comfirm'`而非`'confirm'`，但使用时仍应使用`$confirm`方法
4. 组件基于Taro UI的模态框，在样式上与Taro UI保持一致

<!-- 作者：Tevin -->