uniapp-dyckui 4.1.1

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

@@ -0,0 +1,372 @@
+<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>

package/src/components/MyComs/index.ts

@@ -0,0 +1,33 @@
+// 统一导出所有 MyComs 组件
+
+// 基础组件
+export { default as Button } from './Button/index.vue'
+export { default as Dialog } from './Dialog/index.vue'
+export { default as Divider } from './Divider/index.vue'
+export { default as Popup } from './Popup/index.vue'
+export { default as Toast } from './Toast/index.vue'
+export { default as Swiper } from './Swiper/index.vue'
+
+// 交互组件
+export { default as InfiniteScroll } from './InfiniteScroll/index.vue'
+export { default as PullRefresh } from './PullRefresh/index.vue'
+
+// 表单组件
+export { default as DropdownSelect } from './DropdownSelect/index.vue'
+export type { DropdownSelectProps, DropdownSelectEmits } from './DropdownSelect/type'
+export { default as DropdownWithBadge } from './DropdownWithBadge/index.vue'
+export type { DropdownWithBadgeProps, DropdownWithBadgeEmits } from './DropdownWithBadge/type'
+
+// 筛选组件
+export { default as FilterDrawer } from './FilterDrawer/index.vue'
+export type { FilterDrawerProps, FilterDrawerEmits } from './FilterDrawer/type'
+
+// 导出所有类型
+export type * from './DropdownSelect/type'
+export type * from './DropdownWithBadge/type'
+export type * from './FilterDrawer/type'
+
+// 导出组合式函数
+export { useDropdownSelect } from './DropdownSelect/dropdownSelect'
+export { useDropdownWithBadge } from './DropdownWithBadge/dropdownWithBadge'
+export { useFilterDrawer } from './FilterDrawer/useFilterDrawer'