草庐IT

Vue-Instant

全部标签

vue3中使用nextTick

vue3中使用nextTickvue2中使用vue3中使用![在这里插入图片描述](https://img-blog.csdnimg.cn/9ba8ec87631c4d22b29178349a8089ab.png)vue2中使用this.$nextTick(()=>{//你要执行的方法})vue3中使用1、引入nextTickimport{nextTick}from'vue'2、使用setup(){constpasswordRef=ref(null)nextTick(()=>{passwordRef.value.focus()}) return{passwordRef }}

vue - 实现类似 ”视频和直播间“ 的文字弹幕飘过效果功能,支持Nuxt项目!组件源码及详细的使用示例(可自己定义弹幕样式、修改滚动速度、显示隐藏弹幕、鼠标移入悬停与点击悬停等)弹幕功能插件源码

效果图在Nuxt.js或Vue.js项目中,制作一个类似视频弹幕、直播间发言飘过弹幕效果组件,丝滑运行兼容性完美无bug。具体功能请看下图介绍,还有很多没有列举,基本上如果你需要这种弹幕,肯定能满足你。gif图比较卡,真实电脑手机很丝滑流畅的?。复制组件源码->改造一下

前端实现视频播放功能----vue-video-player --save

步骤一:npm安装插件:npminstallvue-video-player--save如果报错安装具体版本如下所示:npminstall--savevue-video-player@4.0.6 如果package.json文件内显示则为安装成功步骤二:局部引入---这里因为只有一个页面需要所有采用的局部引入在需要的页面引入(这里注意路径不要写错了)  步骤三:在页面中使用组件 步骤四:data中写入所传的参数  步骤五:methods写入回调函数 步骤六:注意(组件一定要设宽高)添加组件样式 这样就完成了一个视频播放功能 可以快进可以回放可以全屏拖动滚动条视频结束后自动重播完成实例:完整代码

vue2项目PC端自适应屏幕

        公司项目做之前没有沟通好,按照1920*1080设计图做的页面,缩放比是100%,项目做完之后说要适配缩放比,并且工控屏(分辨率1024*768),需要做小屏适应。        开发中一般pc端都是不用怎么考虑去适配屏幕的,因为现在的屏幕分辨率都是1960*1080,所以正常的前端页面都是可以适配的。        项目技术栈:vue2+elementUI一.需求分辨率:        pc:1920*1080        工位机:1024*768二.解决方案1.使用scale-box组件        主要针对大屏可视化,适用于个别大屏适配,不能全局适配,但是侧边会留白居

vue2单元测试

这里写目录标题测试基础概念单元测试测试工具mocha测试框架chai断言库jest测试框架下载v2+mocha测试语法1.测试函数2.测试组件点击数字+1判断数组的长度按下回车键数组增加删除数组双击修改class样式@vue/test-utils的一下方法测试基础概念分为单元测试,组件测试,e2e为什么需要测试,因为如果修改了js模块功能,其他模块也会受到影响,不方便迭代,代码无法重构只有长期项目才做单元测试,短期项目不做。如果说得更具体一点的话,就是业务页面不做测试,因为需求变更比较频繁。只有工具函数和公共组件还有比较稳定的业务页面才做测试。单元测试是测试中最小的单元(一个方法,组件)TDD

Jest单元测试Vue项目实践

​做单元测试的优点:1.减少bug避免低级错误2.提高代码运行质量3.快速定位问题4.减少调试时间,提高开发效率5.便于重构Jest安装:npminstallbabel-jestjestjest-serializer-vue@vue/test-utils@vue/cli-plugin-unit-jest-D配置vueCli内置了一套jest配置预置文件,一般情况下直接引用即可,如有特殊配置可见下文配置释意。//jest.config.jsmodule.exports={preset:'@vue/cli-plugin-unit-jest'}配置项目释意module.exports={//预设,项

Vue——printjs打印el-table,echarts等打印不全,异常解决

PrintJs简单使用PrintJs官网地址:https://printjs.crabbly.com/1、可以从GitHub版本下载最新版本的Print.js:https://github.com/crabbly/Print.js/releases2、npm安装npminstallprint-js--save更多参考:https://blog.csdn.net/sunxiaoju/article/details/126284860echarts无法打印解决修改print.js的getHtml,增加对canvas的处理,将echarts转为图片:getHtml:function(){varinp

图文详解vue.js devtools插件使用方法

Vue.jsdevtools背景简介我们chrome插件网之前介绍过Vue.jsdevtools,是基于googlechrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。本文重点介绍Vue.jsdevtools使用方法,提供chrome插件直接安装和源代码安装两种方法,你还可以在其中找到常见问题即安装之后“vu

【Vue报错】npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR!

报错代码如下:npmERR!codeERESOLVEnpmERR!ERESOLVEunabletoresolvedependencytreenpmERR!npmERR!Whileresolving:webvue@0.1.0npmERR!Found:vue@3.2.47npmERR!node_modules/vuenpmERR!vue@"^3.2.13"fromtherootprojectnpmERR!npmERR!Couldnotresolvedependency:npmERR!peervue@"^2.5.17"fromelement-ui@2.15.12npmERR!node_modules

【前端】Vue2 脚手架模块化开发 -快速入门

🎄欢迎来到@边境矢梦°的csdn博文🎄 🎄本文主要梳理Vue2脚手架模块化开发🎄🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈🎆喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路🎆Ps:月亮越亮说明知识点越重要(重要性或者难度越大)🌑🌒🌓🌔🌕 目录🌸打造高效开发利器!教你搭建Vue2脚手架CLI🚀❤️段落1:安装CLI并创建Vue项目🌈段落2:开发入门,快速上手Vue🌰运行项目📌Vue项目结构分析✨段落3:Vue插件加持,开创无限可能🌸打造高效开发利器!教你搭建Vue2脚手架CLI🚀🌟引言段:目前开发模式的问题1.开发效率低2.不够规范3.维护和升级,可读性比较差为了解决这些问题,优秀的程