2025/2/8第一次更新

node_modules/@tuniao/tnui-vue3-uniapp/components/popup/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './popup-custom'
+export * from './use-popup'

node_modules/@tuniao/tnui-vue3-uniapp/components/popup/src/composables/popup-custom.ts

@@ -0,0 +1,121 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { PopupProps } from '../popup'
+
+export const usePopupCustomStyle = (props: PopupProps) => {
+  const ns = useNamespace('popup')
+
+  // 当前模态框的zIndex
+  const zIndex = computed(() => Number(props.zIndex))
+
+  // 遮罩层的zIndex
+  const overlayZIndex = computed(() => zIndex.value - 1)
+
+  // 内容背景颜色
+  const [contentBgColorClass, contentBgColorStyle] = useComponentColor(
+    toRef(props, 'bgColor'),
+    'bg'
+  )
+
+  // 内容所属类
+  const popupContentClass = computed<string>(() => {
+    const cls: string[] = [ns.e('content')]
+
+    // 内容弹出位置
+    if (props.openDirection) cls.push(ns.em('content', props.openDirection))
+
+    // 如果是底部弹出，是否开启安全区域
+    if (props.openDirection === 'bottom' && props.safeAreaInsetBottom) {
+      cls.push('tn-u-safe-area')
+    }
+
+    // 内容背景颜色
+    if (contentBgColorClass.value) cls.push(contentBgColorClass.value)
+
+    return cls.join(' ')
+  })
+
+  // 内容所属样式
+  const popupContentStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置背景颜色
+    if (contentBgColorStyle.value)
+      style.backgroundColor = contentBgColorStyle.value
+
+    // 设置圆角
+    if (props.radius) {
+      // 如果有设置圆角则条件overflow:hidden
+      style.overflow = 'hidden'
+      // 根据不同的弹出位置设置圆角
+      if (props.openDirection === 'center') {
+        style.borderRadius = formatDomSizeValue(props.radius)
+      }
+      if (props.openDirection === 'top') {
+        style.borderBottomLeftRadius = formatDomSizeValue(props.radius)
+        style.borderBottomRightRadius = formatDomSizeValue(props.radius)
+      }
+      if (props.openDirection === 'left') {
+        style.borderTopRightRadius = formatDomSizeValue(props.radius)
+        style.borderBottomRightRadius = formatDomSizeValue(props.radius)
+      }
+      if (props.openDirection === 'right') {
+        style.borderTopLeftRadius = formatDomSizeValue(props.radius)
+        style.borderBottomLeftRadius = formatDomSizeValue(props.radius)
+      }
+      if (props.openDirection === 'bottom') {
+        style.borderTopLeftRadius = formatDomSizeValue(props.radius)
+        style.borderTopRightRadius = formatDomSizeValue(props.radius)
+      }
+    }
+
+    // 设置距离顶部的距离
+    if (
+      props.top &&
+      (props.openDirection === 'top' ||
+        props.openDirection === 'left' ||
+        props.openDirection === 'right')
+    ) {
+      style.top = formatDomSizeValue(props.top, 'px')
+    }
+
+    // 根据不同的位置设置不同的宽度或高度
+    if (
+      props.width &&
+      (props.openDirection === 'left' ||
+        props.openDirection === 'right' ||
+        props.openDirection === 'center')
+    ) {
+      style.width = formatDomSizeValue(props.width)
+    }
+    if (
+      props.height &&
+      (props.openDirection === 'top' ||
+        props.openDirection === 'bottom' ||
+        props.openDirection === 'center')
+    ) {
+      style.height = formatDomSizeValue(props.height)
+    }
+
+    if (props.openDirection === 'left' || props.openDirection === 'right') {
+      if (props.top)
+        style.height = `calc(100% - ${formatDomSizeValue(props.top, 'px')})`
+    }
+
+    // 设置zIndex
+    style.zIndex = zIndex.value
+
+    return style
+  })
+
+  return {
+    ns,
+    zIndex,
+    overlayZIndex,
+    popupContentClass,
+    popupContentStyle,
+  }
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/popup/src/composables/use-popup.ts

@@ -0,0 +1,79 @@
+import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { UPDATE_MODEL_EVENT } from '../../../../constants'
+
+import type { PopupProps } from '../popup'
+
+export const usePopup = (props: PopupProps) => {
+  const { emit } = getCurrentInstance()!
+  const iosDevice = computed<boolean>(() => {
+    const systemInfo = uni.getSystemInfoSync()
+    return systemInfo.osName === 'ios' || systemInfo.osName === 'macos'
+  })
+
+  // 是否显示遮罩层
+  const showOverlay = ref(false)
+  // 是否显示弹框
+  const showPopup = ref(false)
+  const visiblePopup = ref(false)
+  let initPopupModelValue = false
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (value) {
+        visiblePopup.value = true
+        if (iosDevice.value) {
+          setTimeout(() => {
+            showPopup.value = true
+            if (props.overlay) showOverlay.value = true
+            initPopupModelValue && emit('open')
+          }, 0)
+        } else {
+          showPopup.value = true
+          if (props.overlay) showOverlay.value = true
+          initPopupModelValue && emit('open')
+        }
+      } else {
+        showPopup.value = false
+        showOverlay.value = false
+        setTimeout(() => {
+          visiblePopup.value = false
+        }, 250)
+        initPopupModelValue && emit('close')
+      }
+      initPopupModelValue = true
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  // 更新模态框的状态
+  const updateModelValue = (value: boolean) => {
+    emit(UPDATE_MODEL_EVENT, value)
+  }
+
+  // 点击关闭按钮
+  const onClickCloseBtn = () => {
+    updateModelValue(false)
+    emit('close')
+  }
+
+  // 点击遮罩层关闭模态框
+  const onClickOverlay = () => {
+    if (props.overlayCloseable) {
+      updateModelValue(false)
+      emit('close')
+      emit('overlay-click')
+    }
+  }
+
+  return {
+    iosDevice,
+    showOverlay,
+    showPopup,
+    visiblePopup,
+    updateModelValue,
+    onClickCloseBtn,
+    onClickOverlay,
+  }
+}