极致爽文，tsx、jsx语法应用vue3
JSX语法让程序员体验到前所未有的舒爽，而在Vue3中，快速过渡到TSX也是轻而易举的。除了下文介绍的TSX用法外，其他方面与Vue3的使用方式并无二致。TSX所需学习的内容并不繁杂，只是稍微改变了开发习惯，取消了模板语法，让我们能够像编写JavaScript一样书写页面。 通过执行 来创建一个Vue工程。 工程地址 你可以在以下地址找到本文使用的工程示例： 组件定义：defineComponent 在Vue3中， 是一个用于定义组件的...
vue下拉刷新组件的开发及slot的使用
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发： JavaScript正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新） 首先需要编写下拉刷新组件的 temp...
vite+vue3实现低版本浏览器兼容的解决方案（白屏问题）
前言 项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。 默认情况vite的兼容目标是支持 原生ES模块 ， 原生ESM动态导入 和 的浏览器，官方预设的兼容目标如下： 1. es2020 2. edge 88 3. firefox 78 4. chrome 87...
vue3+vite 安卓8.0下打开白屏问题记录
问题：vue3+vite 开发移动端应用，上线后现场反馈安卓8.0下进入页面白屏 分析：原因就是因为语法兼容问题。根据vite官方文档描述， 默认支持 Chrome =87、Firefox =78、Safari =14、Edge =88 ，所以需要我们手动兼容低版本。 处理方案： 增加打包兼容代码 vite.config.js下增加 打包运行发现依然白屏。 请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfil...
使用vue3封装一个hooks实时获取麦克风音量
之前是在做一个electron项目中需要去检测音量，检测音量不是为了证明音量本身，而是去看看麦克风是否正常响应。 如图所示：这是一个模仿腾讯会议的音量检测的UI 在浏览器中是无法获取真实设备的电平输入的，所以此方法是通过后去音频数据来计算出音量,并非系统实际音量 使用场景 在web端对麦克风进行检测，看看麦克风是否有效 在electron、Capacitor等以web交互为主开发的应用都可以支持（比如：electron应用） 提示：在检...
如何优雅的调试 Vue 项目
引言 在前端开发过程中，我们经常会使用 或 语句来进行调试， 优点在于简单易用，缺点就是入侵了代码，缺乏上下文信息，而且可能会造成性能影响，影响开发体验； 语句优点在于可以暂停逐行调试，可以看到完整的调试信息，例如变量、调用堆栈、作用域链等等，缺点是代码入侵，无法支持条件断点，这两种语句虽然我们可以在打包的时候去掉，但是不够优雅，简单的情况下可以用用。 本文以 Vue 项目为例，介绍另一种方式，使用 VSCode Debugger 功能...
vue3中使用 vue-pdf-embed 实现pdf文件预览、翻页、下载等功能
往期回顾： 文章目录 vue3中使用 vue pdf embed 实现pdf文件预览、翻页、下载等功能 一、安装 \ 1、安装 \ 二、文件预览 1、\ 结构内容 2、\ 样式 3、\ 基本预览功能实现 4、获取文件总页数 三、翻页 四、缩放 五、下载 六、打印 七、指定页面跳转 八、项目演示 九、参考资料 一、 1、安装 注：此处安装版本为 ，2.x 版本安装的依赖包 版本为 3.x 版本。 注：2024.2.16 更新 无需安装 v...
Vue的nextTick方法源码深度解读
先看看vue官网nextTick方法的定义： 是等待下一次 DOM 更新刷新的工具方法。 当你在 Vue 中更改响应式状态时，最终的 ，而是由 Vue 将它们缓存在一个 中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。 根据官网的定义，修改一个响应式数据后，页...
el-popover 点击其他区域关闭弹出框
需求：用户点击按钮， 出现，弹出框里有确认&取消按钮，点击确认&取消&其他区域，弹出框消失。 文档上是这样写的 但是如果绑定了visible，那么弹出框所有的弹出隐藏都必须手动控制 ，也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。 可以通过绑定弹出框的ref，来通过ref的value.hide()实现手动隐藏。 作者：卑微程序喵 链接：https://www.jianshu.com/p/3b2380a3920d 来源：...