From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/layout.doc/alert.doc/CAlert.doc.md | 129 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 129 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/alert.doc/CAlert.doc.md b/_cursor.ai/layout.doc/alert.doc/CAlert.doc.md
new file mode 100644
index 0000000..0e83f04
--- /dev/null
+++ b/_cursor.ai/layout.doc/alert.doc/CAlert.doc.md
@@ -0,0 +1,129 @@
+# 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 -->
\ No newline at end of file
--
Gitblit v1.9.1