![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 50
Lemon今天学习了吗
Lemon的知识库
展开
-
vue.js el-tooltip根据文字长度控制是否提示toolTip
一、需求:如何判断当前文本文字是否超出文本长度,是否需要出现提示toolTip。1、表格字段鼠标放置el-popover出现 “引用主题” 的具体内容;2、定义isShowTooltip控制是否展示提示文字tooltip;3、对应的鼠标放置触发的方法实现;原创 2024-02-21 13:34:11 · 745 阅读 · 0 评论 -
关于jointjs的详细介绍
JointJS是一个专注于图形可视化的js库,用于创建交互式的图形和图表。它基于HTML、SVG(可缩放矢量图形)和CSS(层叠样式表)技术,主要用于在Web应用程序中实现可视化图形编辑器或图表展示(流程图、关系图和定制化图形)。//生成画板var paper = new joint.dia.Paper({ //生成画布});原创 2024-01-11 17:50:08 · 1655 阅读 · 0 评论 -
vue.js el-table 动态单元格列合并
一个展示列表,表格中有一部分列是根据后端接口动态展示,对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的,则正常展示,如果是’类型2‘的数据,则合并当前数据的动态表格。3、 在表格上使用:span-method="arraySpanMethod"方法触发表格;4、在arraySpanMethod方法内接收数据处理合并;2、在表格上对要合并的单元格类型进行区分;1、先将普通表格实现,不考虑合并效果;原创 2023-12-04 17:00:51 · 1477 阅读 · 0 评论 -
vue el-table字段点击出现el-input输入框,失焦保存
【代码】vue el-table字段点击出现el-input输入框,失焦保存。原创 2023-11-20 15:16:11 · 1483 阅读 · 0 评论 -
vue.js实现科室无限层选中和回显
【代码】vue.js实现科室无限层选中和回显。原创 2023-11-06 15:13:06 · 176 阅读 · 0 评论 -
vue pc端/手机移动端 — 下载导出当前表格页面pdf格式
一、需求:在手机端/pc端实现一个表格页面(缴费单/体检报告单等)的导出功能,便于用户在本地浏览打印。1.将要打印的页面转换成图片( 用到的组件 html2canvas );2.然后将图片导出成PDF( 用到的组件 jspdf )。原创 2023-09-26 13:50:11 · 1150 阅读 · 4 评论 -
响应式赋值Object.assign()和JSON.parse(JSON.stringify())的区别
前言:今天优化代码的时候发现了Object.assign和JSON.parse(JSON.stringify())的区别。需求:点击编辑弹出编辑框,修改后的内容点击认按钮修改后的数据更新回显到原列表。对比:Object.assign。原创 2023-07-24 10:42:08 · 337 阅读 · 0 评论 -
vuejs清空表单数据、删除对象中的空属性公共方法
对于复杂数据,使用element自带的方法可能不能满足我们的需求,所以可以封装一个公共方法在全局。原创 2023-07-10 18:11:51 · 1652 阅读 · 0 评论 -
js判断对象数组中的元素是否存在重复
1、使用Array.some()方法和自定义比较函数。2、使用Set数据结构。原创 2023-07-07 15:22:58 · 5772 阅读 · 0 评论 -
vue 根据分辨率自动调整css背景图片
一、场景:在不同的分辨率下使用同一张图片会出现拉伸或者压缩等变形情况,通常设计师会做两张图去适应1920和1440的分辨率,根据给定的图片对应不同分辨率显示。原创 2023-06-06 10:17:20 · 634 阅读 · 0 评论 -
vue.js 实现导入json解析成动态el-table树表格(接口文档功能)
一、需求描述:前段时间接到一个需求是做一个类似接口文档的显示功能,将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系,用element组件的树表格的形式展示,并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据,如下图所示;原创 2023-01-29 16:29:00 · 5289 阅读 · 24 评论 -
vue 更多筛选 列表字段动态搜索
一、需求:表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据。每一个查询字段都会调用一次查询接口。1.更多筛选字段获取,触发接口查询。点击确定按钮绑定触发的方法;2.列表页面在点击确定之后就触发了绑定在dialog的方法;4.监听在queryForm,自动触发表格接口调用方法;3.接口方法处理获取参数;原创 2022-12-14 14:55:18 · 2175 阅读 · 0 评论 -
vue 对象数组的数据正序、倒叙排序对应图表前十、后十展示
一、需求:使用echart图表点击按钮动态展示前十和后十数据,默认展示前十。原创 2022-12-14 13:14:01 · 1860 阅读 · 0 评论 -
vue el-upload实现图片和文字上传
slot="file" slot-scope="{ file }" 自定义插槽,可以在里面实现输入框。:file-list="imageList" 图片都存到的自定义 imageList 数组。:before-remove="() => false" 防止按下删除键图片和文字被删除。:before-upload="beforeAvatarUpload" 上传时的校验回调。:action="fileUrl" 调用接口自定义的fileUrl上传图片到的服务路径。原创 2022-11-25 18:53:39 · 4982 阅读 · 8 评论 -
vue.js 回显textarea入的空格和换行
一、场景:用户在表单或者textarea中输入的带空格和换行的内容提交后,在其他地方查看输入内容必须与输入的内容保持一致。原创 2022-11-23 11:35:44 · 5285 阅读 · 2 评论 -
js 字符串中间*号显示
1.需求:有掩码效果,但是又保留前后四位,当鼠标放置到眼睛图标上时弹出全部数据。原创 2022-11-11 17:32:16 · 1143 阅读 · 0 评论 -
vue 双向锚点实现 简易版(scrollIntoView)
一. 需求:左边是内容板块,右边是目录结构,点击右边内容跳转到左边相应位置展示,滑动左边内容右边目录自动跳转。原创 2022-11-11 16:24:59 · 4932 阅读 · 7 评论 -
vue 动态添加、修改、删除某一条数据
1.场景:最近需求多次出现要动态去增删改选中的一行数据,当只有一条数据时不让删除。原创 2022-11-10 17:38:01 · 3723 阅读 · 0 评论 -
vue 数组中不满足条件跳出循环
一、场景:在表格中选中的数据在右边显示,在点击确定按钮时,循环判断没有填写条件名称的数据,第一个不满足条件的显示输入框,且只弹出一次警告。3. 使用some方法return true跳出循环,数组里面所有的元素有一个符合条件就返回true;和map中使用break和continue不仅不能调出整个循环 ,还会报错,使用return也不行。二、分析:在vue项目中,循环多数习惯会用forEach、map等方法去遍历数组,但是大家会发现在。2. 使用try-catch-finally处理forEach的循环;原创 2022-11-02 11:14:48 · 4956 阅读 · 0 评论 -
js两个数组对应整合成table数据显示
场景:A数组的某个字段对应的value值,对应着B数组的某key值。要求获取B数组该key值所对应的value值组装成table的如下格式。原创 2022-10-12 13:59:29 · 582 阅读 · 0 评论 -
TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘)
一、报错如下:TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')三、原因:主要可能是跟el有关 ,我这边代码逻辑没有问题,是在vant组件的tab切换时出现该报错。主要时因为 v-if 后找不到该结点,切换到其他没有tab的页面就会报错。二、解决:将判断的 v-if 改成 v-show 报错消失。原创 2022-09-28 14:02:42 · 9967 阅读 · 2 评论 -
axios封装与拦截器使用
1.先安装axios;2. 新建一个http.js的文件;3.在接口文件中使用封装的axios;原创 2022-09-02 16:18:42 · 301 阅读 · 0 评论 -
JS中新逻辑赋值运算符使用(?.、? ?、| |=、&&=)
值(虚值):是在布尔值Boolean上下文中认定为 false 的值。逻辑空值运算符左到右操作,仅在x为nullish值(null或者undefined)时才将值分配x,x如果不是nullish值时压根就不会执行y了,更不存在赋值操作一说。)是根据nullish值来判断,而或运算符(||)是根据falsy 值来判断。:当左侧的操作数为nullish值(null或者undefined),返回其右侧操作数,否则返回左侧操作数。就是或运算符(||)与赋值运算符同时使用。三、逻辑或分配(||=):x ||= y。.原创 2022-08-31 16:56:32 · 1301 阅读 · 0 评论 -
移动端如何使用 vConsole 调试
前言:移动端(如手机、iPad)无法打开控制台像pc端一样使用console.log,使用chrome的inspect 也蛮麻烦的,借助vConsole就会变得很方便。方法二:下载源码文件:下载找到dist/vconsole.min.js 这个文件放到项目的static静态资源下面,然后在main.js中import进来。使用:VConsole 只是 vConsole 的原型,而非一个已实例化的对象。方法三:使用 CDN 直接插入到 HTML。方法一:使用 npm(推荐)...原创 2022-08-31 14:21:48 · 2327 阅读 · 1 评论 -
JS判断是否为数组的方式
4. Array.isArray():判断传递的值是否是一个数组,返回一个布尔值。是ES6新增的方法,所以低版本的浏览器可能不支持。因为构造函数的constructor属性在原型里,并且指向构造函数,所以可以使用constructor属性来判断一个实例对象。:检验构造函数的prototype属性是否出现在对象的原型链中,返回一个布尔值。可以获取到对象的不同类型。它除了可以检验是否为数组外,还可以检验是否是函数、对象、数字等;而来,也可以说判断它属于哪个类。...原创 2022-08-31 11:25:59 · 223 阅读 · 0 评论 -
Vue.extend()实现多个页面弹框登录(vue.use、vue.prototype)
Vue.prototype是在原型上定义,使其在每个Vue中的实例中可用。Vue.use()方法的核心就是Vue.prototype,只不过又封装了一层,执行你所提供 的。方法,更加的灵活,扩展性更好。Vue.prototype适合于注册Vue生态外的插件,Vue.use适合于注册Vue生态内的插件。使用基础 Vue 构造器,创建一个“子类”。当项目中想要每个页面或者特定的多个页面弹出、出现xxx内容时,可以使用Vue.extend()实现。......原创 2022-08-29 15:22:21 · 1460 阅读 · 2 评论 -
vue.js实现自定义tab滑动切换效果
前言:在使用uni-app组件时,需求方要求点击头部的tab切换时,首尾两个点击就在最前面和最后面高亮显示即可,中间的要求选中哪个tab哪个tab就在滑到最中间显示。如this.$refs.myTabRef.$el获取的就是该标签的类名my-tab。如this.$refs.myTabRef获取的myTabRef这个组件,可以使用myTabRef上的方法。获取组件实例 ,可以使用组件的所有方法 (使用在组件上)。vm.$refs:获取页面中所有含有ref属性的DOM元素(普通元素)。...原创 2022-08-25 14:52:18 · 4528 阅读 · 5 评论 -
JS对象方法脑图总结
方法总结在有道云笔记中,需要的自取。笔记中标红部分为常用方法。原创 2022-08-24 17:39:46 · 128 阅读 · 1 评论 -
JS的数组与字符串方法对比总结
前言:标红为常用的方法。每个方法都对应了介绍和示例,可以帮助更好的唤醒记忆,有需要的点击链接自取~原创 2022-08-23 14:04:53 · 300 阅读 · 0 评论 -
uni-app云打包(安卓)及push模块添加
以上命令运行完成后就会生成证书,路径就是你打开cmd所在的地方,我这里是C:\Users\25368文件夹下面会生成一个test.keystore证书。9. 在你的项目中打开 mainfest.json文件,找到 App模块配置-->Push --->点击申请开通。7. 根据控制台提示找到安装包apk 的位置,点击apk就可以在模拟器上查看啦。Android 包名:就是你打包时候生成的那个Android包名,一定要保持一致。原因是因为需要提前去。2.打开当下项目-->点击发行-->原生APP-云打包。..原创 2022-08-16 18:06:20 · 2574 阅读 · 0 评论 -
处理后端返回带标签数据的图片不显示问题
补充:有时候后端返回回来的图片后半截地址可能也是需要替换的,但是文件内容有多处使用了图片展示,如何才能全局替换文件地址?前言:在项目种经常会涉及到文件相关的展示操作,后端返回数据一般也是带标签的数据,这样可以根据要求来展示不同效果。解决办法:前端请求此图片的时候,需要后端提供图片文件真身所在的服务器域名,前端自己拼接前缀。原因: 因为服务器的域名可能会变换,所以数据库里的地址只能是相对路径;问题:图片返回只有后半截地址,导致图片无法显示。......原创 2022-08-16 10:53:19 · 1944 阅读 · 0 评论 -
解决vue重复点击路由报错问题:Uncaught (in promise) NavigationDuplicated
解决vue重复点击路由报错问题。原创 2022-07-26 15:19:14 · 433 阅读 · 0 评论 -
vue后台系统的流程
2.安装脚手架vue-clinpminstall-g@vue/cli,使用vue-V查看是否安装成功;10.登录注册页面跳转,在router文件夹下写跳转路由,import函数路由懒加载导入组件;11.登录注册的接口联调,在新建的api文件夹下引入封装的axios文件,编写并导出相关接口;13.登录成功后跳转到首页,之后的带权限的页面都是根据token值来判断是否跳转到重定向页面。5.去除一些vue自动生成的相关内容,如views文件夹下的页面及app.vue里的内容等;.........原创 2022-07-22 10:18:03 · 864 阅读 · 0 评论 -
动态加载JavaScript文件
前言为了提高加载的效率,先让一些文件不加载。例如天地图在登录之后就自动加载,载极大程度上影响了网页性能。我们可以选择载进入地图着地等需要用到天地图模块的时候在加载这个js文件。概念通过将阻止脚本从加载过程中移出(通常称为“延迟加载”)来优化网页性能,并仅在用户需要时加载脚本(通常称为“按需加载”)。2.方法二jQuery提供的getScript()方法来检索和加载JavaScript文件;这里主要讲到两种动态加载方式。切换页面想移除这个js文件。...原创 2022-07-21 18:06:37 · 1604 阅读 · 0 评论 -
如何使用git使用创建和拉取项目
下载:直接去官网下载,windows操作系统可直接使用淘宝镜像下载地址:CNPM Binaries Mirror下载安装后,单击右键如图所示即为成功。 使用:一、创建项目: 1.先创建应该文件夹; 2. 在文件夹内右击选择 :Git Bash Here 3. 创建项目根目录:输入 mkdir lemon 表示在文件夹根目录创建一个lemon文件夹; 4. 初始化git :git init 此时会多出一个.git的隐藏文件夹; 5. 创建文件并将文件添原创 2022-07-13 18:05:18 · 2363 阅读 · 0 评论 -
js将对象中多个数组对象合并成一个数组
需求:后端返回接口是一个对象里面包含n个数组对象,要将这些数组对象都变成一个数组然后再放到列表展示。大致结构如下: 实现:原创 2022-07-13 10:58:36 · 4109 阅读 · 0 评论 -
vue.js使用this[ ]()动态获取方法
使用this[ ]()写法,在[ ]内填入变量,即可调用不同的方法;this.$refs[ ]同样适用。关于this.$refs的使用,先来介绍一下:介绍:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册。$refs与document.getElementById方法相比,会减少获取DOM节点的消耗。用法:强调:如果有多个this.$refs需要动态被使用,就可以通过this.$refs[ ]这种方法在[ ]中传入要动态改变的名字。...原创 2022-07-08 18:01:34 · 3745 阅读 · 1 评论 -
vue中使用天地图
天地图官网:天地图API一、介绍:天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口,以HTML 5.0的形式提供各种地图服务和数据,如地图展示、标注、定位等。为开发者提供了快速调用天地图在线地理信息服务的通道,包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等。支持PC端和移动端基于浏览器的地图应用开发,支持主流的HTML4.0和HTML5.0特性的地图开发。二、实现步骤:三、示例:vue +天地图实现地图上添加覆盖物;四、效果展示:...原创 2022-07-08 14:26:12 · 5419 阅读 · 11 评论 -
js中reduce()方法的使用
一、前言:for循环可以做到的事情reduce()都可以做到,甚至操作起来更加简单方便和高雅。reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。二、语法:arr.reduce(callback,[initialValue])三、使用 :箭头函数 + reduce()1.基础用法:累加和累积乘法 2.获取一个数组的最大值和最小值3.统计数组中每个元素出现的次数 注意:这里使用map对象而不是对象{}来存储统计后的频率,因为数组中的元素可能是对象类型,而原创 2022-07-05 18:06:20 · 2703 阅读 · 0 评论 -
js中的WebSocket
一、WebSocket定义: html5提供的单个TCP连接上进行全双工通信的协议。WebSocket允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。二、WebSocket特点:三、WebSocket用法: WebSocket的所有操作都是采用事件的方式触发的,这样不会阻塞UI,使得UI有更快的响应时间和更好的用户体验。 浏览器通过Javascript向服务器发原创 2022-07-05 15:17:57 · 11798 阅读 · 0 评论