uniapp-dyckui 4.1.1

package/src/components/MyComs/Toast/README.md

@@ -0,0 +1,604 @@
+# 轻提示组件 (SwToast)
+
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Vue](https://img.shields.io/badge/Vue-3.x-green.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
+[![UniApp](https://img.shields.io/badge/UniApp-3.x-orange.svg)](https://uniapp.dcloud.net.cn/)
+
+## 📋 目录
+
+- [组件介绍](#组件介绍)
+- [主要特性](#主要特性)
+- [适用场景](#适用场景)
+- [安装使用](#安装使用)
+- [API文档](#api文档)
+- [使用示例](#使用示例)
+- [高级用法](#高级用法)
+- [最佳实践](#最佳实践)
+- [常见问题](#常见问题)
+- [浏览器兼容性](#浏览器兼容性)
+
+## 🌟 组件介绍
+
+SwToast 是一个功能强大、高度可定制的移动端轻提示组件，专为 uni-app 框架设计。该组件支持多种提示类型、位置和样式，提供了丰富的交互功能和优秀的用户体验。
+
+### 主要特性
+
+- ✨ **多种提示类型**：支持文字、加载、成功、失败四种提示类型
+- 📍 **灵活位置**：支持顶部、中部、底部三种显示位置
+- ⏱️ **智能控制**：可配置自动关闭时间，支持手动控制
+- 🎨 **样式定制**：支持自定义样式、图标和尺寸
+- 🎭 **动画效果**：流畅的显示和隐藏动画
+- 📱 **响应式设计**：完美适配不同屏幕尺寸
+- 🔧 **TypeScript支持**：完整的类型定义
+- ⚡ **高性能**：轻量级实现，零依赖
+
+### 适用场景
+
+- **操作反馈**：用户操作后的成功或失败提示
+- **加载状态**：异步操作进行中的状态提示
+- **信息通知**：重要信息的临时展示
+- **引导提示**：帮助用户理解应用功能
+- **状态监控**：实时状态变化的反馈
+
+## 🚀 安装使用
+
+### 1. 组件引入
+
+```typescript
+// 全局引入（推荐）
+import SwToast from '@/components/MyComs/Toast/index.vue'
+
+// 在页面中引入
+import { ref } from 'vue'
+import SwToast from '@/components/MyComs/Toast/index.vue'
+```
+
+### 2. 基础用法
+
+```vue
+<template>
+  <view class="container">
+    <button @click="showBasicToast = true">显示提示</button>
+    
+    <SwToast 
+      v-model="showBasicToast" 
+      message="操作成功" 
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SwToast from '@/components/MyComs/Toast/index.vue'
+
+const showBasicToast = ref(false)
+</script>
+```
+
+## 📖 API文档
+
+### Props 参数
+
+| 参数名 | 类型 | 默认值 | 说明 | 可选值 |
+|--------|------|--------|------|--------|
+| `modelValue` | `boolean` | `false` | 控制显示/隐藏（支持v-model） | `true/false` |
+| `type` | `'text' \| 'loading' \| 'success' \| 'fail'` | `'text'` | 提示类型 | `text/loading/success/fail` |
+| `position` | `'top' \| 'middle' \| 'bottom'` | `'middle'` | 显示位置 | `top/middle/bottom` |
+| `message` | `string` | `''` | 提示文字内容 | - |
+| `duration` | `number` | `3000` | 自动关闭时间（毫秒），0表示不自动关闭 | - |
+| `loading` | `boolean` | `false` | 是否显示加载图标 | `true/false` |
+| `icon` | `boolean` | `true` | 是否显示图标 | `true/false` |
+| `customIcon` | `string` | `''` | 自定义图标字符 | - |
+| `large` | `boolean` | `false` | 是否为大尺寸模式 | `true/false` |
+| `customStyle` | `Record<string, any>` | `{}` | 自定义样式对象 | - |
+
+### Emits 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `update:modelValue` | 显示状态变化时触发 | `value: boolean` - 新的显示状态 |
+| `close` | Toast关闭时触发 | - |
+| `click` | Toast被点击时触发 | - |
+
+### Methods 方法
+
+| 方法名 | 说明 |
+|--------|------|
+| `close()` | 手动关闭Toast |
+
+## 💡 使用示例
+
+### 基础用法
+
+#### 文字提示
+```vue
+<SwToast 
+  v-model="showTextToast"
+  type="text"
+  message="这是一个文字提示"
+/>
+```
+
+#### 加载提示
+```vue
+<SwToast 
+  v-model="showLoadingToast"
+  type="loading"
+  message="正在加载中..."
+/>
+```
+
+#### 状态提示
+```vue
+<!-- 成功提示 -->
+<SwToast 
+  v-model="showSuccessToast"
+  type="success"
+  message="操作成功！"
+/>
+
+<!-- 失败提示 -->
+<SwToast 
+  v-model="showFailToast"
+  type="fail"
+  message="操作失败，请重试"
+/>
+```
+
+### 高级用法
+
+#### 位置控制
+```vue
+<!-- 顶部提示 -->
+<SwToast 
+  v-model="showTopToast"
+  position="top"
+  message="顶部提示信息"
+/>
+
+<!-- 中部提示 -->
+<SwToast 
+  v-model="showMiddleToast"
+  position="middle"
+  message="中部提示信息"
+/>
+
+<!-- 底部提示 -->
+<SwToast 
+  v-model="showBottomToast"
+  position="bottom"
+  message="底部提示信息"
+/>
+```
+
+#### 自定义样式
+```vue
+<!-- 自定义背景色 -->
+<SwToast 
+  v-model="showCustomToast"
+  message="自定义样式"
+  :customStyle="{ 
+    backgroundColor: '#e6a23c',
+    color: '#fff'
+  }"
+/>
+
+<!-- 自定义图标 -->
+<SwToast 
+  v-model="showCustomIconToast"
+  message="自定义图标"
+  custom-icon="⚠️"
+/>
+
+<!-- 大尺寸模式 -->
+<SwToast 
+  v-model="showLargeToast"
+  message="大号提示"
+  large
+/>
+```
+
+#### 时间控制
+```vue
+<!-- 快速关闭 -->
+<SwToast 
+  v-model="showQuickToast"
+  message="1秒后自动关闭"
+  :duration="1000"
+/>
+
+<!-- 长时间显示 -->
+<SwToast 
+  v-model="showLongToast"
+  message="5秒后自动关闭"
+  :duration="5000"
+/>
+
+<!-- 手动关闭 -->
+<SwToast 
+  v-model="showManualToast"
+  message="需要手动点击关闭"
+  :duration="0"
+/>
+```
+
+### 完整示例
+
+```vue
+<template>
+  <view class="demo-container">
+    <!-- 操作按钮 -->
+    <view class="button-group">
+      <button @click="showSuccess">成功提示</button>
+      <button @click="showError">错误提示</button>
+      <button @click="showLoading">加载提示</button>
+      <button @click="showCustom">自定义提示</button>
+    </view>
+    
+    <!-- Toast组件 -->
+    <SwToast 
+      v-model="showToast"
+      :type="toastType"
+      :message="toastMessage"
+      :position="toastPosition"
+      :duration="toastDuration"
+      :customStyle="customStyle"
+      :customIcon="customIcon"
+      @close="onToastClose"
+      @click="onToastClick"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SwToast from '@/components/MyComs/Toast/index.vue'
+
+// Toast控制状态
+const showToast = ref(false)
+const toastType = ref<'text' | 'loading' | 'success' | 'fail'>('text')
+const toastMessage = ref('')
+const toastPosition = ref<'top' | 'middle' | 'bottom'>('middle')
+const toastDuration = ref(3000)
+const customStyle = ref({})
+const customIcon = ref('')
+
+// 显示不同类型的Toast
+const showSuccess = () => {
+  toastType.value = 'success'
+  toastMessage.value = '操作成功！'
+  showToast.value = true
+}
+
+const showError = () => {
+  toastType.value = 'fail'
+  toastMessage.value = '操作失败，请重试'
+  showToast.value = true
+}
+
+const showLoading = () => {
+  toastType.value = 'loading'
+  toastMessage.value = '正在处理中...'
+  toastDuration.value = 0 // 加载提示不自动关闭
+  showToast.value = true
+  
+  // 模拟异步操作
+  setTimeout(() => {
+    showToast.value = false
+    toastDuration.value = 3000 // 重置默认值
+  }, 2000)
+}
+
+const showCustom = () => {
+  toastType.value = 'text'
+  toastMessage.value = '自定义样式提示'
+  toastPosition.value = 'bottom'
+  customStyle.value = {
+    backgroundColor: '#ff6b6b',
+    color: '#fff',
+    borderRadius: '12rpx'
+  }
+  customIcon.value = '🎯'
+  showToast.value = true
+}
+
+// 事件处理
+const onToastClose = () => {
+  console.log('Toast已关闭')
+  // 清理自定义样式
+  customStyle.value = {}
+  customIcon.value = ''
+}
+
+const onToastClick = () => {
+  console.log('Toast被点击')
+}
+</script>
+```
+
+## 🛠️ 高级用法
+
+### 组合使用模式
+
+```typescript
+// 创建Toast服务
+class ToastService {
+  private static instance: ToastService
+  private toastRef = ref<any>(null)
+
+  static getInstance() {
+    if (!ToastService.instance) {
+      ToastService.instance = new ToastService()
+    }
+    return ToastService.instance
+  }
+
+  show(options: ToastOptions) {
+    if (this.toastRef.value) {
+      Object.assign(this.toastRef.value, options, { show: true })
+    }
+  }
+
+  success(message: string, duration = 3000) {
+    this.show({ type: 'success', message, duration })
+  }
+
+  error(message: string, duration = 3000) {
+    this.show({ type: 'fail', message, duration })
+  }
+
+  loading(message = '加载中...') {
+    this.show({ type: 'loading', message, duration: 0 })
+  }
+
+  hide() {
+    if (this.toastRef.value) {
+      this.toastRef.value.show = false
+    }
+  }
+}
+
+// 使用示例
+const toast = ToastService.getInstance()
+
+// 在组件中使用
+toast.success('操作成功！')
+toast.error('操作失败')
+toast.loading('正在处理...')
+```
+
+### 与网络请求结合
+
+```typescript
+// 请求拦截器中使用
+import { alova } from '@/http/alova'
+
+alova.interceptor.request((config) => {
+  // 显示加载提示
+  showLoadingToast.value = true
+  return config
+})
+
+alova.interceptor.response((response) => {
+  // 隐藏加载提示
+  showLoadingToast.value = false
+  
+  if (response.success) {
+    showSuccessToast.value = true
+  } else {
+    showFailToast.value = true
+  }
+  
+  return response
+})
+```
+
+## 📋 最佳实践
+
+### 1. 提示文案规范
+
+- **简洁明了**：使用简短、准确的文案
+- **积极语言**：优先使用积极、正面的表述
+- **一致性**：保持同类操作提示的一致性
+- **可操作性**：提供明确的操作建议
+
+```typescript
+// ✅ 推荐
+const successMessages = [
+  '保存成功',
+  '删除成功',
+  '操作成功'
+]
+
+const errorMessages = [
+  '保存失败，请重试',
+  '网络异常，请检查网络连接',
+  '参数错误，请检查输入'
+]
+
+// ❌ 不推荐
+const badMessages = [
+  '出错了',
+  '失败',
+  '有问题'
+]
+```
+
+### 2. 时间控制建议
+
+```typescript
+// 不同场景的建议时长
+const durationConfig = {
+  success: 2000,    // 成功提示：2秒
+  error: 4000,      // 错误提示：4秒
+  warning: 3000,    // 警告提示：3秒
+  info: 3000,       // 信息提示：3秒
+  loading: 0        // 加载提示：不自动关闭
+}
+```
+
+### 3. 位置选择建议
+
+```typescript
+// 不同场景的位置建议
+const positionConfig = {
+  success: 'middle',      // 成功提示：居中显示
+  error: 'middle',        // 错误提示：居中显示
+  warning: 'top',         // 警告提示：顶部显示
+  info: 'bottom',         // 信息提示：底部显示
+  loading: 'middle'       // 加载提示：居中显示
+}
+```
+
+### 4. 性能优化
+
+```typescript
+// 使用防抖处理频繁操作
+import { debounce } from '@/utils/debounce'
+
+const showToastDebounced = debounce((message: string) => {
+  showToast.value = true
+  toastMessage.value = message
+}, 300)
+
+// 在事件中使用
+const handleInput = (value: string) => {
+  if (error) {
+    showToastDebounced(error)
+  }
+}
+```
+
+## ❓ 常见问题
+
+### Q: Toast不显示怎么办？
+
+A: 检查以下几点：
+1. 确保 `modelValue` 为 `true`
+2. 检查 `message` 是否有内容
+3. 确认组件已正确引入
+4. 检查样式是否被其他元素遮挡
+
+### Q: 加载提示不自动关闭？
+
+A: 这是正常行为，加载提示需要手动关闭或调用接口完成：
+```typescript
+// 方法1：手动关闭
+<SwToast 
+  v-model="showLoading"
+  type="loading"
+  message="加载中..."
+/>
+
+// 手动控制
+function handleLoading() {
+  showLoading.value = false
+}
+
+// 方法2：通过duration控制
+<SwToast 
+  :modelValue="showLoading"
+  type="loading"
+  message="加载中..."
+  :duration="5000" // 5秒后自动关闭
+/>
+```
+
+### Q: 如何自定义样式？
+
+A: 使用 `customStyle` 属性：
+```vue
+<SwToast 
+  v-model="showCustom"
+  message="自定义样式"
+  :customStyle="{
+    backgroundColor: '#ff6b6b',
+    color: '#fff',
+    fontSize: '32rpx',
+    borderRadius: '12rpx',
+    padding: '20rpx 40rpx'
+  }"
+/>
+```
+
+### Q: 多个Toast同时显示怎么办？
+
+A: 建议使用队列管理：
+```typescript
+class ToastQueue {
+  private queue: ToastItem[] = []
+  private showing = false
+
+  add(item: ToastItem) {
+    this.queue.push(item)
+    this.showNext()
+  }
+
+  private showNext() {
+    if (this.showing || this.queue.length === 0) return
+    
+    this.showing = true
+    const item = this.queue.shift()!
+    
+    // 显示Toast
+    showToast.value = true
+    // ... 其他逻辑
+    
+    // 监听关闭事件
+    const unwatch = watch(() => showToast.value, (val) => {
+      if (!val) {
+        this.showing = false
+        unwatch()
+        setTimeout(() => this.showNext(), 100)
+      }
+    })
+  }
+}
+```
+
+## 🌐 浏览器兼容性
+
+| 浏览器 | 最低版本 | 状态 |
+|--------|----------|------|
+| iOS Safari | 9.0+ | ✅ 完全支持 |
+| Android Browser | 4.4+ | ✅ 完全支持 |
+| Chrome | 45+ | ✅ 完全支持 |
+| Firefox | 40+ | ✅ 完全支持 |
+| Edge | 15+ | ✅ 完全支持 |
+| 微信小程序 | 最新版 | ✅ 完全支持 |
+| 支付宝小程序 | 最新版 | ✅ 完全支持 |
+| H5 | - | ✅ 完全支持 |
+
+## 📄 更新日志
+
+### v1.0.0 (2024-01-01)
+- 🎉 初始版本发布
+- ✨ 支持四种提示类型
+- ✨ 支持三种显示位置
+- ✨ 支持自定义样式和图标
+- ✨ 完整的TypeScript类型定义
+
+### v1.1.0 (计划中)
+- 🔄 添加更多动画效果
+- 🔄 支持批量Toast管理
+- 🔄 添加Toast队列功能
+- 🔄 优化性能表现
+
+## 📞 支持与反馈
+
+如果您在使用过程中遇到问题或有改进建议，欢迎通过以下方式联系：
+
+- 📧 邮箱：support@example.com
+- 🐛 问题反馈：[GitHub Issues](https://github.com/example/toast/issues)
+- 📖 文档反馈：[GitHub Wiki](https://github.com/example/toast/wiki)
+
+---
+
+<div align="center">
+
+**[⬆ 回到顶部](#轻提示组件-swtoast)**
+
+Made with ❤️ by Sw Team
+
+</div>

package/src/components/MyComs/Toast/index.ts

@@ -0,0 +1,2 @@
+import Component from './index.vue';
+export default Component;