- 博客(35)
- 收藏
- 关注
原创 vue-quill-editor 富文本器,自定义属性字体、字号
解决vue-quill-editor自定义工具栏内容、包括字体、字号、等解决字体、字号重复问题
2022-09-16 10:28:58 3474
原创 关于elementUI中el-check-box多选问题
addItemFn (itemList, index) { for (let j = 0, item = null; j < itemList.ddList.length; j++) { item = itemList.ddList[j]; item.value = ""; if (item.controlType === "CB") { if (item.itemOptionList.length > 1...
2022-02-09 16:46:04 685
转载 vuejs中拖动改变元素宽度实现宽度自适应大小左、中、右布局
原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。在vuejs中使用,methods设置方法,mounted钩子挂载:html部分代码:<t...
2021-08-06 16:44:40 895
转载 JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
在写一个类似百度搜索框的自动提示功能时候,使用了AJAX+keydown事件。调试时候我发现,当在搜索框中输入文字的时候,控制台在不停发送AJAX。这在本地服务器测试还好,如果我把它拿到运行环境,很可能出现提示功能卡顿,甚至没等提示出现用户就输入完毕的现象。毕竟大家现在打字都很快啊。于是我找到了一个新技能,函数节流 & 函数去抖。throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。throttle 等时间间隔执行函数。debounc
2021-05-18 14:13:11 149
原创 element UI tree 指定节点选中 setCurrentKey
点击按钮节点高亮显示代码<!-- node-key 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 highlight-current 是否高亮选中节点默认false。 expand-on-click-node 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 default-expanded-keys 默认展开的节点的 key 的数 default-expand-all 是...
2021-05-10 11:01:54 6035
原创 js从 1,2,3,4中选择3个数组成无重复的情况
var m=0 ;for(var i = 1; i <= 4; i ++){for(var j = 1; j <= 4; j ++){for(var k = 1; k <= 4; k ++){if(i != j && j != k && k != i){m=m+1;console.log("" + i + j + k +...
2021-04-23 16:24:15 452
原创 排列组合 算法题
从6名同学中选派4人分别参加数学、物理、化学、生物四科知识竞赛,若其中甲、乙两名同学不能参加生物竞赛,则选派方案共有()A.180种 B.280种 C.96种 D.240种 试题分析:特殊位置优先考虑,既然甲、乙不能参加生物竞赛,则从另外4个人中选择一个参加有种方法,然后将剩下的5个人中选择3个人排剩下3科,有,故....
2021-04-23 11:49:09 152
原创 在vue中methods 中写 拼接html 元素 @click 不起作用问题 ,给指定文字加样式
实现效果,指定文字变红,点击红色文字,弹出窗口html<div v-html='text' ></div>// 首先要把调用的方法 赋值到window上created() { window.ale=this.ale; },methods: {querysour(e){ let replaceStr; e=e.replace(/(^\s*)|(\s*$)/g, "")...
2021-04-22 19:26:28 866
原创 前端面试高频题汇总
一面汇总Vue组件通信(父子 兄弟) 生命周期钩子,包括执行顺序,每个阶段标志(每个阶段都做了什么) V-if 和 v-show 区别 Compute 和 watch 的区别 Mixins 的使用JsES6新特性(https://es6.ruanyifeng.com/) ES5怎么实现继承 ES6怎么实现继承 区别在哪里 原型和原型链 闭包(使用场景、优缺点) Js获取原型链的方法 Js 隐式类型转换规则 比如数字转字符串 对象的深拷贝 浅拷贝 ==操作符的强制类型转换 数组
2021-04-22 16:34:51 128
转载 js 原型链
这个绕来绕去的线是不是很恶心呢?那就先别管这些了,等整个逻辑我们梳理完就自然而然的会明白了~一、 什么是原型链? 每个对象都可以有一个原型_proto_,这个原型还可以有它自己的原型,以此类推,形成一个原型链。查找特定属性的时候,我们先去这个对象里去找,如果没有的话就去它的原型对象里面去,如果还是没有的话再去向原型对象的原型对象里去寻找...... 这个操作被委托在整个原型链上,这个就是我们说的原型链了。二、原型指针 我们知道了原型的概念,接下来我们就照着上面的图...
2021-04-19 17:40:00 87
转载 ES6新特性概览
ES6新特性概览本文基于lukehoban/es6features,同时参考了大量博客资料,具体见文末引用。ES6(ECMAScript6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。目前想要运行E..
2021-04-19 17:36:30 156
转载 es6中Maps与WeakMaps区别
MapMap解决的是Object的键值对中键只能是字符串的问题。Map是Es6提供的新的数据结构,是键值对的集合。Map的“键”不限于字符串。各种类型的值(包括对象)都可以当做键。WeakMapWeakMap结构与Map结构基本类似,唯一的区别就是WeakMap只接受对象作为键名(null除外),而且键名所指向的对象不计入垃圾回收机制。WeakMap专用场景:它的键所对应的对象可能会在将来消失。典型应用:一个对应DOM元素的WeakMap结构,当某个DOM元素被清除,其所对应
2021-04-19 17:33:40 296
转载 WebP 相对于 PNG、JPG 有什么优势?
WebP 在各大互联网公司已经使用得很多了,国外的有 Google(自家的东西肯定要用啦,Chrome Store 甚至已全站使用 WebP)、Facebook 和 ebay,国内的有淘宝、腾讯和美团等。WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。可以得出结论:PNG 转 WebP 的压缩率要高于 PNG
2021-04-19 17:22:15 2256
转载 webpack的loader和plugin的区别
【Loader】:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为dataURL。比如说:CSS-Loader,Style-Loader等。loader的使用很简单:在webpack.config.js中指定loader。module.rules可以指定多个loader,对项目中的各个loader有个全局概览。loa.
2021-04-19 17:18:12 167
转载 vue中 key 值的作用
vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。2. 同一层级的一组节点,他们可以通过唯一的id进行区分。基于以上这两点假设,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。这里我们借用React’s当页面的数据发生变化时
2021-04-19 17:14:41 168
原创 Invalid prop: custom validator check failed for prop “pagerCount“.
页面报错解决办法
2021-04-09 14:20:54 462
转载 vue中点击标签滚动到相应内容位置
vue中点击标签滚动到相应内容位置<template><div class="box"><div class="btn"><span @click="Submit(1)">按钮一</span><span @click="Submit(2)">按钮二</span><span @click="Submit(3)">按钮三</span></div>...
2021-04-01 10:50:33 901
原创 前端用JS + SVG 实现关系图谱 流程图
重要需掌握,画线,矩形、圆画线:<line x1="521" y1="108" x2="521" y2="145" stroke="black" stroke-width="2" marker-start="url(#ClearTriangleL)">></line>矩形:<rect x="408" y="8" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"><..
2021-03-26 15:45:38 2857
转载 js循环的方法分析
首先,我在这里先列出几种常见的遍历机制,然后针对部分来做一个我对它的理解,有不同看法的老铁也可以分享一下,下面是我列出来的几种遍历的方法,另外我们常用来中断循环的语句我在这里简单的提一下: a、continue: 中断本次循环; b、return和break直接跳出循环。// forvar arr = [1, 2, 3]for(var i = 0; i < arr.length; i++) { //do something};// for...of...for
2021-03-23 15:41:45 137
原创 Error in nextTick: “TypeError: Cannot read property ‘resetFields‘ of undefined“
Error in nextTick: "TypeError: Cannot read property 'resetFields' of undefined" 报错解决办法this.$nextTick(()=>{ this.$refs['form'].resetFields(); // 清空数据})
2021-03-12 15:41:10 693
转载 vue相关插件及框架全家桶
一、UI组件及框架element- 饿了么出品的Vue2的web UI工具套件mint-ui- Vue 2的移动UI元素iview- 基于 Vuejs 的开源 UI 组件库Keen-UI- 轻量级的基本UI组件合集vue-material- 通过Vue Material和Vue 2建立精美的app应用muse-ui- 三端样式一致的响应式 UI 库vuetify- 为移动而生的Vue JS 2组件框架vonic- 快速构建移动端单页应用vue-blu- 帮...
2021-02-26 16:20:55 524
原创 element 框架 el-upload 上传文件问题
在使用Vue+element 中的el-upload组件做文件上传时,最根本的原因是把路径写错<el-upload:action="http://172.16.118.242:8241/personal/importExcel":show-file-list="false":auto-upload="true":before-upload="beforeAvatarUpload":on-success="successFun":on-error="errorFun">
2020-11-03 16:37:41 587
原创 ElementUI 中 Tree 树形控件 添加自定义样式 虚线及图标样式
修改前样式修改后样式如图:<el-tree :data="data" :props="defaultProps" class="tree-line" icon-class="el-icon-plus" @node-click="handleNodeClick"></el-tree><style lang="scss" type="text/css" scoped>.tree-default{ >>> .el-tree-node.
2020-11-02 15:24:46 4800 1
原创 CSS实现单行、多行文本溢出显示省略号
CSS实现单行、多行文本溢出显示省略号(…)如果实现单行文本的溢出显示省略号。实现方法:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图:多行文本溢出显示省略号,如下。实现方法:display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;...
2020-10-20 14:19:16 82
原创 Css实现漂亮的滚动条
::-webkit-scrollbar {width: 5px;height: 5px;}::-webkit-scrollbar-track-piece {background-color: rgba(0, 0, 0, 0.2);-webkit-border-radius: 6px;}::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: rgba(125, 125, 125, 0.7);-webki...
2020-09-17 14:55:42 209
原创 elementUI +vue表单验证 后台请求动态验证
elementUI +vue表单验证 后台请求动态验证在<el-form ref="form" :model="form" :rules="formRule" size="small">中 添加上:rules="formRule"<el-form-item label="类名称" prop="name"> 加上prop属性
2020-09-16 17:04:08 1047 1
原创 文本框输入只能是 数字 小数点前面有0 ,且0的后面有大于0的数字例如 (02.11 )
正则表达式文本框输入只能是 数字 小数点前面有0 ,且0的后面有大于0的数字例如(02.11 )var v= /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;if(v.test(a)){alert('Yes')}else{alert('No');}
2020-09-16 16:54:44 299
原创 vue+elementUI tree 一层层加载
要实现懒加载必须加 lazy 属性<el-tree props="defaultProps" :load="loadNode" :expand-on-click-node="false" node-key="id" lazy accordion@node-click="handleNodeClick"></el-tree>export default { data () { return { treeData:...
2020-08-27 15:50:54 1057
原创 element ui table表格 根据文本框输入内容,表格对应列匹配文字变红
<el-table :data="tableData" stripe size="medium" > <el-table-column prop="name" label="中文名称" :show-overflow-tooltip="true" width="200" sortable="custom"> <template slot-scope="scope"> <span v-...
2020-08-27 15:32:57 1066
原创 关于vue-cli安装问题
第一步:$node -v //查看node的版本 ,一定要在4版本以上第二 步:安装vue-cli 如果是windows 系统 $cnpm install -g vue-cli // -g 全局安装 如果是Mac系统$sudo cnpm install -g vue-cli第
2017-09-28 17:59:41 384
转载 css3波纹效果
波纹效果*{margin:0;padding:0;}.contain-box{width: 300px;height: 240px;margin: 50px auto;position: relative;/*background: #009ad7;*/overflow: hidden;}.contain-box .wave{positi
2017-09-28 17:55:14 1362
原创 关于input type=file 获取文件的路径问题
可以获取文件的绝对路径,在不同浏览器下,显示存在兼容问题。在IE下可以获取绝对路径,在火狐浏览器下获取的是文件的名称。在ie8以下的执行结果:在火狐浏览器下的执行结果:
2016-08-22 10:59:26 8279 3
原创 jQuery中的全局函数getJSON()异步读取数据乱码问题
在使用jQuery中的全局函数getJSON()异步读取数据时有时会出现乱码的原因1.我们在用记事本创建文本文件时默认文本为.txt文件,2.我们应该将其另存为 选择 编码修改编码形式为UTF-8
2016-07-25 11:06:08 394
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人