- 博客(11)
- 收藏
- 关注
RSS订阅原创 实现Vue导航栏的滑动切换居中
这样，当导航栏超出容器宽度时，用户可以通过滑动来查看其他导航项，点击导航项会触发滑动到对应的索引，并且滑动时导航栏会自动对应高亮显示。根据实际需求和设计风格，你可以对样式和交互效果进行调整和定制化。的值，从而实现点击触发滑动到对应的索引。在上述代码中，导航栏的滑动效果通过设置。来允许导航栏超出部分可以水平滑动。导航栏的滑动容器使用。最后，在导航栏的样式中，设置。类来突出显示当前选中的项。计算出滑动的距离，并通过。通过给选中的导航项添加。属性应用于滑动容器。
2023-07-16 22:31:42
714
1
原创 vue2 上传图片
临时 URL 的创建是基于浏览器环境提供的 URL.createObjectURL() API，它为对象分配一个唯一的 URL。它的作用是将给定的对象（如 Blob、File 或 MediaSource）转换为一个临时 URL，该 URL 可以被用作浏览器中某些元素的源，比如 <video>、<audio> 或 <img>。URL.createObjectURL() 是一个 JavaScript 方法，用于创建一个临时的 URL 对象。ev.dataTransfer.files 支持拖拽上传。
2023-07-05 11:03:19
237
原创 vue2 使用canvas 视频截图
最后，this.$refs.video.src = URL.createObjectURL(target) 表示根据以上条件之一，将 target 对象（即视频文件）通过 URL.createObjectURL() 方法创建的临时 URL，设置为名为 video 的组件引用的视频元素的 src 属性。这样就可以将视频源加载到 <video> 元素中，从而播放该视频。如果支持，则将视频元素的 src 属性设置为使用 URL.createObjectURL() 方法创建的临时 URL。
2023-07-05 10:51:21
489
原创 vue2 全局事件总线
在上面的示例中，当 ComponentA 组件中的 handleClick 方法被调用时，它会使用 eventBus.$emit 发布一个名为 custom-event 的事件，并传递数据 data。Vue.js 中的全局事件总线是一种事件通信机制，它允许不同组件之间进行跨层级的通信，而无需显式地在它们之间传递数据。Vue.js 的全局事件总线通常使用一个空的 Vue 实例作为事件中心，通过事件的发布与订阅来实现组件之间的通信。这种机制可以在大型应用程序中方便地实现组件间的通信和数据传递。
2023-07-05 09:44:24
713
原创 Intersection Observer （ 交叉观察器）
在使用Intersection Observer时，可以通过创建一个Intersection Observer实例，并调用其方法来观察目标元素的交叉状态。当目标元素满足指定的交叉条件时，会触发回调函数进行相应的处理，例如加载图片、执行动画等操作。Intersection Observer是一个用于异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的API。它提供了一种有效的方法来异步检测元素是否进入或离开视窗（或其祖先元素）。提供了一种方法可以监听。
2023-05-16 21:46:02
436
原创 vue实现 自定义正则验证
要封装一个全局调用的输入校验，你可以创建一个全局指令来实现。以下是一个示例，演示如何创建一个全局的输入校验指令，并根据校验结果来动态改变输入框的样式：// main.jsimport Vue from 'vue';import App from './App.vue';// 注册全局的输入校验指令Vue.directive('inputValidation', { bind(el, binding) { el.classList.add('input-validation');
2023-05-15 17:05:24
480
原创 vue滚动到某个元素显示
滑动闪烁问题通常是由于频繁操作DOM引起的。为了彻底解决滑动闪烁问题，您可以考虑使用CSS的。和开启GPU加速，可以显著减少滑动闪烁问题的发生，并提高页面的性能和流畅度。首先，您需要为滚动容器添加一个新的CSS类，并将其样式设置为使用。属性来代替改变元素的定位属性，这将利用GPU加速来提高性能。
2023-05-05 18:32:05
479
1
原创 vue 图片验证乱码 转为图片
请注意，此示例假设服务器响应的是JPEG格式的图像。如果服务器响应的是其他图像格式（如PNG），请相应地调整前缀和文件扩展名。base64,"，表示这是一个Base64编码的JPEG图像。属性设置为所需的文件名（例如："captcha.jpg"）。，你可以将其用于显示图像或导出图像。在这个示例中，我们将Base64编码的图像数据附加到。函数将二进制数据转换为Base64编码的字符串。要将图形验证码导出为图片，你可以使用Vue中的。，以便获取响应数据的二进制表示。元素，将Base64编码的图像数据附加到。
2023-05-05 09:35:55
191
1
原创 vue移动端适配
UI移动端设计图宽度375px, 而flexible.js会/10, 设置html的font-size为37.5。// 编码时, 一个元素宽是75px，则换成rem之后就是2rem。postcss-pxtorem: 把css代码里所有px计算转换成rem。下载postcss和postcss-pxtorem@5.1.1。PC端一般都是1:1用px还原UI设计图, 靠内容撑开高度。// rootValue: 转换px的基准值。// 能够把所有元素的px单位转成Rem。移动端一般都是rem单位进行适配。
2023-05-03 18:43:35
67
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人