2025/2/8第一次更新

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

@@ -0,0 +1 @@
+export * from './use-overlay'

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

@@ -0,0 +1,58 @@
+import { computed } from 'vue'
+import { useNamespace } from '../../../../hooks'
+import { isEmptyVariableInDefault } from '../../../../utils'
+
+import type { CSSProperties, SetupContext } from 'vue'
+import type { OverlayEmits, OverlayProps } from '../overlay'
+
+export const useOverlay = (
+  props: OverlayProps,
+  emits: SetupContext<OverlayEmits>['emit']
+) => {
+  const ns = useNamespace('overlay')
+
+  // 遮罩层对应的类
+  const overlayClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 是否显示组件
+    if (props.show) cls.push(ns.m('show'))
+
+    return cls.join(' ')
+  })
+
+  // 遮罩层样式
+  const overlayStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 动画执行时间
+    style.transitionDuration = `${isEmptyVariableInDefault(
+      props.duration,
+      300
+    )}ms`
+
+    // 遮罩层透明度
+    style.backgroundColor = `rgba(0, 0, 0, ${isEmptyVariableInDefault(
+      props.opacity,
+      0.5
+    )})`
+
+    // 设置zIndex
+    if (props.zIndex) style.zIndex = props.zIndex
+
+    return style
+  })
+
+  // 遮罩点击事件
+  const overlayClick = () => {
+    emits('update:show', false)
+    emits('click')
+  }
+
+  return {
+    ns,
+    overlayClass,
+    overlayStyle,
+    overlayClick,
+  }
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/overlay/src/instance.ts

@@ -0,0 +1,3 @@
+import type Overlay from './overlay.vue'
+
+export type TnOverlayInstance = InstanceType<typeof Overlay>

node_modules/@tuniao/tnui-vue3-uniapp/components/overlay/src/overlay.ts

@@ -0,0 +1,43 @@
+import { ZIndex } from '../../../constants'
+import { buildProps, isBoolean } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const overlayProps = buildProps({
+  /**
+   * @description 是否显示遮罩层
+   */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description 动画时间，单位毫秒
+   */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /**
+   * @description 遮罩层透明度，有效值0-1
+   */
+  opacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /**
+   * @description zIndex
+   */
+  zIndex: {
+    type: Number,
+    default: ZIndex.mask,
+  },
+})
+
+export const overlayEmits = {
+  'update:show': (value: boolean) => isBoolean(value),
+  click: () => true,
+}
+
+export type OverlayProps = ExtractPropTypes<typeof overlayProps>
+export type OverlayEmits = typeof overlayEmits

node_modules/@tuniao/tnui-vue3-uniapp/components/overlay/src/overlay.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import {} from 'vue'
+import { overlayEmits, overlayProps } from './overlay'
+import { useOverlay } from './composables'
+
+const props = defineProps(overlayProps)
+const emits = defineEmits(overlayEmits)
+
+const { overlayClass, overlayStyle, overlayClick } = useOverlay(props, emits)
+</script>
+
+<template>
+  <view
+    :class="[overlayClass]"
+    :style="overlayStyle"
+    @tap.stop="overlayClick"
+    @touchmove.stop.prevent="() => {}"
+  >
+    <slot />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/overlay.scss';
+</style>