vue
Jiang_JY
!! 开发问题可联系作者 !!,后续会发布更多的前后端文章,感谢关注,共同进步
展开
-
vue 中实现音视频播放进度条(可拖拽,满足常见开发需求)
该款插件可作为音频、视频播放的进度条,用于控制音频、视频的播放(播放进度、暂停开始、播放倍速、自定义刻度 等)。同时,插件提供了多方面的配置选项,使用者可以通过个性化配置来达到自己想要的效果(下面会对配置项进行详解),拓展性极高。在播放的过程中插件会返回当前播放的播放信息(如当前播放到的秒(进度)、进度条被拖拽时的回调、进度条拖拽后的回调等),根据这些返回信息,我们拿到后根据实际的需求来做不同处理就可以实现控制播放的效果。原创 2024-02-24 15:34:39 · 3611 阅读 · 14 评论 -
vue 项目打包图片没有打包进去问题解决
vue 项目打包,项目中引用了的图片没有被打进包里,导致打包后的项目图片缺失。原创 2024-02-24 15:25:12 · 919 阅读 · 0 评论 -
前端导出下载文件后提示无法打开文件
对返回的响应数据进行打印,发现响应数据为字符串格式,前期规划的后端返回数据应该 blob 对象的。后经排查后发现是...原创 2024-02-24 14:56:54 · 911 阅读 · 0 评论 -
vite 项目提示 Buffer is not defined 问题解决
在 vite 搭建的 vue3 项目中使用 Buffer 对象报错 Buffer is not defined。1、首先安装...原创 2024-02-24 14:30:53 · 913 阅读 · 0 评论 -
Python is not set from command line or npm configuration 报错解决
在 npm install 的过程中提示 Python is not set from command line or npm configuration 的报错,相信不少朋友都遇到过,出现这个问题的原因是缺少 python 环境所导致的。原创 2024-02-24 13:59:34 · 1003 阅读 · 0 评论 -
Vue packages version mismatch 报错解决
npm run dev 运行项目的过程中,报错 Vue packages version mismatch。原创 2024-02-24 13:31:16 · 1386 阅读 · 0 评论 -
Property “_showTooltip“ must be accessed with “$data._showTooltip“ because properties...报错解决
vue2 项目开发过程中报错:Property “_showTooltip” must be accessed with “$data.showTooltip" because properties starting with “$” or "” are not proxied in the Vue instance to prevent conflicts with Vue internals.作者百度过后,发现网上出现这个问题的原因有很多,但是对照自己的代码并没有得到什么帮助。排查过后,问题是...原创 2024-02-24 11:53:51 · 304 阅读 · 0 评论 -
项目打包提示一堆 ts 类型错误问题解决
vue3 + ts 项目在打包的过程中报了一大堆 ts 类型错误提示,如下图所示:报错:Could not find a declaration file for module … implicitly has an ‘any’ type.原创 2024-02-24 11:29:31 · 658 阅读 · 0 评论 -
vite 中配置打包入口
【代码】vite 中配置打包入口。原创 2024-02-24 10:59:15 · 563 阅读 · 0 评论 -
vite 脚手架搭建 vue3 项目
步骤:1、win+r,输入 cmd 进入命令提示符窗口2、cd 到项目需要存放的目录3、进入目录后,使用以下命令搭建项目(这里以npm为例)...原创 2024-01-30 08:47:04 · 805 阅读 · 0 评论 -
v-if 导致 elementui 表单校验失效问题解决
在使用 elementui 表单的过程中,某些表单项需要通过 v-if 来判断是否展示,但是这些表单项出现了检验失效的问题。1、给需要 v-if 判断的表单项添加 key 值2、将校验规则直接绑定在 el-form-item 上3、v-show 代替 v-if这种方法存在一个问题,就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题,所以这种方法需要在判断的表单项字段都不相同的情况下使用。原创 2024-01-25 11:04:31 · 985 阅读 · 0 评论 -
el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
elementplus 的 el-checkbox 官方代码中的多选框组实例如下:上方代码中选中哪个选项就会往 checkList 数组中加入选项的 label 值,如果需要实现展示的值与选中的值不一样要怎么实现呢?原创 2024-01-24 17:24:33 · 1252 阅读 · 0 评论 -
elementplus 中 DatePicker 日期选择器样式修改无效
遇到一个需求需要修改 DatePicker 日期选择器的样式,在添加了 scoped 属性的 style 标签,并且使用了 deep 样式穿透的情况下并不能修改其样式。原创 2024-01-24 16:23:17 · 772 阅读 · 0 评论 -
elementplus 中 select 选择器下拉框样式无法修改问题
遇到需要修改 elementplus 中下拉框 el-select 样式的需求,但是发现在添加了 scoped 属性的 style 标签,并且使用了 deep 样式穿透的情况下并不能修改其样式。原创 2024-01-24 15:46:26 · 1128 阅读 · 0 评论 -
vue3 中 ref 获取组件实例的用法
1、在元素上添加 ref 属性2、创建组件实例对象3、在函数中使用原创 2024-01-24 14:44:58 · 1112 阅读 · 0 评论 -
vue 本地中导入 maptalks
1、进入 github 中 maptalks 文件下载页面。2、...原创 2024-01-24 13:56:51 · 537 阅读 · 0 评论 -
elementui 表单数据嵌套过深导致校验不了问题解决
在使用 elementui 表单校验的过程中发现表单中存在嵌套多个层级的数据不能进行校验。原创 2024-01-23 15:53:12 · 794 阅读 · 0 评论 -
elementui 表单 resetFields 方法不生效问题解决
调用 elementui 官方提供的表单重置方法 resetFields 方法重置表单不生效,相信很多小伙伴都遇到过这个...原创 2024-01-23 15:32:59 · 636 阅读 · 0 评论 -
vue3 项目中 arguments 对象获取失败问题
在 vue3 项目中获取到的 arguments 对象与传入实参不符,打印出函数中的 arguments 对象如下...原创 2024-01-20 11:29:55 · 847 阅读 · 0 评论 -
vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.
在开发的过程中,项目中需要用到 echarts,引入后在渲染的过程中报错了:Initialize failed: invalid dom.这个,作者在以前也遇到过这种情况,在 vue2 中正常来说将 echarts 图表渲染操作放到 mounted 或者 $nextTick 函数中就可以了。但是在 vue3 的项目中作...原创 2024-01-09 15:31:25 · 873 阅读 · 0 评论 -
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
在开发 vue3 项目的过程中,使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。原创 2023-12-11 11:37:08 · 1245 阅读 · 0 评论 -
Failed to execute ‘readAsBinaryString‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.报错解决
在使用 FileReader 对象读取文件的时候产生了下图报错:代码:原因产生该报错的原因是 readAsBinaryString 方法传入的不是 Blob 对象。readAsBinaryString 方法传入的必须是一个 Blob 对象。打印一下自己传入的对象,作者由于使用了 elementui 上传组件,传入 readAsBinaryString 方法内的 file 对象是经过 elementui 封装过的,下图打印可以看到,file.raw 属性才是真正的文件 Blob 对象,所以传入 file.原创 2023-11-15 13:18:14 · 1304 阅读 · 0 评论 -
vue中 process.env 对象为空对象问题
今天在处理vue项目环境问题的时候,发现直接打印 process 对象和打印 process.env 时 env 对象输出结果是不一样的,如下图所示:在网上搜索了一番后发现还是有挺多朋友对此感到疑惑的,询问了同事,同事说可能是node环境和浏览器环境有差异的原因,但具体原因尚不清楚,所以在使用的时候应该通过 process.env 的方式查看 env 对象的内容。原创 2023-11-08 17:26:32 · 501 阅读 · 0 评论 -
vue中实现订单支付倒计时
创建订单后15分钟内进行支付,否则订单取消。原创 2023-08-15 11:02:59 · 1064 阅读 · 0 评论 -
elementui表格table中实现内容的换行
通过作用域插槽传递内容到表格行内,再通过 v-html 进行内容的替换。elementui 中的 table 行内的内容不能进行换行。原创 2023-08-02 16:34:34 · 3847 阅读 · 0 评论 -
elementUI导航菜单中切换菜单项后页面跳转了但是选中菜单项不变或者与点击项不一致问题
菜单项是否选中就是看 default-active 绑定的值是哪个菜单项的 index 值,所以我们在路由跳转后将 default-active 绑定的值切换为当前菜单项的 index 值即可。将 index 值设置为菜单项的路由路径,点击后直接进行路由跳转,然后将 default-active 绑定为路由跳转完后的当前路由路径。比如下方中从博客切换到标签,正常情况下选中的菜单项应该是标签(标签高亮),但是现在选中的菜单项依旧是博客或者其他菜单项。原创 2022-10-25 21:47:13 · 5084 阅读 · 0 评论 -
vuex中mapActions的概念及用法
一般情况下我们会在组件中使用 this.$store.dispatch() 来触发 action ,想要调用多少个 action 就需要调用多少次 dispatch() ,而使用 mapActions 的话只需要将组件中往 mapActions 中传入与 action 同名的函数,然后调用这些函数即可触发对应的action。了解了 mapActions 大概是用来干什么的之后,下面来介绍一下 mapActions 的具体用法。简单来说 mapActions 就是。原创 2022-09-21 08:18:38 · 10217 阅读 · 0 评论 -
elementUI设置上传图片的格式、大小限制
属性绑定的事件中可以获取上传图片的信息对象,通过给这个信息对象内的属性添加判断条件就可以实现对视频的格式及大小进行限制。原创 2022-09-20 07:43:15 · 3265 阅读 · 0 评论 -
elementUI实现上传视频时获取视频时长以及设置视频格式、大小限制
属性绑定的事件中可以获取上传视频的信息对象,通过给这个信息对象添加判断条件就可以实现对视频的格式及大小进行限制。对于视频时长,也包含在信息对象中,根据下面代码所示方法提取即可。原创 2022-09-19 22:47:20 · 2624 阅读 · 0 评论 -
js中终止forEach循环的方法
想要终止forEach循环使用 return 的话,只能跳出本次循环执行下一次循环,并不会终止forEach循环。原创 2022-09-17 11:14:05 · 3903 阅读 · 0 评论 -
div元素设置伪类:focus不生效的解决办法
遇到一个需求,在vue项目中根据a标签那样的链接跳转效果来实现组件的切换,于是乎打算通过给div设置伪类:focus来模仿a标签被点击后变色的效果,但是当给div设置伪类:focus后发现并没有生效。tabIndex属性:利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序,同时也有指示其元素是否可以聚焦(获得焦点)的作用。:focus :在元素获得焦点时向元素添加特殊的样式(如果是给元素设置颜色样式的话,被点击后变色,且颜色在点击后不消失)百度了一下才发现div是。原创 2022-09-17 10:17:14 · 3262 阅读 · 0 评论 -
vue中$root的用法
【代码】vue中$root的用法。原创 2022-09-17 08:55:20 · 3409 阅读 · 0 评论 -
vue中实现滚动条一直保持在底部
vue中实现滚动条一直保持在底部原创 2022-09-04 13:49:40 · 4488 阅读 · 6 评论 -
vue组件中实现监听vuex中的数据变化
vue组件中实现监听vuex中的数据变化原创 2022-09-04 13:36:51 · 2057 阅读 · 0 评论 -
elementUI实现表格多选中指定某些行不能被选中
elementUI实现表格多选中指定某些行不能被选中原创 2022-09-01 21:23:50 · 3572 阅读 · 0 评论 -
vue中使用$emit传递多个参数
vue中使用$emit传递多个参数原创 2022-09-01 09:14:52 · 11513 阅读 · 0 评论 -
Cannot read properties of null (reading ‘pickAlgorithm‘)报错的解决方法
Cannot read properties of null (reading 'pickAlgorithm')报错的解决方法原创 2022-08-31 19:29:32 · 3822 阅读 · 0 评论 -
Error: [vuex] do not mutate vuex store state outside mutation handlers.报错的解决方法
Error: [vuex] do not mutate vuex store state outside mutation handlers.报错的解决方法原创 2022-08-30 21:29:38 · 892 阅读 · 0 评论 -
vue中使用elementUI分页实现切换页面时返回页面顶部
原理:给elementUI分页组件的切换页面时触发事件(在这里就是handleCurrentChange函数)添加一个跳转到页顶的方法即可。实现:<!-- 分页组件 --><el-pagination @current-change="handleCurrentChange" ></el-pagination>//跳到页顶scrollTop(selector) { let element = selector && document原创 2022-05-11 14:53:59 · 2525 阅读 · 0 评论 -
解决vue项目路由跳转页面不变问题
问题:今天在开发vue移动端项目的过程中发现了一个bug,就是当按返回键的时候页面并没有发生变化,一开始还以为是没有监听到返回事件,但是通过测试之后发现返回事件监听成功了,路由也发生了变化,相应事件也触发了,就是页面视图没有跟着改变。解决方法:项目中路由设置的是 hash模式,所以对 hashchange 事件进行监听(hash模式下,路由的变化会触发hashchange事件)在App.vue中给hashchange绑定事件: mounted() { // 检测浏览器路由改变页面不刷新问题原创 2022-05-11 14:06:34 · 2584 阅读 · 0 评论