2025/2/8第一次更新

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

@@ -0,0 +1 @@
+export * from './loading-custom'

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

@@ -0,0 +1,89 @@
+import { computed, toRef } from 'vue'
+import {
+  useComponentColor,
+  useComponentSize,
+  useNamespace,
+} from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { LoadingProps } from '../loading'
+
+export const useLoadingCustomStyle = (props: LoadingProps) => {
+  const ns = useNamespace('loading')
+
+  // 解析颜色
+  const [colorClass, colorStyle, updateColor] = useComponentColor(
+    toRef(props, 'color'),
+    'bg'
+  )
+
+  // 解析尺寸
+  const { sizeType } = useComponentSize(props.size)
+
+  // 加载动画所属类
+  const loadingClass = computed<string>(() => {
+    const cls: string[] = []
+    cls.push(ns.b())
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'inner')
+      cls.push(ns.m(props.size as string))
+
+    return cls.join(' ')
+  })
+  // 加载动画所属样式
+  const loadingStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'custom')
+      style.width = style.height = formatDomSizeValue(props.size)
+
+    return style
+  })
+
+  // 加载内容所属类
+  const loadingContentClass = computed<string>(() => {
+    const cls: string[] = []
+    cls.push(ns.b())
+
+    // 是否开启动画
+    if (props.animation) cls.push(ns.m('animation'))
+    return cls.join(' ')
+  })
+  // 加载内容所属样式
+  const loadingContentStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 加载颜色类型
+    if (props.type) style['--loading-color'] = `var(--tn-color-${props.type})`
+
+    // 加载内容颜色
+    if (props.color && colorClass.value) {
+      const color = props.color.replace('tn-', '')
+      style['--loading-color'] = `var(--tn-color-${color})`
+    }
+
+    // 加载内容颜色
+    if (colorStyle.value) style['--loading-color'] = colorStyle.value
+
+    // 设置动画执行时间
+    if (props.duration) style.animationDuration = `${props.duration}s`
+
+    // 设置动画执行时间函数
+    if (props.mode === 'circle' || props.mode === 'semicircle') {
+      if (props.timeFunction) style.animationTimingFunction = props.timeFunction
+    }
+    return style
+  })
+
+  return {
+    ns,
+    loadingClass,
+    loadingStyle,
+    loadingContentClass,
+    loadingContentStyle,
+    updateColor,
+  }
+}

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

@@ -0,0 +1,3 @@
+import type Loading from './loading.vue'
+
+export type LoadingInstance = InstanceType<typeof Loading>

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

@@ -0,0 +1,57 @@
+import { buildProps } from '../../../utils'
+import { componentTypes } from '../../../constants'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const loadingModes = ['semicircle', 'circle', 'flower'] as const
+
+export const loadingProps = buildProps({
+  /**
+   * @description 显示加载状态
+   */
+  show: Boolean,
+  /**
+   * @description 加载动画
+   */
+  animation: Boolean,
+  /**
+   * @description 加载模式
+   */
+  mode: {
+    type: String,
+    values: loadingModes,
+    default: 'circle',
+  },
+  /**
+   * @description 加载颜色类型
+   */
+  type: {
+    type: String,
+    values: componentTypes,
+    default: 'primary',
+  },
+  /**
+   * @description 颜色，以tn开头则使用图鸟内置的颜色
+   */
+  color: String,
+  /**
+   * @description 加载动画大小
+   */
+  size: {
+    type: [String, Number],
+  },
+  /**
+   * @description 加载动画执行时间，单位s
+   */
+  duration: {
+    type: [String, Number],
+  },
+  /**
+   * @description 加载动画执行时间函数，仅mode为circle和semicircle时有效
+   */
+  timeFunction: String,
+})
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>
+
+export type LoadingMode = (typeof loadingModes)[number]

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

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { loadingProps } from './loading'
+import { useLoadingCustomStyle } from './composables'
+
+const props = defineProps(loadingProps)
+
+const {
+  ns,
+  loadingClass,
+  loadingStyle,
+  loadingContentClass,
+  loadingContentStyle,
+} = useLoadingCustomStyle(props)
+</script>
+
+// #ifdef MP-WEIXIN
+<script lang="ts">
+export default {
+  options: {
+    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    virtualHost: true,
+  },
+}
+</script>
+// #endif
+
+<template>
+  <view v-if="show" :class="[loadingClass]" :style="loadingStyle">
+    <view v-if="mode === 'semicircle'" :class="[ns.e('semicircle')]" />
+    <view
+      v-if="mode === 'circle' || mode === 'semicircle'"
+      :class="[ns.e('circle'), loadingContentClass]"
+      :style="loadingContentStyle"
+    />
+    <view
+      v-if="mode === 'flower'"
+      :class="[ns.e('flower'), loadingContentClass]"
+      :style="loadingContentStyle"
+    >
+      <view v-for="i in 12" :key="i" :class="[ns.em('flower', 'item')]" />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/loading.scss';
+</style>