前端开发
文章平均质量分 55
前端相关内容:-传统三剑客/JS/JQ-HTML-CSS,框架:VUE/Element/LUA等
测试狂人
就职于某大型国企,世界500强企业
擅长:
1.自动化测试开发
2.测试管理
3.项目管理PMP
展开
-
VUE两个不相干组件如何传参
现在A组件页面的查询方法,例如。原创 2022-07-19 15:02:58 · 1778 阅读 · 2 评论 -
vue项目中子组件调用父组件函数报错“TypeError: “this.$parent.b(p)“ is not a function
子类调用父类的方法,老是报错,"TypeError: "this.$parent.b(p)“ is not a function原创 2022-06-06 23:19:48 · 2314 阅读 · 0 评论 -
handsontable入门
平时我们用el-table官网:Guides - Handsontable Documentation安装:npm install handsontable @handsontable/vue安装完后实现发现:就是要你密钥激活,说白了要钱,撤了撤了原创 2022-04-13 21:26:27 · 559 阅读 · 0 评论 -
To install it, you can run: npm install --save @vue/composition-api/dist/vue-composition-api.mjs
To install it, you can run: npm install --save @vue/composition-api/dist/vue-composition-api.mjs这个报错得时候,很明显我就(网上类似的都这么修改):npm install --save @vue/composition-api/dist/vue-composition-api.mjs安装成功后,运行还是报错!思路思考我尝试从这两个文件里修改,注释都不行在node_mod...原创 2022-04-13 20:52:20 · 5788 阅读 · 0 评论 -
vue el-input textarea如何按行显示和几种效果
参考:Vue textarea动态显示行数_Aibac的博客-CSDN博客_textarea显示行数关于这个输入框的内容,我收到后端的textarea1为数组[a,b,c],发现放在这个框里没有按照换行显示,而我们想要的效果:prop["num"]data{ retrun{ texterear1:“”, }}wait:{//因为这个是父组件传过来的,我就在这里处理,你们根据自己的 num(){ handler(n,o){//n是父组件的.原创 2022-04-10 00:43:55 · 5379 阅读 · 0 评论 -
VUE解决背景图片没有铺满的问题
我刚下载的VUE-cli框架,但是设置背景图片的时候发现,在App.vue文件中设置style的风格css即可,红色部分其实就是网上抄来的,这就是背景图片的设置但是我又发现了,图片没有铺满。类似图片中的这样,上面和左边都会留个缝隙。我找了半天都没有找到,直到看到:解决vue背景无法铺满全屏的问题 - 简书这个说的情况跟我一样,只不过它是在index.html,我的工程里都没有,但是一葫芦画瓢,我在App.vue文件添加上body即可:发现一家解决了背景图片铺满的问题了。..原创 2022-04-05 23:35:39 · 6498 阅读 · 1 评论 -
VScode vue初学者几个必须使用的插件
为了提高开发效率1.VUE这个是让你的VUE代码有颜色区分,不然什么颜色都没有2.Vetur这个就是你按 ctrl+/ 键注释用的,如果没有它,你在html或者style处按都是出//(这个只能注释script),安装它你就可以注释html是<-->,注释style是/**/3. Path Autocomplete只要你输入:“../”就会弹出提示供你选择4.Bracket Pair Colorizer就是括号上下门对应,很方便...原创 2022-04-03 17:20:32 · 1129 阅读 · 0 评论 -
前端VUE传值的一个神奇的bug,谁来给我解释下
首先我的写法大概是这样的我打印这个值是有显示的:此时我想取这个rebision的值打印出来却是空的?????我真是100个问号,更神奇的是:传到子组件是可以获取到的,这个是传给子组件的在子组件种打印:发现是有recision的值。这到底是为什么啊?我就在debuggerdebug后发现不对劲我是先开始调用,才有这个赋值的,是不是生命周期的问题?我就改了下,把赋值放到调用的前面,大概类似这样我在打印...原创 2022-03-30 11:39:43 · 1844 阅读 · 2 评论 -
自动化web页面连接终端adb devices 能识别终端
我们做测试自动化是不是要连接终端,adb device ,使得终端连接上电脑,我们的web页面改如何做?chrome://inspect/#devices这个地方是可以显示出终端WebUSB API - Web APIs | MDN这个是它的api接口的使用方式。How does WebADB work (part 2) - Connection | 陈思这个是怎么使用的教学。我还没有仔细研究,哪位大神研究后出个教程@我下。...原创 2022-03-27 13:02:40 · 990 阅读 · 0 评论 -
VUE脚手架使用路由问题,什么是hash,网页为何有#
我下载了VUE的脚手架。npm install vue-cli安装部署好后:在浏览器输入:http://localhost:8080/显示出来的跟文档的一样。现在我新建一个页面:'../../static/testhello/index.vue',我的期望是输入地址就能显示该页面:http://localhost:8080/testhello可是刷新页面没有反应,这个页面一直出不来。非得输入:http://localhost:8080/#/testhell..原创 2021-10-11 11:14:27 · 435 阅读 · 0 评论 -
VUE为何是npm run sev?
我一直很好奇,为何运行的命令是:npm run sev其实原因很简单,我来拆分它:npm是因为安装的工具是它,你可以安装cnpm或yurn等,安装什么就用什么。run这个是必须的sev这个是VUE脚手架中package.json中的,如下图:如果你输入的命令不是sev那就运行不起来:只要你修改这个地方,就可以用什么,我习惯改成:serve根据上面的显示,我现在运行只输入:npm run serve即可.根据自己的爱好修改。...原创 2021-10-09 17:37:03 · 484 阅读 · 0 评论 -
element穿梭框最后一行显示长度不一致问题
我们看看我们的穿梭框很明显最后一行显示的内容比上一行的内容多,这是怎么回事?查看样式都没有查到什么原因。我们的html:<div class="bottomchoose" id="bottomchoose" style="margin-left:0.2rem;margin-top: 0.3rem;"> <el-transfer filterable filt.原创 2021-07-30 17:15:51 · 836 阅读 · 0 评论 -
dialog初始化
每次打开dailog,内容都还是旧的,比如,里面有个表格,被人拽后,重新打开无法恢复参考:https://blog.csdn.net/z9061/article/details/102475172依葫芦画瓢:<el-dialog:width="diglogwigth"height="1.5rem":title="biaoti1":z-index="2"drag-able...原创 2021-07-14 14:50:55 · 440 阅读 · 0 评论 -
el-dailog的title显示奇葩文字问题
我使用element-UI使用的dailog发现title标题文字显示不对称,发现“批量”两个字比其他的小。查看了半天,把“批量”换成其他文字就正常,所以不是文字设置问题,应该出现再这两个字的问题上,它这两个字有啥特殊,又不是繁体字,也不是比较复杂的字啊。代码就正常的:所以没有单独配置过字体格式。因为dailog有好多个,不能单个修改,不然你这改好,其他地方也跟着出异常就麻烦了。所以我就怀疑是不是字体格式的原因。我新建一个word试试:然后发现各种字体,其中从上往下数第三..原创 2021-07-14 14:20:59 · 427 阅读 · 2 评论 -
JS修改JSON内容
比如有个JSON字符串(也可以是对象)var strJson={"id":"20210708114276rl7w3pq4si","actionType":1,"moduleType":1,"reqData":"{\"UserName\":\"\",\"UserType\":\"1\",\"UserAccount\":\"1234\",\"UserPassword\":\"1\"}"}一、修改对象名称我想修改“id”为nameconst json = JSON.parse(strJ..原创 2021-07-08 12:20:19 · 8122 阅读 · 2 评论 -
前端访问服务器地址如何由用户配置
我与后端通过websocket通信,刚开始后端的服务器地址是写死的,固定地址。但是后面发现部署服务器的时候,地址都不一样,然后我每次都在代码改地址,然后build编译一个版本在发,能不能不要把地址写死,版本不需要频繁出。首先我考虑到的方法:1.刚打开也页面就自动获取IP,我也实现了:js自动获取ip地址 ,但是有个问题,浏览器不支持,每次要获取还得该浏览器配置。2.现在要求可以在外部提供一个文件配置(如D:/test.txt),用户部署的时候,它把服务器ip地址写上,然后打开浏览器读取它,但是一顿搜索原创 2021-07-01 14:33:53 · 1313 阅读 · 0 评论 -
el-upload上传文件修改文件名称(使用传参方法)
我们平时都有上传文件的经历,但是上传中难免会出现重复上传,对图片可能影响不大,但是对于上传文件特别时APK,比如:微信.apk,这个apk名称都是微信,但是有V1.0和V20版本,你重复上传会被覆盖,对于后端也不好管理,怎么办?后端要求你上传到文件服务器时,把APK名称改成唯一的名字。我这里是要上传APK到文件服务器,这里后端要求我上传的时候修改APK名称(目的是为了确保唯一的,这个不重要)。我的做法是:在点击选择文件时@change,就已经发请求了,后端会给我文件服务器的上传路径(https:/.原创 2021-06-24 16:42:39 · 9707 阅读 · 0 评论 -
el-upload上传时的file-List的基本用法
关于el的file-List用法官网有写,但是一直搞不懂的时url到底是什么地址,跟上传地址有什么区别。于是百度下,有人这么写,意思是url就是文件的地址。难道官网的url就是网上图片的地址?有人问了,那要是本地地址呢,这个url怎传?html:<el-upload action="https://192.168.1.1:8888/xxx上传接口" :file-list="fileList" <i class="el-icon-plus"></i>&原创 2021-06-24 10:19:05 · 28557 阅读 · 4 评论 -
VUE学习笔记--结束
学习来源:https://edu.51cto.com/center/course/lesson学习这个需要前端基础,如HTML\JS模板语法:说白了就是数据绑定的方式,{{}}、v-bind:或:1.数据绑定再html里直接用{{}}方式绑定。注意:类似以上的htmlStr绑定为例,如果你不用这种方式,你用<div v-html>这样的方式会出现很大的问题,安全性不高,容易被攻击。2.模板表达式表达式要在一个用例作用域下,比如上文的e...原创 2021-06-23 15:37:15 · 1167 阅读 · 0 评论 -
js读取文件的MD5值
这个网络很多教程,我使用的是VUE,就是你选择文件按钮选择文件(各种格式,含APK),然后读取该文件的MD5值。当然你也可用用在加密算法。原创 2021-06-15 18:22:12 · 4875 阅读 · 0 评论 -
文件选择按钮原生和element框架获取的区别
我们再做文件选择按钮,有时适用原生的<input type="file" :action="uploadURL" ref="upload" style="width: 200px; height: 30px;" accept=".apk" id="appPush" @change="appSelect1()">原创 2021-06-09 17:18:54 · 584 阅读 · 0 评论 -
读取app-info-parser的源码
首先我们要定位问题,先在方法打个断点,原创 2021-06-08 14:16:07 · 416 阅读 · 0 评论 -
JS基本算法
一、数组(这个经常考)1.合并数组<script>var hege = ["Cecilie", "Lone"];var stale = ["Emil", "Tobias", "Linus"];var children = hege.concat(stale);document.write(children);</script>原创 2021-05-31 10:57:03 · 296 阅读 · 7 评论 -
前端读取APK内容不全的问题(app-info-parser-master插件问题的解决)
APK读取的方法:https://blog.csdn.net/bbs11007/article/details/111245722前端使用app-info-parser-master这个插件进行读取,但是我发现我有几个APK,读取出来的应用名label都不一样,今天测试下;用到第三方测试工具,确保我们的APK没有问题,就是APK helper 3.0工具,你把APK拖进去就显示APK相关信息了,如下图:我们测试开始我们准备几个APK,网上随机下载的:我们读一个正常的:.原创 2021-05-19 14:02:10 · 1257 阅读 · 3 评论 -
前端常用的插件
我们在写前端页面的时候,经常引用第三方插件,我们可以通过下载和npm安装的方式,适用于VUE或原生js一、下载方式,下载文件导本地,把js文件放到项目中,引用其路径即可。如:importxxxx from'../../build/js/xxxx.js';如果是原生的html方式,则:<script type="text/javascript" src="/build/js/xxxx.js"></script>二、安装方式一般是通过npm或cnpm方式安装,..原创 2021-05-17 14:52:56 · 905 阅读 · 0 评论 -
VUE导入读取TXT
参考方法:https://blog.csdn.net/qq_43138078/article/details/90044628事前一定要看过这篇:VUE批量导入/读取excel、下载模板文件功能实现在选择文件的时候判断:插在importFile(file)方法中else if(this.suffix === "txt" ){ console.log("选择的是txt",file,objFile); // ..原创 2021-05-14 18:23:55 · 1885 阅读 · 0 评论 -
VUE批量导入/读取excel、下载模板文件功能实现
下载模板点击下载按钮(组件a标签等方式也行,这里用elemnet),这里重点是绑定:href="downloadUrl" <!-- <a download="moban.xlsx" :href="downloadUrl" id="moban" class="downloadBtn" @click="downloadmoban()">下载模板</a> --> <el-link download="moban原创 2021-05-14 17:36:39 · 1999 阅读 · 5 评论 -
VUE+element+其他插件,导出功能的简单实现,
我们的导出excle,今天来推荐使用一个插件vue-json-excel,参考:https://blog.csdn.net/junkaicool/article/details/96423061第一步:先下载npm install vue-json-excel -S第二步:导入import JsonExcel from 'vue-json-excel';第三步:添加组件<--导出事件--><download-excel class="blueBt原创 2021-04-26 18:26:15 · 4361 阅读 · 2 评论 -
JS获取当前使用的浏览器
我使用的是PC端的浏览器,我们获取信息是:navigator重点是这个,打印的内容都有以下这些我们要获取的是:appVersion这行,所以navigator.appVersion,打印看看但这个怎么获取?我们可以使用split进行拆开先,共同点是空格,所以navigator.appVersion.split(" ")这个方法,打印看看;这样我们很明显得到一个数组,而且是这个第8位,但是打印出来不是,所以是第9位,获取数组的方法是arr[9],最后:console.log("使原创 2021-04-26 11:32:34 · 2830 阅读 · 0 评论 -
VUE基于webscoket请求的超时setTimeout处理
今天来说说超时,我们先来简单介绍下:说到超时,时延,我们知道有setTimeout和setInterval方法,这两个写法差不多;两者大致的写法:setTimeout(code,毫秒)setInterval(code,毫秒)只是setTimeout方法只执行一次,setInterval是隔一段时间执行一次。setTimeout可以写成://3秒执行alert弹框setTimeout( "alert('对不起, 三秒钟已到')" , 3000 )也可以时延直接调用原创 2021-04-21 16:26:27 · 14388 阅读 · 0 评论 -
VUE远程下载功能,动态赋值路径URL(el-link的使用)
之前我们学过下载功能,我们下载使用<el-link :download="downloadname" :href="downloadUrl2" id="moban2" class="downloadBtn2" type="primary"> <el-button id="dibu_download" type="primary" @click="pullLog()" plain >拉取</el-button></el-link>原创 2021-04-19 14:58:30 · 10053 阅读 · 0 评论 -
VUE使用el-upload做上传遇到跨域问题
跨域问题网上搜索很多,感觉情况都不一样,我这里说说我遇到得问题,记录下。先说说上传吧,我使用element框架,刚开始以为简单得使用<el-upload>就行了,其实这个别人封装好的,但你上传的时候还需要一个接收用的服务,这个文件接收的服务是同事用C#写的,我就不过多阐述。我所了解得跨域就是两个,要么后端修改,要么前端修改,我看都是需要修改的,改需要根据具体情况修改。要了解什么是跨域百度下:https://blog.csdn.net/yao940622/article/details原创 2021-03-30 14:42:34 · 12301 阅读 · 8 评论 -
js/vue获取本机的IP地址遇到的问题解决经验
再做前端页面的时候,想获取本地的ip地址,可能是为了和服务器通信,可能是为了展示,无论哪种,目的要获取js get IP相信大家搜到最多的是以下的js方法(都是超来抄去),我来讲讲我遇到的坑,方法虽然很笨,只为了解决问题。这里要强调下,我们这里是获取本机IP,局域网或者独立电脑,木有联网,若是借用网络接口,如搜狐、新浪等接口地址不行,因为木有网络。就是那种我一打开网页就直接获取了。方法一:getUserIP(onNewIP) { // onNewIp-新IP的侦听器函数 ...原创 2021-03-18 16:53:51 · 5145 阅读 · 8 评论 -
VUE的reader.onload方法怎么把值抛出去
之前这个读取文件的方法:https://blog.csdn.net/Make_Progress365/article/details/107017637handleChange(file) { let reader = new FileReader(); //先new 一个读文件的对象 FileReader if (typeof FileReader === "undefined") { //用来判断你的浏览器是否支持 FileReader this.$messag原创 2021-03-08 10:01:17 · 9366 阅读 · 22 评论 -
VUE读取Vcard文件,并获取/筛选想要的内容
我是Vcard文件,安卓通讯录,test.vcf,它的固定格式,文件内容如下(里面有四个联系人):然后我是要获取里面的内容(因为我与后台交互是数据传输,也就是JSON方式),所以我需要获得我需要的姓名N和电话号码CELL就行。首先我们要做的事读取这个Vcard文件,参考这个可以实现文件读写(任何后缀的文件,类似txt):https://blog.csdn.net/Make_Progress365/article/details/107017637根据它的方法,我打印出来如下:co...原创 2021-03-05 17:52:00 · 670 阅读 · 0 评论 -
前端JS/VUE如何生成Vcard或其他文件--导出任意后缀的文件
单独下载FileSaver.js地址:https://github.com/eligrey/FileSaver.js插件安装方法来自:https://www.cnblogs.com/xinchenhui/p/9942399.html安装:npm install file-saver --save或者(需下载FileSaver.js文件)<script src="path/FileSaver.js"/>引用:import FileS...原创 2021-02-23 11:16:56 · 2973 阅读 · 3 评论 -
【转】前端开发面试题
原文来至于:Github(为防止后续找不到这么优秀的内容,先转为敬)前端开发面试题前言只看问题点这里看全部问题和答案点这里本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的!前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话:“每1..转载 2021-02-01 14:49:35 · 97 阅读 · 0 评论 -
【转】web前端命名规范
转载:https://www.cnblogs.com/soyxiaobi/p/9866168.html为防止优秀文章被删除,把大神的文章转到此地一、Web语义化1.1 H5的语义化对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范。尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签:header、nav、main、aside、footer、section、article等等。那么对于web...转载 2021-02-01 14:42:50 · 264 阅读 · 0 评论 -
【转载】前端日志不输出到控制台,直接写入文件保存,将console.log()保存为文件
参考高手写的:https://github.com/wangduanduan/log4bhttps://www.cnblogs.com/simuhunluo/p/8109429.html转载 2021-01-27 18:04:58 · 2498 阅读 · 0 评论 -
【转载】CSS冷知识
转载:https://blog.csdn.net/liyunkun888/article/details/102723444CSS动态效果的内容,看着效果很好,防止作者删除,以后再也看不到了,那就保存在自己本地靠谱些。01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似2.【shape-outside】不要自以为是了。你以为自己是方的,在别人眼里你却是圆的3.【BFC应用】BFC应用之阻止外边距合并(margin coll.转载 2021-01-26 10:52:14 · 98 阅读 · 0 评论