vue3+vite+ts 实现大屏数字滚动效果

样式用的是windicss

效果

代码

<template>
	<div class="w-full flex justify-center items-center">
		<div
			v-for="(item, index) in numList"
			:key="index"
			class="num-item w-32px h-42px text-26px text-center border border-hex-8fbbff rounded leading-42px"
		>
			<div v-for="(child, childIndex) in 10" :key="childIndex" :style="{ ...style(item) }">
				{{ childIndex }}
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue'
const props = defineProps({
	number: {
		type: Number,
		default: 0
	},
	// 位数
	quantity: {
		type: Number,
		default: 5
	},
	// 是否从零开始变化
	delayed: {
		type: Boolean,
		default: true
	},
	// 过度时间
	time: {
		type: Number,
		default: 2000
	},
	// 过度动画速度
	timing: {
		type: String,
		default: 'ease'
	}
})
const num = ref(0)
const numArr = computed(() => {
	if (num.value) {
		return (num.value + '').split('')
	} else {
		return new Array(num.value.length).fill(0)
	}
})
const numList = computed(() => {
	let arr = []
	let len = numArr.value.length
	if (props.quantity && props.quantity > len) {
		arr = [...new Array(props.quantity - len).fill(0), ...numArr.value]
	} else {
		arr = numArr.value
	}
	return arr
})
watch(
	() => props.number,
	(newValue, oldValue) => {
		num.value = newValue
	}
)
const style = (e: any) => {
	return {
		transform: `translateY(-${e * 100}%)`,
		transition: props.time + 'ms',
		transitionTimingFunction: props.timing
	}
}
onMounted(() => {
	if (props.delayed) {
		setTimeout(() => {
			num.value = props.number
		}, 300)
	} else {
		num.value = props.number
	}
})
</script>
<style lang="scss" scoped>
.num-item {
	background-image: linear-gradient(180deg, #493fffad 0%, #194ccfb3 100%);
	overflow: hidden;
	font-family: Impact;
	text-shadow: 0 2px 4px #0000002e;
	margin-right: 12px;
	&:last-child {
		margin-right: 0;
	}
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于Vue 3 + Vite + TypeScript实现PC端适配,你可以遵循以下步骤: 1. 安装Vue 3和Vite:首先,确保你已经安装了Node.js和npm。然后运行以下命令来全局安装Vite和创建一个新的项目: ``` npm install -g create-vite create-vite my-app --template vue-ts cd my-app npm install ``` 2. 安装依赖:进入项目目录后,使用npm安装所需的依赖项,包括一些可能用到的UI库或CSS框架,例如Element Plus、Ant Design等等。 3. 创建布局组件:在src目录下创建一个Layout组件,作为整个应用的主要容器。这个组件将包含头部、侧边栏和主体内容。 4. 使用路由:在src目录下创建一个router目录,并在其中创建一个index.ts文件。在这个文件中,你可以使用Vue Router创建路由配置,并在主要布局组件中使用<router-view>来渲染不同的页面。 5. 创建页面组件:在src目录下创建一个views目录,并在其中创建各个页面的组件。每个页面组件将包含该页面的内容。 6. 创建样式文件:你可以使用CSS、SCSS或者其他CSS预处理器来编写样式。在src目录下创建一个styles目录,并在其中创建一个全局样式文件。 7. 实现响应式布局:Vue 3引入了Composition API,你可以使用`reactive`和`ref`等函数来处理响应式布局。根据不同的屏幕尺寸,你可以使用媒体查询或CSS框架的栅格系统来调整布局。 8. 添加适配代码:你可以使用Vue的全局mixin或自定义指令来添加适配代码。在适配代码中,你可以根据屏幕尺寸或其他条件,动态改变样式、布局或内容。 以上是一个大致的步骤,你可以根据实际需求和项目的复杂性进行调整。希望对你有所帮助!如果有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值