53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
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,
|
|
}
|
|
}
|