Vue3组件库中如何构建Shake抖动效果组件的详细步骤？

本文共计1048个文字，预计阅读时间需要5分钟。

目录- 正文- CSS样式- 组件逻辑- 单元测试- 导出打包- 正文- 首先看看效果- 实际上就是一个具有动态效果的组件组，实现起来也相当简单。- 做这样一个组件是为了后面编写Form表单时能用到它。

目录

• 正文
• CSS样式
• 组件逻辑
• 单元测试
• 导出打包发布

正文

先看下效果

其实就是个抖动效果组件，实现起来也非常简单。之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验，比如下面一个简单的登录页面，当点击登录会提示用户哪个信息没输入，当然这只是一个简陋的demo

接下来就开始我们的Shake组件实现

CSS样式

其实样式很简单，当你需要抖动的时候就给它添加个抖动的样式，不需要就移除这个样式即可。