CAlert 弹窗

功能说明

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

引用方式

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)：点击"取消"或"确定"按钮后的回调函数

使用示例

基础提示框用法

<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>

带标题的提示框

<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>

确认框用法

<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保持一致