uniapp-dyckui 4.1.5 → 4.1.7

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

@@ -92,6 +92,10 @@ const showBasicToast = ref(false)
 | `customIcon` | `string` | `''` | 自定义图标字符 | - |
 | `large` | `boolean` | `false` | 是否为大尺寸模式 | `true/false` |
 | `customStyle` | `Record<string, any>` | `{}` | 自定义样式对象 | - |
+| `countdown` | `boolean` | `false` | 是否开启倒计时功能 | `true/false` |
+| `countdownSeconds` | `number` | `5` | 倒计时总时间（秒） | - |
+| `countdownParentheses` | `boolean` | `false` | 是否在倒计时数字外添加括号 | `true/false` |
+| `countdownSuffix` | `string` | `''` | 倒计时后追加的文字描述 | - |
 
 ### Emits 事件
 
@@ -221,6 +225,43 @@ const showBasicToast = ref(false)
   message="需要手动点击关闭"
   :duration="0"
 />
+
+<!-- 带倒计时的提示 -->
+<SwToast 
+  v-model="showCountdownToast"
+  message="倒计时提示"
+  countdown
+  :countdownSeconds="10"
+  :duration="10000"
+/>
+
+<!-- 带括号的倒计时 -->
+<SwToast 
+  v-model="showBracketCountdownToast"
+  message="倒计时提示"
+  countdown
+  countdownParentheses
+  :countdownSeconds="10"
+/>
+
+<!-- 带后缀的倒计时 -->
+<SwToast 
+  v-model="showSuffixCountdownToast"
+  message="自动返回"
+  countdown
+  :countdownSeconds="10"
+  countdownSuffix="后返回首页"
+/>
+
+<!-- 带括号和后缀的倒计时 -->
+<SwToast 
+  v-model="showBracketSuffixToast"
+  message=""
+  countdown
+  countdownParentheses
+  :countdownSeconds="10"
+  countdownSuffix="后返回首页"
+/> <!-- 显示效果：(10秒后返回首页) -->
 ```
 
 ### 完整示例
@@ -572,6 +613,12 @@ class ToastQueue {
 
 ## 📄 更新日志
 
+### v1.0.1 (2024-01-08)
+- ✨ 增强倒计时功能，支持括号显示和后缀文本
+- ✨ 实现duration与countdownSeconds的自动联动
+- ✨ 添加countdownParentheses参数，控制倒计时是否带括号
+- ✨ 添加countdownSuffix参数，支持倒计时后追加文本
+
 ### v1.0.0 (2024-01-01)
 - 🎉 初始版本发布
 - ✨ 支持四种提示类型

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

@@ -23,13 +23,14 @@
 
     <!-- 状态图标 -->
     <view v-else-if="showIcon" class="sw-toast__icon">
-      <text v-if="type === 'success'" class="sw-toast__icon--success">✓</text>
-      <text v-else-if="type === 'fail'" class="sw-toast__icon--fail">✗</text>
+      <text v-if="type === 'success'" class="sw-toast__icon--success iconfont icon-zhengqueshixin" />
+      <text v-else-if="type === 'fail'" class="sw-toast__icon--fail iconfont icon-shanchu" />
+      <text v-else-if="type === 'warning'" class="sw-toast__icon--warning iconfont icon-jurassic_warn" />
       <text v-else-if="customIcon" class="sw-toast__custom-icon">{{ customIcon }}</text>
     </view>
 
     <!-- 文本内容 -->
-    <text v-if="message" class="sw-toast__text">{{ message }}</text>
+    <text v-if="displayMessage" class="sw-toast__text" :class="{ 'sw-toast__text--long': longText }">{{ displayMessage }}</text>
   </view>
 </template>
 
@@ -45,7 +46,7 @@ interface Props {
   /**
    * 提示类型
    */
-  type?: 'text' | 'loading' | 'success' | 'fail'
+  type?: 'text' | 'loading' | 'success' | 'fail' | 'warning'
   /**
    * 显示位置
    */
@@ -78,6 +79,26 @@ interface Props {
    * 自定义样式
    */
   customStyle?: Record<string, any>
+  /**
+   * 是否开启倒计时功能
+   */
+  countdown?: boolean
+  /**
+   * 倒计时总时间（秒）
+   */
+  countdownSeconds?: number
+  /**
+   * 是否在倒计时数字外添加括号
+   */
+  countdownParentheses?: boolean
+  /**
+   * 倒计时后追加的文字描述
+   */
+  countdownSuffix?: string
+  /**
+   * 是否开启长文本模式（允许换行）
+   */
+  longText?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -91,6 +112,11 @@ const props = withDefaults(defineProps<Props>(), {
   customIcon: '',
   large: false,
   customStyle: () => ({}),
+  countdown: false,
+  countdownSeconds: 5,
+  countdownParentheses: false,
+  countdownSuffix: '',
+  longText: false,
 })
 
 // Emits
@@ -112,10 +138,13 @@ const emit = defineEmits<{
 // Refs
 const toastRef = ref<any>(null)
 let timer: number | null | ReturnType<typeof setTimeout> = null
+let countdownTimer: number | null | ReturnType<typeof setInterval> = null
 
 // 内部状态
 const showToast = ref(props.modelValue)
 const isClosing = ref(false)
+const currentCountdown = ref(props.countdownSeconds)
+const originalMessage = ref(props.message)
 
 // 计算是否需要显示图标
 const showIcon = computed(() => {
@@ -126,6 +155,24 @@ const showIcon = computed(() => {
   return true
 })
 
+// 计算实际显示的消息（包含倒计时）
+const displayMessage = computed(() => {
+  if (props.countdown && showToast.value) {
+    // 构建倒计时部分
+    let countdownPart = ''
+    if (props.countdownParentheses) {
+      // 带括号的倒计时格式：(10秒后返回首页)
+      countdownPart = `(${currentCountdown.value}秒${props.countdownSuffix})`
+    }
+    else {
+      // 不带括号的倒计时格式：10秒后返回首页
+      countdownPart = `${currentCountdown.value}秒${props.countdownSuffix}`
+    }
+    return `${originalMessage.value || ''} ${countdownPart}`
+  }
+  return props.message
+})
+
 // 点击事件处理
 function onClick() {
   emit('click')
@@ -136,6 +183,8 @@ function close() {
   if (!showToast.value)
     return
 
+  // 清除倒计时定时器
+  clearCountdownTimer()
   // 添加关闭动画
   isClosing.value = true
   emit('close')
@@ -146,10 +195,13 @@ function startTimer() {
   // 清除之前的定时器
   clearTimer()
 
-  if (props.duration > 0 && !props.loading) {
+  // 计算实际使用的duration：如果开启倒计时且countdownSeconds>0，则使用countdownSeconds*1000，否则使用props.duration
+  const actualDuration = props.countdown && props.countdownSeconds > 0 ? props.countdownSeconds * 1000 : props.duration
+
+  if (actualDuration > 0 && !props.loading) {
     timer = setTimeout(() => {
       close()
-    }, props.duration)
+    }, actualDuration)
   }
 }
 
@@ -161,6 +213,38 @@ function clearTimer() {
   }
 }
 
+// 开始倒计时
+function startCountdown() {
+  // 清除之前的倒计时定时器
+  clearCountdownTimer()
+
+  if (props.countdown && props.countdownSeconds > 0) {
+    currentCountdown.value = props.countdownSeconds
+    originalMessage.value = props.message
+
+    countdownTimer = setInterval(() => {
+      currentCountdown.value--
+      if (currentCountdown.value <= 0) {
+        clearCountdownTimer()
+        // 如果开启了自动关闭，倒计时结束后关闭Toast
+        if (props.duration > 0) {
+          close()
+        }
+      }
+    }, 1000)
+  }
+}
+
+// 清除倒计时定时器
+function clearCountdownTimer() {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+  // 重置当前倒计时
+  currentCountdown.value = props.countdownSeconds
+}
+
 // 过渡结束处理
 function handleTransitionEnd() {
   if (isClosing.value) {
@@ -177,6 +261,10 @@ watch(() => props.modelValue, (newVal) => {
     showToast.value = true
     isClosing.value = false
     startTimer()
+    // 如果开启了倒计时，开始倒计时
+    if (props.countdown) {
+      startCountdown()
+    }
   }
   else {
     // 隐藏Toast
@@ -188,6 +276,20 @@ watch(() => props.modelValue, (newVal) => {
 watch(() => props.message, () => {
   if (showToast.value && !props.loading) {
     startTimer()
+    // 如果开启了倒计时，更新原始消息
+    if (props.countdown) {
+      originalMessage.value = props.message
+    }
+  }
+})
+
+// 监听countdown或countdownSeconds变化，重新开始倒计时
+watch([() => props.countdown, () => props.countdownSeconds], () => {
+  if (showToast.value && props.countdown) {
+    startCountdown()
+  }
+  else {
+    clearCountdownTimer()
   }
 })
 
@@ -195,11 +297,16 @@ watch(() => props.message, () => {
 onMounted(() => {
   if (props.modelValue) {
     startTimer()
+    // 如果开启了倒计时，开始倒计时
+    if (props.countdown) {
+      startCountdown()
+    }
   }
 })
 
 onUnmounted(() => {
   clearTimer()
+  clearCountdownTimer()
 })
 
 // 暴露方法
@@ -216,11 +323,10 @@ defineExpose({
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  max-width: 80%;
-  padding: 20rpx 32rpx;
-  border-radius: 8rpx;
+  padding: 24rpx 40rpx;
+  border-radius: 12rpx;
   font-size: 28rpx;
-  line-height: 40rpx;
+  line-height: 80rpx;
   color: #fff;
   background-color: rgba(0, 0, 0, 0.7);
   box-sizing: border-box;
@@ -229,12 +335,11 @@ defineExpose({
   position: fixed;
   left: 50%;
   transform: translateX(-50%) translateY(0);
-  word-wrap: break-word;
-  white-space: pre-wrap;
   user-select: none;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  border: 2rpx solid rgba(255, 255, 255, 0.2);
 }
 
 /* 显示动画 */
@@ -282,12 +387,52 @@ defineExpose({
   background-color: rgba(0, 0, 0, 0.7);
 }
 
+.iconfont {
+  font-size: 40rpx;
+  vertical-align: middle;
+}
 .sw-toast--success {
-  background-color: #67c23a;
+  background-color: rgba(240, 249, 235, 1);
+  height: 80rpx;
+  border-width: 0rpx;
+  border-radius: 12rpx;
+  border-width: 2rpx;
+  border-style: solid;
+  box-sizing: border-box;
+  text-align: left;
+  font-size: 28rpx;
+  color: #67c23a;
+  border-color: rgba(227, 244, 218, 1);
 }
 
 .sw-toast--fail {
-  background-color: #f56c6c;
+  background-color: #f5222d;
+  border-width: 0rpx;
+  background-color: rgba(254, 240, 240, 1);
+  box-sizing: border-box;
+  border-width: 2rpx;
+  border-style: solid;
+  border-color: rgba(253, 226, 226, 1);
+  border-radius: 12rpx;
+  height: 80rpx;
+  display: flex;
+  text-align: left;
+  font-size: 28rpx;
+  color: #f56c6c;
+}
+
+.sw-toast--warning {
+  background-color: rgba(253, 246, 236, 1);
+  height: 80rpx;
+  border-width: 0rpx;
+  border-radius: 12rpx;
+  border-width: 2rpx;
+  border-style: solid;
+  box-sizing: border-box;
+  text-align: left;
+  font-size: 28rpx;
+  color: #e6a23c;
+  border-color: rgba(255, 236, 208, 1);
 }
 
 /* 大尺寸样式 */
@@ -323,20 +468,32 @@ defineExpose({
   margin-right: 16rpx;
 
   &--success,
-  &--fail {
+  &--fail,
+  &--warning {
     display: inline-block;
     width: 40rpx;
     height: 40rpx;
-    font-size: 40rpx;
+    font-size: 32rpx;
     font-weight: bold;
+    text-align: center;
+    line-height: 40rpx;
   }
 }
 
 /* 文本内容 */
 .sw-toast__text {
   margin: 0;
+  white-space: nowrap;
+  width: auto;
+}
+
+/* 长文本模式样式 */
+.sw-toast__text--long {
   word-wrap: break-word;
+  overflow-wrap: break-word;
   white-space: pre-wrap;
+  width: 100%;
+  word-break: break-all;
 }
 
 /* 加载动画 */
@@ -347,26 +504,24 @@ defineExpose({
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
-  .sw-toast {
-    max-width: 90%;
-    padding: 16rpx 24rpx;
-    font-size: 26rpx;
-    line-height: 36rpx;
-  }
+.sw-toast {
+  max-width: 100%;
+  padding: 16rpx 24rpx;
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
 
-  .sw-toast--large {
-    padding: 24rpx 40rpx;
-    font-size: 30rpx;
-    line-height: 44rpx;
-  }
+.sw-toast--large {
+  padding: 24rpx 40rpx;
+  font-size: 30rpx;
+  line-height: 44rpx;
+}
 
-  .sw-toast--top {
-    top: 60rpx;
-  }
+.sw-toast--top {
+  top: 60rpx;
+}
 
-  .sw-toast--bottom {
-    bottom: 60rpx;
-  }
+.sw-toast--bottom {
+  bottom: 60rpx;
 }
 </style>