Cheris_LT的博客

摘要：本文介绍在Vue2中实现H5 Tab标签自动居中滚动效果的方法。通过$refs获取DOM元素，计算当前标签位置和容器宽度，使用scrollLeft属性实现平滑滚动。关键步骤包括：为容器添加ref属性，编写selectItem方法处理点击事件，使用公式scrollLeft = offsetLeft - (容器宽度-标签宽度)/2精确定位，并配合CSS的scroll-behavior实现平滑过渡。该方法无需第三方库，提升移动端标签浏览体验，特别适用于横向滚动标签栏场景。

在使用Element UI的Cascader级联选择器时，启用懒加载（lazy模式）后，数据回显常遇到困难。传统方法需要手动递归请求数据或依赖后端返回完整路径字符串，较为繁琐。本文提出一种优雅的解决方案，通过控制组件渲染时机来触发Cascader内部自动解析回显的机制。具体实现步骤包括：通过v-if控制组件渲染时机，定义关键状态，初始化数据获取，并在数据就绪后重新渲染组件。该方案的核心原理是利用v-if控制组件的生命周期，确保在数据正确绑定后，新实例会自动触发各层级的lazyLoad，从而实现自动回显。方案

今天给大家分享一个超实用的前端小技巧——如何在 Vue 项目中生成二维码并实现下载功能。这个功能在分享链接、活动推广等场景特别有用，一起来学习吧！A：确保正确处理了Base64数据转换，特别注意替换前缀的正则表达式要准确。A：对于大量二维码生成，可以考虑使用Web Worker进行异步处理。如果有任何问题，欢迎在评论区留言讨论~ 😊。Q1：为什么下载的文件损坏？Q2：如何在移动端兼容？Q3：如何提高生成速度？

1、lib-flexible插件，引入 lib-flexible插件，使 用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整。2、postcss-px2rem、px2rem-loader插件，作用为把px转变为rem。首先在main.js中引用：（可以使用npm下载，也可以直接下载文件，我这边是下载的文件）为了方便我们的快速应用，直接使用插件。别忘了在vue.config.js文件中的chainWebpack中配置。

在JavaScript中，根据给定的年月计算该月的第一天和最后一天是一个常见的需求。本文将从初学者容易陷入的低效实现方式入手，逐步讲解如何通过原生Date对象的特性优雅解决这个问题。很多开发者初次面对这个问题时，可能会手动计算月份天数。${${${${${虽然这种实现能解决问题，但存在明显缺陷：1、需要维护月份天数的映射关系2、闰年判断逻辑需要额外代码3、代码可读性和维护性差实际上，JavaScript的Date对象内置了智能的日期计算能力。

padStart 是一个字符串的方法，用于将当前字符串填充至指定的长度。如果原始字符串已经达到了指定的长度，或者超过了该长度，那么 padStart 不会改变原始字符串。这两个方法在处理需要对齐文本或生成固定长度的字符串时非常有用，例如在生成表格数据、格式化日志文件或创建特定格式的字符串时。如果这个数值小于或等于字符串的原始长度，那么返回的将是原始字符串（不会进行填充）。与 padStart 相反，padEnd 方法用于在当前字符串的末尾填充指定的字符，直到字符串达到指定的长度。或许你忘了js基础中的它！

在这个例子中，其实JavaScript并不需要做什么特别的事情，因为CSS的@media print已经足够控制打印时的样式了。由于CSS的@media print规则已经将内容隐藏了，所以打印出来的页面将是空白的。简单防白嫖，要让打印出来的页面是空白，通常的做法是在打印时隐藏页面上的所有内容。在JavaScript中，你通常不会直接控制打印的内容（因为那是CSS和HTML的工作），但你可以通过修改DOM元素的样式来影响打印效果。

由于在预览图片时，onshow、onhide都会接连触发，我一开始在onhide设置了figh为false，导致没有达到预期效果。后来想了想，是否可以用时间差来判断，如果onshow、onhide触发时间间隔太小，则判断为图片预览。结果在预览列表中的图片的过程中，发现关闭预览图片时触发了onshow，导致了页面数据刷新了。在预览图片时，previewImage前（或者使用的第三方组件，就在组件的外层盒子增加方法）设置变量为true，此时关闭预览，在onshow中判断变量，如果为true，则不更新数据。

【代码】vue 动态路由生成。

如果不想要马上上传的话，只需要增加:auto-upload=‘false’，然后在需要上传时，调用实例的submit方法即可执行httpRequest方法。如果需要做表单校验，则httpRequest只是为了获取到文件，首先不要设置auto-upload，选择文件后马上就调用httpRequest方法，在httpRequest方法中获取到文件并储存，方便后面做表单校验。但是如果是在表单中上传文件，且是直接和其他表单项数据一起上传的话，则需要手动进行上传。

很多时候播放视频时会需要展示封面图，但是不可能每次都上传封面图。虽然pc大多数都可以自动使用第一帧为封面图，但部分机型还是不支持，因此需要自己手动去绘画一张。

这次试试新的写法，由于props是单向数据流，所以这里选择使用computed，在父组件改变值的时候，对应的dialog就会相应的改变状态。剩下的就是在dialog关闭的时候，需要通知父组件状态的变化。之前有尝试过使用watch去监听props的值，是可以做到想到的效果，但是代码稍微有一些冗余。在做后台管理系统的时候，dialog组件是我们使用频率比较高的组件，但是有一些需求现有的组件是不满足的。组件本身的属性我们保留，只需要根据需求添加，然后在使用的时候props去拿取使用就可以了。

为了保证页面流畅性，菜单表格使用了懒加载，但是在对菜单进行添加、编辑和删除等操作的时候，发现数据没有更新。这时候，需要手动去进行触发。思路很简单，在每一次懒加载获取子节点时，将对应的tree、node数据进行保存。在对数据进行操作之后，则手动调用获取子字节的方法来达到刷新数据的效果。注：修改和删除时，需要用父级id来刷新数据，因此存储当前数据行的父级id为pid；当添加的时候，需要用当前数据行id来刷新数据，因此存储当前数据行的id为pid；当点击添加、修改、删除按钮时，需要更新一下pid，保证目标节点。

那么这时候就需要去获取输入框的光标内容，由于在点击其他按钮时，输入框会自动触发失焦事件。今天接到需求，输入框在正常输入的同时，可以通过点击其他按钮在输入框光标位置添加内容。blurIndex 就是在输入框中的光标位置！然后在方法中传递一个参数，即可获取到数据源。因此在blur的时候去触发方法即可。

注意父级等不要有overflow，否则会针对父元素去做吸附，那就没用了。position:sticky是去找最近的可滚动元素！

话不多说，直接调用就知道了。

当打印数据出来之后，发现typeof(err)是一个object，但是又无法使用err.msg取到。在使用elementUI上传组件时，想要获取上传失败后，后端返回的数据。后来发现需要获取的数据是以json格式存在于它的message中。想要直接输出返回的提示语。但是无法直接使用err.msg获取。接下来，就是为所欲为！

js 中 null == 0 为false，为什么 null >=0 为true。

因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。在h5中，经常会有用户左滑或者右滑手势展示对应效果的需求。看起来似乎很复杂，在vue中举一个例子，直接看懂！

在做项目的过程中，通常会有遇到这样的需求：某某事情发生，需要将页面调至黑白，作缅怀或者哀悼。那岂不是要一个个调整？