「豆包Marscode体验官」改进tabs组件切换效果，丝滑的动画获得一致好评~
项目背景
周末的时候，产品突然给我指了一个bug，说客户觉得tabs切换组件样式很丑，让我优化一下。
由于项目使用的是Elemnt Plus ，于是我立即反驳，Elemnt Plus就是这样设计的啊，改不了！
但是产品不死心，找到了我的组长！于是领导让我调研调研，看看有没有更好的组件库改一改。
我看了一眼Ant Desgn，但样式大差不差。
没办法，只能自己手搓一个tabs组件了！于是，经过我的不懈努力，终于开发出了一款样式非常丝滑的tabs切换组件！最终效果也是获得了同事们的一致称赞！
由于家里的电脑配置比较低，也没有安装前端开发的环境，为了尽快完成这个小需求，我决定使用最近字节新出的工具：豆包MarsCode。
豆包MarsCode简介
其中，它的云IDE是一个非常新颖的工具，只要有网，就可以随时随地进行项目开发！
- 它内置了各种语言的的模板，选择即可使用
- 不用配置任何环境，也不吃电脑配置
我们的项目是基于vue3的，使用它内置的vue模板，完美符合我的工作场景！
Tabs组件开发
开发前准备工作
开发组件前，我们先创建vue模板，完成项目搭建。
使用豆包创建项目
模板的生成非常容易，点击创建按钮，选择vue模板即可。
豆包IDE生成的模板和vue官方一致，而且IDE布局非常简洁和VSCODE很像，没有任何额外的学习成本。
插件下载
创建模板后，项目所用的依赖已经帮我们下载好了，因此，我们不用执行npm i手动下载依赖。豆包云IDE和vscode一样，支持拓展插件下载，为了保持代码风格，我们可以安装喜好，给我们的云编译器安装一些插件。
- indent-rainbow
插件的下载很容易，点击IDE右侧的拓展按钮搜索插件即可。
indent-rainbow主要是用来美化代码的，可以给代码生成好看的缩进。
- Auto Rename Tag
快捷重命名html标签的一个工具。
开发思路分析
先参考最终效果图
上面的动画其实主要是两部分
- 鼠标hover增加白底效果
- 点击按钮背景色块进行移动
hover有手就会，就不说了，主要是如何实现点击按钮，背景色块跟随移动。
我的思路是这样的：
首先，整个按钮的区域有一个背景色块，默认情况是透明的。当点击某个按钮时，色块颜色变白，然后根据点击结果动态计算其移动的位置和宽度即可。
代码开发
我们先借助豆包AI帮我们生成这个代码试试
试试它这个代码的效果
效果还行啊，改改样式说不定能用！
样式优化
Tabs.vue
看看效果：
可以看出，样式效果还是非常不错的！现在，我们使用js动态的改变色块的位置及宽度。
色块动画实现
我们基于豆包刚才生成的代码进行修改优化
如果代码看不明白，没关系，我们可以使用豆包AI生成注释
完成的代码
我们在看看最终效果：
非常丝滑啊！至此，我们这个组件基本上核心的部分就开发完了，我们只需要在其他地方引入使用即可！
给大家展示下项目中其他地方的使用效果：
项目上传git
项目开发完毕后，我需要将代码推送至git，这样下周去公司我就可以用电脑直接拉取代码了！豆包中推送代码的方式和本地开发几乎是一致的。
- 如果我们没有使用代码仓库对豆包授权，我们可以
配置ssh直接关联远程仓库，推送代码。 - 如果我们使用仓库授权过豆包，那么git是随时可用的。
在豆包中，我们点击git的小图标，按照提示即可完成代码推送！
总结
由于传统的tabs组件样式难以满足定制化需求，因此，本文实现了一种带过渡动画的新型tabs组件，简单易用！相信大家可以很容易的应用到项目开发中。
值得一提的是，这个组件的开发完全是基于豆包MarsCode的，因此，我也来说说豆包MarsCode的一些使用感受。
首先，豆包云IDE真是一个非常不错的在线工具！就如我一开始说的，它无需配置任何环境，只要打开网页就能开心的进行代码开发，这一点，是本地开发无法比及的。
豆包云IDE的设计非常简洁，这让我们很容易知道如何操作，只要会使用vscode，基本上就可以完美的使用豆包IDE。在实际开发中，豆包的表现也是非常流畅的，开发体验相当不错，和本地开发几乎没有区别，可以看出字节在这个工具上的用心。
其次，豆包IDE内置了豆包AI助手，这让我们开发时，能获得更优质的AI辅助，能更大程度的提升我们的开发效率。比如，豆包AI的代码一键注释就设计的非常好，在同类产品中也是出类拔萃的！
但美中不足的是，豆包AI的代码生成结果感觉还是不尽人意，感觉和ChatGpt还是有一定的差距，不过也能接受，毕竟是免费产品。
希望豆包能做的更好！也希望各位读者能从这篇文章中获得到一点点知识！感谢大家！
是小姐姐，不是小哥
转载自:https://juejin.cn/post/7389076428883427340