要做消息列表的颜色切换

最近有一个需求是需要做消息列表的颜色切换,大概页面如下,通过颜色选择器去切换前面消息文本的颜色

图片图片后来产品说这个颜色选择器的图标不好看,所以换了一个图标来显示颜色选择器,于是页面变成了下面这样的效果,我把原本的颜色切换的图标隐藏起来,换了另一个图标代替图片图片满屏都是后面又有新的需求,消息可能会有很多,甚至铺满整个屏幕图片图片这会导致页面非常卡,为啥呢?因为每一项就有一个颜色选择器!太多颜色选择器了,我们可以审查元素,发现颜色选择器面板的 DOM 非常多!!图片怎么优化呢?其实就是因为颜色选择器太多了才导致的卡顿,那么,我们只需要保证整个页面只有一个颜色选择器即可!第一步:先在页面放一个颜色选择器第二步:当点击图标1时,将颜色选择器移动到对应位置第三步:当点击图标2时,将颜色选择器移动到对应位置第四步:以此类推图片Teleport很多人看到刚刚的优化手段,就想着使用 鼠标点击坐标定位 的方式去移动颜色选择器,其实不需要,因为Vue3已经为我们提供了一个现成的传送门组件Teleport我们需要先封装一个单例颜色选择器,确保整个页面只有这么一个,且使用 Teleport 将它包起来,并且他的图标是不可见的,这里渲染组件我们可以使用 h 方法图片我们需要先将 Item.vue 中的颜色选择器去掉,换成一个占位的地方,用来让颜色选择器传送接着我们在 Index.vue 中去将这个 单例颜色选择器 进行挂载图片我们需要将 Item.vue 中的颜色选择器去掉,换成一个占位的地方,用来让颜色选择器传送,而这个占位的地方我们需要保证是独一无二的,不然会造成传送出错,这里我使用了 lodash.uniqueId图片现在我们可以看到,整个页面只有一个颜色选择器了,非常好,整个页面瞬间变得不卡顿了!!!图片再来看看效果,发现符合我们的预期~图片适用于多 Tab 切换Teleport 还适用于很多场景的优化,比如多 Tab 切换,但是每一个 Tab 都是显示了同一个组件,这个时候你也可以使用 Teleport 去优化示例尽量简化,方便大家理解比如下面的例子,其实每一个 Tab 展示的都是同一个内容图片图片我们可以使用 Teleport 将内容包起来,并监听 Tab 的切换,进行动态传送图片结果也能达到预期效果图片结语我是林三心,一个待过小型toG型外包公

相关推荐
西陵几秒前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er11 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮22 分钟前
webpack基础
前端·webpack
YongGit41 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc