uniapp-dyckui 4.1.3 → 4.1.4

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

@@ -1,372 +1,373 @@
-<template>
-  <view
-    v-show="showToast"
-    ref="toastRef"
-    class="sw-toast"
-    :class="[
-      `sw-toast--${type}`,
-      `sw-toast--${position}`,
-      { 'sw-toast--large': large },
-      { 'sw-toast--text': !showIcon && type === 'text' },
-      { 'sw-toast--show': showToast && !isClosing },
-      { 'sw-toast--hide': showToast && isClosing },
-    ]"
-    :style="customStyle"
-    @click="onClick"
-    @transitionend="handleTransitionEnd"
-  >
-    <!-- 加载图标 -->
-    <view v-if="loading" class="sw-toast__loading">
-      <text v-if="!customIcon" class="sw-toast__spinner" />
-      <text v-else class="sw-toast__custom-icon">{{ customIcon }}</text>
-    </view>
-
-    <!-- 状态图标 -->
-    <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-else-if="customIcon" class="sw-toast__custom-icon">{{ customIcon }}</text>
-    </view>
-
-    <!-- 文本内容 -->
-    <text v-if="message" class="sw-toast__text">{{ message }}</text>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch, withDefaults } from 'vue'
-
-// Props
-interface Props {
-  /**
-   * 控制显示/隐藏（支持v-model）
-   */
-  modelValue?: boolean
-  /**
-   * 提示类型
-   */
-  type?: 'text' | 'loading' | 'success' | 'fail'
-  /**
-   * 显示位置
-   */
-  position?: 'top' | 'middle' | 'bottom'
-  /**
-   * 提示文字
-   */
-  message?: string
-  /**
-   * 自动关闭时间（毫秒），0表示不会自动关闭
-   */
-  duration?: number
-  /**
-   * 是否显示加载图标
-   */
-  loading?: boolean
-  /**
-   * 是否显示图标
-   */
-  icon?: boolean
-  /**
-   * 自定义图标
-   */
-  customIcon?: string
-  /**
-   * 是否为大尺寸
-   */
-  large?: boolean
-  /**
-   * 自定义样式
-   */
-  customStyle?: Record<string, any>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  type: 'text',
-  position: 'middle',
-  message: '',
-  duration: 3000,
-  loading: false,
-  icon: true,
-  customIcon: '',
-  large: false,
-  customStyle: () => ({}),
-})
-
-// Emits
-const emit = defineEmits<{
-  /**
-   * 显示状态变化时触发
-   */
-  (e: 'update:modelValue', value: boolean): void
-  /**
-   * 关闭时触发
-   */
-  (e: 'close'): void
-  /**
-   * 点击时触发
-   */
-  (e: 'click'): void
-}>()
-
-// Refs
-const toastRef = ref<any>(null)
-let timer: number | null | ReturnType<typeof setTimeout> = null
-
-// 内部状态
-const showToast = ref(props.modelValue)
-const isClosing = ref(false)
-
-// 计算是否需要显示图标
-const showIcon = computed(() => {
-  if (props.loading)
-    return true
-  if (props.type === 'text')
-    return props.icon
-  return true
-})
-
-// 点击事件处理
-function onClick() {
-  emit('click')
-}
-
-// 关闭Toast
-function close() {
-  if (!showToast.value)
-    return
-
-  // 添加关闭动画
-  isClosing.value = true
-  emit('close')
-}
-
-// 自动关闭定时器
-function startTimer() {
-  // 清除之前的定时器
-  clearTimer()
-
-  if (props.duration > 0 && !props.loading) {
-    timer = setTimeout(() => {
-      close()
-    }, props.duration)
-  }
-}
-
-// 清除定时器
-function clearTimer() {
-  if (timer) {
-    clearTimeout(timer)
-    timer = null
-  }
-}
-
-// 过渡结束处理
-function handleTransitionEnd() {
-  if (isClosing.value) {
-    showToast.value = false
-    isClosing.value = false
-    emit('update:modelValue', false)
-  }
-}
-
-// 监听modelValue变化
-watch(() => props.modelValue, (newVal) => {
-  if (newVal) {
-    // 显示Toast
-    showToast.value = true
-    isClosing.value = false
-    startTimer()
-  }
-  else {
-    // 隐藏Toast
-    close()
-  }
-})
-
-// 监听message变化，重新启动定时器
-watch(() => props.message, () => {
-  if (showToast.value && !props.loading) {
-    startTimer()
-  }
-})
-
-// 生命周期
-onMounted(() => {
-  if (props.modelValue) {
-    startTimer()
-  }
-})
-
-onUnmounted(() => {
-  clearTimer()
-})
-
-// 暴露方法
-defineExpose({
-  /**
-   * 手动关闭Toast
-   */
-  close,
-})
-</script>
-
-<style scoped>
-.sw-toast {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 80%;
-  padding: 20rpx 32rpx;
-  border-radius: 8rpx;
-  font-size: 28rpx;
-  line-height: 40rpx;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.7);
-  box-sizing: border-box;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 9999;
-  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;
-}
-
-/* 显示动画 */
-.sw-toast--show {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translateX(-50%) translateY(0);
-}
-
-/* 隐藏动画 */
-.sw-toast--hide {
-  opacity: 0;
-  transform: translateX(-50%) translateY(-20rpx);
-}
-
-/* 位置样式 */
-.sw-toast--top {
-  top: 100rpx;
-}
-
-.sw-toast--middle {
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.sw-toast--middle.sw-toast--show {
-  transform: translate(-50%, -50%);
-}
-
-.sw-toast--middle.sw-toast--hide {
-  transform: translate(-50%, -60%);
-}
-
-.sw-toast--bottom {
-  bottom: 100rpx;
-}
-
-/* 类型样式 */
-.sw-toast--text {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.sw-toast--loading {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.sw-toast--success {
-  background-color: #67c23a;
-}
-
-.sw-toast--fail {
-  background-color: #f56c6c;
-}
-
-/* 大尺寸样式 */
-.sw-toast--large {
-  padding: 32rpx 48rpx;
-  font-size: 32rpx;
-  line-height: 48rpx;
-}
-
-/* 加载图标 */
-.sw-toast__loading {
-  margin-right: 16rpx;
-}
-
-/* 加载动画 */
-.sw-toast__spinner {
-  display: inline-block;
-  width: 40rpx;
-  height: 40rpx;
-  border: 4rpx solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: #fff;
-  animation: sw-toast-spin 0.8s linear infinite;
-}
-
-/* 自定义图标 */
-.sw-toast__custom-icon {
-  font-size: 40rpx;
-}
-
-/* 状态图标 */
-.sw-toast__icon {
-  margin-right: 16rpx;
-
-  &--success,
-  &--fail {
-    display: inline-block;
-    width: 40rpx;
-    height: 40rpx;
-    font-size: 40rpx;
-    font-weight: bold;
-  }
-}
-
-/* 文本内容 */
-.sw-toast__text {
-  margin: 0;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-/* 加载动画 */
-@keyframes sw-toast-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .sw-toast {
-    max-width: 90%;
-    padding: 16rpx 24rpx;
-    font-size: 26rpx;
-    line-height: 36rpx;
-  }
-
-  .sw-toast--large {
-    padding: 24rpx 40rpx;
-    font-size: 30rpx;
-    line-height: 44rpx;
-  }
-
-  .sw-toast--top {
-    top: 60rpx;
-  }
-
-  .sw-toast--bottom {
-    bottom: 60rpx;
-  }
-}
-</style>
+<template>
+  <view
+    v-show="showToast"
+    ref="toastRef"
+    class="sw-toast"
+    :class="[
+      `sw-toast--${type}`,
+      `sw-toast--${position}`,
+      { 'sw-toast--large': large },
+      { 'sw-toast--text': !showIcon && type === 'text' },
+      { 'sw-toast--show': showToast && !isClosing },
+      { 'sw-toast--hide': showToast && isClosing },
+    ]"
+    :style="customStyle"
+    @click="onClick"
+    @transitionend="handleTransitionEnd"
+  >
+    <!-- 加载图标 -->
+    <view v-if="loading" class="sw-toast__loading">
+      <text v-if="!customIcon" class="sw-toast__spinner" />
+      <text v-else class="sw-toast__custom-icon">{{ customIcon }}</text>
+    </view>
+
+    <!-- 状态图标 -->
+    <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-else-if="customIcon" class="sw-toast__custom-icon">{{ customIcon }}</text>
+    </view>
+
+    <!-- 文本内容 -->
+    <text v-if="message" class="sw-toast__text">{{ message }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+// Props
+interface Props {
+  /**
+   * 控制显示/隐藏（支持v-model）
+   */
+  modelValue?: boolean
+  /**
+   * 提示类型
+   */
+  type?: 'text' | 'loading' | 'success' | 'fail'
+  /**
+   * 显示位置
+   */
+  position?: 'top' | 'middle' | 'bottom'
+  /**
+   * 提示文字
+   */
+  message?: string
+  /**
+   * 自动关闭时间（毫秒），0表示不会自动关闭
+   */
+  duration?: number
+  /**
+   * 是否显示加载图标
+   */
+  loading?: boolean
+  /**
+   * 是否显示图标
+   */
+  icon?: boolean
+  /**
+   * 自定义图标
+   */
+  customIcon?: string
+  /**
+   * 是否为大尺寸
+   */
+  large?: boolean
+  /**
+   * 自定义样式
+   */
+  customStyle?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  type: 'text',
+  position: 'middle',
+  message: '',
+  duration: 3000,
+  loading: false,
+  icon: true,
+  customIcon: '',
+  large: false,
+  customStyle: () => ({}),
+})
+
+// Emits
+const emit = defineEmits<{
+  /**
+   * 显示状态变化时触发
+   */
+  (e: 'update:modelValue', value: boolean): void
+  /**
+   * 关闭时触发
+   */
+  (e: 'close'): void
+  /**
+   * 点击时触发
+   */
+  (e: 'click'): void
+}>()
+
+// Refs
+const toastRef = ref<any>(null)
+let timer: number | null | ReturnType<typeof setTimeout> = null
+
+// 内部状态
+const showToast = ref(props.modelValue)
+const isClosing = ref(false)
+
+// 计算是否需要显示图标
+const showIcon = computed(() => {
+  if (props.loading)
+    return true
+  if (props.type === 'text')
+    return props.icon
+  return true
+})
+
+// 点击事件处理
+function onClick() {
+  emit('click')
+}
+
+// 关闭Toast
+function close() {
+  if (!showToast.value)
+    return
+
+  // 添加关闭动画
+  isClosing.value = true
+  emit('close')
+}
+
+// 自动关闭定时器
+function startTimer() {
+  // 清除之前的定时器
+  clearTimer()
+
+  if (props.duration > 0 && !props.loading) {
+    timer = setTimeout(() => {
+      close()
+    }, props.duration)
+  }
+}
+
+// 清除定时器
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
+// 过渡结束处理
+function handleTransitionEnd() {
+  if (isClosing.value) {
+    showToast.value = false
+    isClosing.value = false
+    emit('update:modelValue', false)
+  }
+}
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    // 显示Toast
+    showToast.value = true
+    isClosing.value = false
+    startTimer()
+  }
+  else {
+    // 隐藏Toast
+    close()
+  }
+})
+
+// 监听message变化，重新启动定时器
+watch(() => props.message, () => {
+  if (showToast.value && !props.loading) {
+    startTimer()
+  }
+})
+
+// 生命周期
+onMounted(() => {
+  if (props.modelValue) {
+    startTimer()
+  }
+})
+
+onUnmounted(() => {
+  clearTimer()
+})
+
+// 暴露方法
+defineExpose({
+  /**
+   * 手动关闭Toast
+   */
+  close,
+})
+</script>
+
+<style scoped>
+.sw-toast {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 80%;
+  padding: 20rpx 32rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 9999;
+  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;
+}
+
+/* 显示动画 */
+.sw-toast--show {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* 隐藏动画 */
+.sw-toast--hide {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-20rpx);
+}
+
+/* 位置样式 */
+.sw-toast--top {
+  top: 100rpx;
+}
+
+.sw-toast--middle {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.sw-toast--middle.sw-toast--show {
+  transform: translate(-50%, -50%);
+}
+
+.sw-toast--middle.sw-toast--hide {
+  transform: translate(-50%, -60%);
+}
+
+.sw-toast--bottom {
+  bottom: 100rpx;
+}
+
+/* 类型样式 */
+.sw-toast--text {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.sw-toast--loading {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.sw-toast--success {
+  background-color: #67c23a;
+}
+
+.sw-toast--fail {
+  background-color: #f56c6c;
+}
+
+/* 大尺寸样式 */
+.sw-toast--large {
+  padding: 32rpx 48rpx;
+  font-size: 32rpx;
+  line-height: 48rpx;
+}
+
+/* 加载图标 */
+.sw-toast__loading {
+  margin-right: 16rpx;
+}
+
+/* 加载动画 */
+.sw-toast__spinner {
+  display: inline-block;
+  width: 40rpx;
+  height: 40rpx;
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: sw-toast-spin 0.8s linear infinite;
+}
+
+/* 自定义图标 */
+.sw-toast__custom-icon {
+  font-size: 40rpx;
+}
+
+/* 状态图标 */
+.sw-toast__icon {
+  margin-right: 16rpx;
+
+  &--success,
+  &--fail {
+    display: inline-block;
+    width: 40rpx;
+    height: 40rpx;
+    font-size: 40rpx;
+    font-weight: bold;
+  }
+}
+
+/* 文本内容 */
+.sw-toast__text {
+  margin: 0;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+/* 加载动画 */
+@keyframes sw-toast-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .sw-toast {
+    max-width: 90%;
+    padding: 16rpx 24rpx;
+    font-size: 26rpx;
+    line-height: 36rpx;
+  }
+
+  .sw-toast--large {
+    padding: 24rpx 40rpx;
+    font-size: 30rpx;
+    line-height: 44rpx;
+  }
+
+  .sw-toast--top {
+    top: 60rpx;
+  }
+
+  .sw-toast--bottom {
+    bottom: 60rpx;
+  }
+}
+</style>
+