2025/2/8第一次更新

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

@@ -0,0 +1,7 @@
+import { withNoopInstall } from '../../utils'
+import CountScroll from './src/count-scroll.vue'
+
+export const TnCountScroll = withNoopInstall(CountScroll)
+export default TnCountScroll
+
+export type { TnCountScrollInstance } from './src/instance'

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,
+  }
+}

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

@@ -0,0 +1,44 @@
+import { buildProps } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const countScrollProps = buildProps({
+  /**
+   * @description 显示的值
+   */
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+  /**
+   * @description 文字颜色，以tn开头则使用图鸟内置的颜色
+   */
+  textColor: String,
+  /**
+   * @description 字体大小，默认单位 rpx
+   */
+  fontSize: String,
+  /**
+   * @description 小数点的分隔符
+   */
+  decimalSeparator: {
+    type: String,
+    default: '.',
+  },
+  /**
+   * @description 千分位的分隔符，如果不填写则为没有千分位
+   */
+  thousandsSeparator: {
+    type: String,
+    default: ',',
+  },
+  /**
+   * @description 动画执行时间，单位毫秒
+   */
+  duration: {
+    type: Number,
+    default: 1500,
+  },
+})
+
+export type CountScrollProps = ExtractPropTypes<typeof countScrollProps>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { countScrollProps } from './count-scroll'
+import { useCountScroll, useCountScrollCustomStyle } from './composables'
+
+const props = defineProps(countScrollProps)
+
+const { ns, countScrollClass, countScrollStyle, countScrollColumnStyle } =
+  useCountScrollCustomStyle(props)
+const { columns, activeIndex } = useCountScroll(props)
+</script>
+
+<template>
+  <view :class="[countScrollClass]" :style="countScrollStyle">
+    <view :class="[ns.e('wrapper')]">
+      <view
+        v-for="(item, index) in columns"
+        :key="index"
+        :class="[ns.e('column')]"
+        :style="countScrollColumnStyle(activeIndex[index])"
+      >
+        <view
+          v-for="(listItem, listIndex) in item"
+          :key="listIndex"
+          :class="[ns.em('column', 'item')]"
+        >
+          {{ listItem }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/count-scroll.scss';
+</style>

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

@@ -0,0 +1,3 @@
+import type CountScroll from './count-scroll.vue'
+
+export type TnCountScrollInstance = InstanceType<typeof CountScroll>