前端
文章平均质量分 58
前端
甜甜圈Sweet Donut
江湖夜雨,雁过无痕。
因爲興趣,所以喜歡。
展开
-
【Vue3】项目的设计与实现:从0开始搭建一个测试用例平台网站<一>
前言:从上个月开始搭建这个网站,正好一个月今天决定停止开发,下面说一下整个设计流程和思路1.建立原型原型是一切起始的关键:按照自己的想法,大概设计了下面几个原型:(用powerPoint俗称PPT的形状工具画的 = =)最后的成品:如果可以把功能拆得更细一些,我觉得自己还能写得更快更好,当然,这个程序是有服务器和数据库的。项目的大小和规模,取决于使用者和具体的设计需求,前期一定要把需求把握好,例如:有几个人用?哪些功能必须有?是否需要鉴权(登录密码和账户)?如何确保账户原创 2021-07-05 20:15:57 · 1235 阅读 · 2 评论 -
【vue3】 el-icon 设置图标颜色
代码: <i class="el-icon-folder-opened" style="background:rgb(246, 189, 49); color: white"></i>效果:如果要实现这种的,最好还是乖乖去找png图片吧:原创 2021-07-01 12:35:50 · 6143 阅读 · 0 评论 -
【vue3】自动定位到某个位置的锚点
参考文章:当用户滑动页面时将跟随页面移动的导航栏固定在页面上方鼠标滑动页面,锚点定位vue/js - 实现页面自动往上滑动效果vue项目中获取div高度并默认滚动到底部vue中实现回到顶部功能vue实现滚动监听,点击瞄点平滑滚动,控制内嵌滚动条滚动...原创 2021-06-28 13:07:20 · 2470 阅读 · 1 评论 -
【vue3】element-tree 默认选中并高亮自动展开某个节点,通过点击按钮控制expanded来控制展开
参考:element-ui默认选中并高亮某一个树节点效果:代码实现:<template> <div> <el-button type="primary" @click="handleExpandChildNodes" >点我手动【展开】当前选中节点的子节点</el-button ><el-button type="danger" @click="handleUnExpandChildNodes" width原创 2021-06-08 17:30:56 · 5726 阅读 · 2 评论 -
【Vue3】【方案二】element-tree通过setCurrentKey来实现 点击读取输入来触发树的【选中】并【自动展开】的效果
参考:无前文提要:【Vue3】【方案一】通过按钮触发树的【选中】和【自动展开】效果方案二:我们希望根据输入内容,实时展示对应选中的节点:<template>需要修改的地方:需要绑定一个data里面的值,使用v-model实时读取当前输入,需要设置一个引用组件的点:ref="tree",使得后面的method里面的函数可以操控在template里面的dom元素需要设置一个node-key,这个值需要独一无二,根据文档内容:需要设置待被选择的节点的ke原创 2021-06-08 16:07:28 · 3335 阅读 · 2 评论 -
【Vue3】【方案一】element-tree通过setCurrentKey来实现 点击按钮触发树的【选中】并【自动展开】的效果
目录:参考:方案一:`template`需要修改的地方:`参考:Vue – Element UI的Tree组件中,this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点无效果方案一:我们希望点击按钮,点击后,树节点就自动被选中template需要修改的地方:需要设置一个引用组件的点:ref="tree",使得后面的method里面的函数可以操控在template里面的dom元素需要设置一个node-key,这个值需要独一无二,根据文档内容:原创 2021-06-08 15:46:37 · 8742 阅读 · 11 评论 -
【vue3】设置element-tree的选中效果focus,鼠标飘过hover和利用按钮触发this.$refs[“tree“].setCurrentKey进行选中的样式
设置element-tree,选中,鼠标飘过和利用setCurrentKey进行选中的样式这里可以看到,有两个选中的样式设定,这里一个是基于点击触发focus的样式,一个是基于current的触发选中。他们的区别是,一个是鼠标点击导致的触发,一个可能是点击其他按钮或者触发事件,导致触发了函数this.$refs["tree"].setCurrentKey(caseId);从而也触发了选中,但是这个选中是基于当前节点的选中代码.el-tree-node:focus > .el-tree-原创 2021-06-08 13:54:55 · 2800 阅读 · 0 评论 -
【vue3】el-input 的获取焦点——el挂载:自定义指令,focus使 input 获取焦点(el-input 的Input Methods)
参考网址:(适用vue2)让element-ui的输入框聚焦的4种方式ElementUI:使input自动聚焦的两种方法使el-form中的el-input自动获取焦点在vue3中,保留了自定义指令的特性——【官网链接】:自定义指令代码: 注意这里的el需要使用el.children[0].focus(); 因为el-input这是个组件,input外面被一层 div 包裹着,el打印出来是外面这个 div,需要找到内层的input详情见:分析(点击跳转到分析) directives原创 2021-06-03 23:05:31 · 8134 阅读 · 7 评论 -
【Vue3】优雅地使用 element-ui 中的 table 组件<一>
前言:如果你不了解什么是slot,建议先去补知识:【建议参考的好文】(虽然文中的语法是vue2,现在已经是vue3,但是概念和思路讲得十分清楚:)Vue中slot与slot-scope的理解及使用【官方文档】:插槽简单来说,slot就是一个可以被替换的接口(插座),例如: 有天我写了一个机器人,并在机器人的心留下了一个插槽(slot)。如果我想做一个牛心的机器人,那么我就定义一个牛心,然后将牛心加到机器人身上。 当机器人运行到使用心脏的位置时,读取到这里插入了一个牛心,于是机器人将牛心的插入使原创 2021-06-03 19:04:15 · 2899 阅读 · 2 评论 -
【Vue3】refs的使用和v-if冲突,undefined “TypeError: Cannot read property ‘$refs‘
使el-form中的el-input自动获取焦点https://www.cnblogs.com/rockyjs/p/13974649.htmlhttps://segmentfault.com/q/1010000021805173问题:v-if this.$refs无法获取ref的值出现了报错:Error in nextTick: "TypeError: Cannot read property '$refs' of undefined"靠谱的解决方法:1.不要使用ref的方法,而是使用.原创 2021-06-02 12:57:14 · 11525 阅读 · 0 评论 -
【Vue-2】flask+vue时,浏览器可正常访问,但从vue访问返回Error: Network Error
问题:flask+vue时,flask的网址可正常访问,但从vue访问返回【Error: Network Error】解决方案:在flask里 加一句:CORS(app, supports_credentials=True)解决跨域问题,服务端把CORS配置好,或者用node做代理层访问API浏览器访问时,对跨域请求进行了组织, 而vue的response没有, 所以用浏览器是可以进行请求的并且请求成功了, 但是vue肯定是不行的.开发环境的话可以通过Cors做一个中间层进行代理,js发原创 2021-05-29 21:30:13 · 2838 阅读 · 0 评论 -
【Vue-1】通过引用script的方式,快速开始一个Vue的helloWord
Vue是前端工具,封装得较好,下面就来快速地构建一个vue的helloworld界面下载Vue提供的js文件下载地址将下载后的vue.min.js文件和你的Test.html文件放在一个目录下即可Test.html:<!DOCTYPE html><html> <head> <title>Test Case</title> <!-- 引入 echarts.js -->原创 2021-05-24 21:19:56 · 352 阅读 · 2 评论 -
【Android】入门的一些知识。
有时候,第一次打开eclipse程序时,就算是新建一个HelloWorld文件,也很吃力。环境变量控制不正确,还有SDK和Target匹配不好……这些都是因素。先尝试下面这几个办法,1.Lint自动检查出错。点Android Tools>Clean Lint Made即可。2.点Project>Clean。合适于已经配置好的文件,但是打开时莫名无法运行。原创 2017-03-02 20:41:28 · 299 阅读 · 0 评论 -
Andriod 入门
开始学习Android,感觉有诸多困难。先从模拟器(AVD)入手吧。Device:选择设备,比如分辨率,大小等等。 QVGA:QVGA即"QuarterVGA"。简介顾名思义即VGA的四分之一尺寸,亦即在液晶屏幕(LCD)上输出的分辨率是240×320像素。QVGA支持屏幕旋转,可以开发出 相应的程序,以显示旋转90°原创 2017-02-26 11:00:54 · 277 阅读 · 0 评论 -
json.dumps() 和 json.loads()
参考网址:原文链接!!!!在此!!!自码留存,怕自己忘了,没什么别的目的。json.dumps()python代码:json.dumps() :将字典转化为字符串json.loads() :将字符串转化为字典字典:键值对的形式dict = {"name":"zhangsan","age":24}json.dumps()之后变成了字符串import jsondict =...原创 2019-07-19 11:02:41 · 1704 阅读 · 0 评论 -
【js】箭头函数表达式
参考网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。箭头函...转载 2019-07-16 11:32:37 · 441 阅读 · 0 评论 -
【2020春招美团前端面试的尴尬】日常尴尬的菜鸡时刻,面试官辛苦了。。。
碎碎念投了个前端岗,至于为啥,我……emmm,就随缘乱投的,也没好好想,因为觉得可能笔试就gg了,考完研以来一直在咸鱼,就想着锻炼一下自己,根本没有看算法,觉得肯定过不了笔试,结果收到了美团的面试电话,说次日面试。我很珍惜每次面试锻炼自己的机会,于是预先网上搜了题,做了一百多个,但是,js和css不是一夜之间能速成的,另外一年前的开发项目,到现在确实也记不得多少了。。。所以就导致了异常尴尬的面...原创 2020-03-24 19:54:10 · 2900 阅读 · 2 评论 -
【Vue】组件进阶——优雅的表达:单个根元素,使用 events 向父组件发送消息
参考网址:https://vue.docschina.org/v2/guide/components.html单个根元素根元素也就是说在网页上作为根的元素,一般<html></html>这样的就是根元素。在创建 <blog-post> 组件时,最终的模板中,不仅要包含标题:<h3>{{ title }}</h3>至少,还需...原创 2019-07-15 16:03:35 · 1016 阅读 · 12 评论 -
【Vue】在组件中使用 v-model
参考网址:https://vue.docschina.org/v2/guide/components.html在组件中使用 v-model自定义事件(custom event),还可以用来创建出「实现 v-model 机制的自定义输入框(custom input)」。回顾前面章节中:<input v-model="searchText">等同于如下:<input ...转载 2019-07-15 16:24:16 · 497 阅读 · 1 评论 -
【Vue】表单 input 绑定
网址:https://vue.docschina.org/v2/guide/forms.html表单 input 绑定基础用法可以通过使用 v-model 指令,在表单 input, textarea 和 select 元素上创建双向数据绑定。v-model 指令可以根据 input 的 type 类型,自动地以正确的方式更新元素。虽然略显神奇,然而本质上 v-model 不过是「通过监听用...转载 2019-07-15 16:31:23 · 1629 阅读 · 0 评论 -
【Echart和vue入门从0到0.5】从什么都不会到快速地学会用Echarts画一些图
参考网址:一些关于html标签的说明:http://www.w3school.com.cn/tags/tag_script.aspEcharts很方便,学习它需要一些前置知识,html和css布局,js等等,但是好在上述这些会用不难,学精比较难,不管上面那些学没学过,用Echarts涉及的知识都不多、前端其实和搬砖差不多,我觉得可以归类为历史政治那样的背诵型文科。下面开始,结果:全部...原创 2019-07-11 16:49:52 · 266 阅读 · 0 评论 -
windows下,npm启动vue出现 Error: EACCES: permission denied
permission denied 是由于没有权限或者已经被占用了,windows下,有时会因为设置了代理,或者一些新安装的应用,导致80端口被占用,解决方案两条:1.取消占用,参考下面网址https://jingyan.baidu.com/article/08b6a591b23ebe14a8092231.html如何查找端口占用:netstat -ano | findstr ":80...原创 2019-07-24 10:50:12 · 4597 阅读 · 0 评论 -
【python】flask搭建一个上传网站css+js+flask(1)
参考代码: https://github.com/blueimp/jQuery-File-Upload/代码逻辑由app.py决定,具体功能见我加上的注释:app.py#!flask/bin/python# Author: Ngo Duy Khanh# Email: ngokhanhit@gmail.com# Git repository: https://github.com...原创 2019-07-25 17:13:55 · 934 阅读 · 0 评论 -
【Vue】computed 属性和 watcher
引用网址:https://vue.docschina.org/v2/guide/computed.htmlcomputed 属性在模板中使用表达式是非常方便直接的,然而这只适用于简单的操作。在模板中放入太多的逻辑,会使模板过度膨胀和难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}&l...转载 2019-07-15 10:13:39 · 577 阅读 · 0 评论