uniapp-dyckui 4.1.6 → 4.1.8

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

@@ -1,160 +1,218 @@
-# Dialog 弹窗组件
-
-## 组件名称
-Dialog 弹窗组件
-
-## 详细功能描述
-该组件是一个移动端H5页面的弹窗组件，主要用于展示提示信息并提供用户交互按钮。组件支持三种类型的弹窗，具有统一的视觉风格和动画效果。
-
-## 主要功能类型
-1. **取消和打开app** - 提供取消和打开app两个按钮
-2. **知道了** - 提供单个确认按钮
-3. **取消和继续访问** - 提供取消和继续访问两个按钮
-
-## 组件结构
-- **上部分**：居中显示图标、提示标题和说明文字
-- **下部分**：根据弹窗类型显示不同的按钮组合
-- **背景**：采用assets/u2.png作为背景图
-- **样式**：弹窗圆角、上下部分用灰色分割线分隔
-- **动画**：采用缩放动画形式，居中显示
-
-## 属性参数
-
-| 参数名 | 类型 | 默认值 | 说明 |
-| ------ | ---- | ------ | ---- |
-| modelValue | Boolean | false | 控制弹窗显示/隐藏（支持v-model） |
-| type | String | 'confirm' | 弹窗类型：open-app(取消和打开app), confirm(知道了), continue(取消和继续访问) |
-| title | String | '' | 弹窗标题 |
-| description | String | '' | 弹窗说明文字 |
-| icon | String | '' | 图标路径 |
-| mask | Boolean | true | 是否显示遮罩层 |
-| maskOpacity | Number | 0.5 | 遮罩层透明度（0-1） |
-| closeOnMaskClick | Boolean | true | 点击遮罩是否关闭弹窗 |
-
-## 事件回调
-
-| 事件名 | 说明 |
-| ------ | ---- |
-| update:modelValue | v-model双向绑定事件 |
-| confirm | 点击确认按钮（知道了/打开app/继续访问）时触发 |
-| cancel | 点击取消按钮时触发 |
-
-## 使用示例代码片段
-
-### 基本使用
-```vue
-<template>
-  <button @click="showDialog = true">打开弹窗</button>
-  
-  <Dialog v-model="showDialog" title="提示" description="这是一个提示信息">
-  </Dialog>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Dialog from '@/components/MyComs/Dialog/index.vue'
-
-const showDialog = ref(false)
-</script>
-```
-
-### 类型1: 取消和打开app
-```vue
-<template>
-  <button @click="showOpenAppDialog = true">打开app弹窗</button>
-  
-  <Dialog 
-    v-model="showOpenAppDialog" 
-    type="open-app" 
-    title="打开app" 
-    description="建议您使用app进行操作，体验更佳"
-    @confirm="handleOpenApp"
-    @cancel="handleCancel"
-  >
-  </Dialog>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Dialog from '@/components/MyComs/Dialog/index.vue'
-
-const showOpenAppDialog = ref(false)
-
-const handleOpenApp = () => {
-  console.log('打开app')
-  // 打开app的逻辑
-}
-
-const handleCancel = () => {
-  console.log('取消')
-}
-</script>
-```
-
-### 类型2: 知道了
-```vue
-<template>
-  <button @click="showConfirmDialog = true">打开知道了弹窗</button>
-  
-  <Dialog 
-    v-model="showConfirmDialog" 
-    type="confirm" 
-    title="提示" 
-    description="您的操作已完成"
-    @confirm="handleConfirm"
-  >
-  </Dialog>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Dialog from '@/components/MyComs/Dialog/index.vue'
-
-const showConfirmDialog = ref(false)
-
-const handleConfirm = () => {
-  console.log('知道了')
-}
-</script>
-```
-
-### 类型3: 取消和继续访问
-```vue
-<template>
-  <button @click="showContinueDialog = true">打开继续访问弹窗</button>
-  
-  <Dialog 
-    v-model="showContinueDialog" 
-    type="continue" 
-    title="提示" 
-    description="您即将离开当前页面，确定要继续访问吗？"
-    @confirm="handleContinue"
-    @cancel="handleCancel"
-  >
-  </Dialog>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Dialog from '@/components/MyComs/Dialog/index.vue'
-
-const showContinueDialog = ref(false)
-
-const handleContinue = () => {
-  console.log('继续访问')
-  // 继续访问的逻辑
-}
-
-const handleCancel = () => {
-  console.log('取消')
-}
-</script>
-```
-
-## 注意事项
-1. 确保在使用v-model时正确绑定布尔值来控制弹窗的显示和隐藏
-2. 根据需要选择合适的弹窗类型
-3. 可以自定义图标路径，若不提供则显示默认图标
-4. 背景图采用assets/u2.png，确保该图片存在
-5. 弹窗使用缩放动画，提供流畅的视觉体验
+# Dialog 弹窗组件
+
+## 组件名称
+Dialog 弹窗组件
+
+## 详细功能描述
+该组件是一个移动端H5页面的弹窗组件，主要用于展示提示信息并提供用户交互按钮。组件支持三种类型的弹窗，具有统一的视觉风格和动画效果。
+
+## 主要功能类型
+1. **取消和打开app** - 提供取消和打开app两个按钮
+2. **知道了** - 提供单个确认按钮
+3. **取消和继续访问** - 提供取消和继续访问两个按钮
+
+## 组件结构
+- **上部分**：居中显示图标、提示标题和说明文字
+- **下部分**：根据弹窗类型显示不同的按钮组合
+- **背景**：采用assets/u2.png作为背景图
+- **样式**：弹窗圆角、上下部分用灰色分割线分隔
+- **动画**：采用缩放动画形式，居中显示
+
+## 属性参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+| ------ | ---- | ------ | ---- |
+| modelValue | Boolean | false | 控制弹窗显示/隐藏（支持v-model） |
+| type | String | 'confirm' | 弹窗类型：open-app(取消和打开app), confirm(知道了), continue(取消和继续访问) |
+| title | String | '' | 弹窗标题 |
+| description | String | '' | 弹窗说明文字 |
+| icon | String | '' | 图标路径 |
+| iconType | String | '' | 图标类型：phone、screen、links、links2 |
+| customIcon | String | '' | 自定义字体图标 |
+| mask | Boolean | true | 是否显示遮罩层 |
+| maskOpacity | Number | 0.5 | 遮罩层透明度（0-1） |
+| closeOnMaskClick | Boolean | true | 点击遮罩是否关闭弹窗 |
+
+## 插槽
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| icon | 自定义图标插槽，用于完全自定义弹窗图标 |
+
+## 事件回调
+
+| 事件名 | 说明 |
+| ------ | ---- |
+| update:modelValue | v-model双向绑定事件 |
+| confirm | 点击确认按钮（知道了/打开app/继续访问）时触发 |
+| cancel | 点击取消按钮时触发 |
+
+## 使用示例代码片段
+
+### 基本使用
+```vue
+<template>
+  <button @click="showDialog = true">打开弹窗</button>
+  
+  <Dialog v-model="showDialog" title="提示" description="这是一个提示信息">
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showDialog = ref(false)
+</script>
+```
+
+### 类型1: 取消和打开app
+```vue
+<template>
+  <button @click="showOpenAppDialog = true">打开app弹窗</button>
+  
+  <Dialog 
+    v-model="showOpenAppDialog" 
+    type="open-app" 
+    title="打开app" 
+    description="建议您使用app进行操作，体验更佳"
+    @confirm="handleOpenApp"
+    @cancel="handleCancel"
+  >
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showOpenAppDialog = ref(false)
+
+const handleOpenApp = () => {
+  console.log('打开app')
+  // 打开app的逻辑
+}
+
+const handleCancel = () => {
+  console.log('取消')
+}
+</script>
+```
+
+### 类型2: 知道了
+```vue
+<template>
+  <button @click="showConfirmDialog = true">打开知道了弹窗</button>
+  
+  <Dialog 
+    v-model="showConfirmDialog" 
+    type="confirm" 
+    title="提示" 
+    description="您的操作已完成"
+    @confirm="handleConfirm"
+  >
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showConfirmDialog = ref(false)
+
+const handleConfirm = () => {
+  console.log('知道了')
+}
+</script>
+```
+
+### 类型3: 取消和继续访问
+```vue
+<template>
+  <button @click="showContinueDialog = true">打开继续访问弹窗</button>
+  
+  <Dialog 
+    v-model="showContinueDialog" 
+    type="continue" 
+    title="提示" 
+    description="您即将离开当前页面，确定要继续访问吗？"
+    @confirm="handleContinue"
+    @cancel="handleCancel"
+  >
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showContinueDialog = ref(false)
+
+const handleContinue = () => {
+  console.log('继续访问')
+  // 继续访问的逻辑
+}
+
+const handleCancel = () => {
+  console.log('取消')
+}
+</script>
+```
+
+### 使用自定义插槽
+```vue
+<template>
+  <button @click="showContinueDialog = true">打开继续访问弹窗</button>
+  
+  <Dialog 
+    v-model="showContinueDialog" 
+    type="continue" 
+    title="提示" 
+    description="您即将离开当前页面，确定要继续访问吗？"
+    @confirm="handleContinue"
+    @cancel="handleCancel"
+  >
+    <!-- 使用自定义插槽完全自定义图标 -->
+    <template #icon>
+      <text class="iconfont dialog-button-primary icon-xianshiqi1" />
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showContinueDialog = ref(false)
+
+const handleContinue = () => {
+  console.log('继续访问')
+  // 继续访问的逻辑
+}
+
+const handleCancel = () => {
+  console.log('取消')
+}
+</script>
+
+<style scoped>
+/* 自定义插槽图标的样式 */
+.icon-xianshiqi1 {
+  width: 120rpx;
+  height: 120rpx;
+  font-size: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #00599c;
+}
+</style>
+```
+
+## 注意事项
+1. 确保在使用v-model时正确绑定布尔值来控制弹窗的显示和隐藏
+2. 根据需要选择合适的弹窗类型
+3. 可以自定义图标路径，若不提供则显示默认图标
+4. 背景图采用assets/u2.png，确保该图片存在
+5. 弹窗使用缩放动画，提供流畅的视觉体验
 6. 弹窗居中显示，适配不同屏幕尺寸