2025/2/8第一次更新

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

@@ -0,0 +1,64 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+import { formatDomSizeValue, isEmptyVariableInDefault } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { CountScrollProps } from '../count-scroll'
+
+type CountScrollColumnStyleType = (activeIndex: number) => CSSProperties
+
+export const useCountScrollCustomStyle = (props: CountScrollProps) => {
+  const ns = useNamespace('count-scroll')
+
+  // 解析颜色
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(props, 'textColor'),
+    'text'
+  )
+
+  // 动画执行时间
+  const duration = computed<number>(() =>
+    isEmptyVariableInDefault(props?.duration, 1500)
+  )
+
+  // countScroll对应的类
+  const countScrollClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    return cls.join(' ')
+  })
+
+  // countScroll对应的样式
+  const countScrollStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (props.fontSize) style.fontSize = formatDomSizeValue(props.fontSize)
+
+    if (!textColorClass.value) {
+      style.color = textColorStyle.value || 'var(--tn-text-color-primary)'
+    }
+
+    return style
+  })
+
+  // countScroll列对应的样式
+  const countScrollColumnStyle = computed<CountScrollColumnStyleType>(() => {
+    return (activeIndex: number) => {
+      const style: CSSProperties = {}
+
+      if (duration.value) style.transitionDuration = `${duration.value / 1000}s`
+      style.transform = `translateY(-${activeIndex * 10}%)`
+
+      return style
+    }
+  })
+
+  return {
+    ns,
+    countScrollClass,
+    countScrollStyle,
+    countScrollColumnStyle,
+  }
+}

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

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

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

@@ -0,0 +1,52 @@
+import { computed, nextTick, ref, watch } from 'vue'
+import { isEmptyVariableInDefault } from '../../../../utils'
+
+import type { CountScrollProps } from '../count-scroll'
+
+// 使用Array生成0-9的数组
+const defaultNumberList = Array.from({ length: 10 }, (_, i) => String(i))
+
+export const useCountScroll = (props: CountScrollProps) => {
+  // 每一列的数据
+  const columns = ref<string[][]>([])
+  // 每一列激活的数字的索引
+  const activeIndex = ref<number[]>([])
+
+  // 分割符保留字符
+  const separator = computed<string[]>(() => {
+    const { decimalSeparator, thousandsSeparator } = props
+    const separatorList = [
+      decimalSeparator,
+      isEmptyVariableInDefault(thousandsSeparator, ''),
+    ]
+    return separatorList.filter((item) => item)
+  })
+
+  // 生成列数据并设置激活的索引
+  const _generateColumns = () => {
+    const { value } = props
+    const valueArr = String(value).split('')
+
+    // 如果是分割符则不填充defaultNumber数据
+    const _fillDefaultNumber = (item: string) => {
+      if (separator.value.includes(item)) return [item]
+      return defaultNumberList
+    }
+    columns.value = valueArr.map(_fillDefaultNumber)
+    nextTick(() => {
+      setTimeout(() => {
+        activeIndex.value = valueArr.map((item) => {
+          if (separator.value.includes(item)) return 0
+          return Number(item)
+        })
+      }, 50)
+    })
+  }
+
+  watch(() => props.value, _generateColumns, { immediate: true })
+
+  return {
+    columns,
+    activeIndex,
+  }
+}