![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 53
Lemon今天学习了吗
Lemon的知识库
展开
-
vue.js el-tooltip根据文字长度控制是否提示toolTip
一、需求:如何判断当前文本文字是否超出文本长度,是否需要出现提示toolTip。1、表格字段鼠标放置el-popover出现 “引用主题” 的具体内容;2、定义isShowTooltip控制是否展示提示文字tooltip;3、对应的鼠标放置触发的方法实现;原创 2024-02-21 13:34:11 · 745 阅读 · 0 评论 -
Vue ElementUI中el-table表格嵌套样式问题
1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了,实际上接口数据并不是都有children数组;1、两个表格嵌套,当父表格有children数组时子表格才展示;2、在表格嵌套后,打开子表格,高亮显示在经过子表格后对应不上;2、子表格数据少于父表格展示字段,且对应固定操作列不同;3、父表格的操作列固定在右侧影响了子表格的显示;4、滑动到表格底部时,父子表格的固定列对不齐;原创 2024-02-05 12:14:45 · 2878 阅读 · 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 评论 -
electron桌面应用webSoket实时弹框提示实现
1、当有弹框提示的情况时,会弹出如下提示,点击查看自动跳转到当前地址,点击关闭则关闭当前提示窗口;一、实现效果:网页端或者移动端进行了审核操作,在电脑右下角提示用户查看。3、在src文件夹下新建remind.html实现提示弹框具体内容;1、在主进程main.js中创建弹框,并确定弹框的位置;3、在登录成功后使用webSoket实时监听消息;4、主进程收到消息后触发提示弹框展示;2、登录成功后获取实时信息弹框提示;4、综上所述,即可完成桌面提示功能。2、编写弹框内容和样式;原创 2023-11-21 17:06:37 · 1463 阅读 · 1 评论 -
electron项目开机自启动
2、在渲染进程login.js中,获取用户操作并localStorage存储数据,保存用户的操作;4、在主进程main.js中,收到登录后的消息,自动配置是否开机自启动;5、在渲染进程login.js中,重新登录时判断是否勾选开机自启动;3、在渲染进程login.js中,在登录成功后设置是否开机自启动;1、在渲染进程login.html中,画好界面,默认勾选;一、效果展示:界面控制是否需要开机自启动。原创 2023-11-21 16:14:47 · 1623 阅读 · 0 评论 -
Electron入门
Native API : Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。Chromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面。Node.js :让Electron有了底层的操作能力,比如文件的读写,甚至是集成C++等等操作,并可以使用大量开源的。命令行启动一下Electron,出现下图弹出则安装启动成功;4、运行项目,在终端里输入。原创 2023-11-21 13:44:07 · 572 阅读 · 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.js处理数组对象中某个字段是否变为两个字段
产品要求做一个时间步骤条,使用目前后端已返回的数据进行操作实现。时间步骤条要求日期和时间分开显示且相同日期只显示第一个日期。字段表示当前到达第几步,从0开始,对应显示数组的前几个展示。后台返回的是一个整的日期时间字段。图左边为实现效果,右边为后台返回的接口。原创 2023-10-07 15:32:25 · 171 阅读 · 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 自定义el-table穿梭框功能
一、需求描述:前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能,弹框的左边是全部数据展示,点击表格行数据可以选中自动增加到右边的已选框,并且可以手动删除、重置选中数据。点击确定后到展示到主页面,被选中的数据打开弹框不能再次选择。原创 2023-06-05 16:18:52 · 2413 阅读 · 2 评论 -
git常规操作 | 将A项目的某一分支迁移到B项目上
1.重命名分支(如果修改的分支只是在本地,没有推送到远程,只需要执行该操作即可。3.创建新分支(newdev),并把当前分支(master)内容复制到新分支(newdev)中。1.点击从...创建分支,输入要创建的新分支的名字(newdev)按下enter键确认;3.在本地新建一个分支,该分支的名称最好与项目A中新增的那个分支的名称相同以便区分;3.清理本地不存在的远程分支,如别人删除了dev,但是你本地还有,执行该条命令。5.建立远端分支(newdev)和本地分支(newdev)的关联。原创 2023-04-04 13:22:55 · 3909 阅读 · 1 评论 -
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 评论 -
TypeScript(ts)笔记总结02
一、函数二、可选参数与默认参数三、函数重载四、泛型五、泛型接口六、泛型类七、泛型约束原创 2023-01-09 13:32:04 · 188 阅读 · 0 评论 -
TypeScript(ts)笔记总结01
一、基础类型二、接口三、函数类型四、类类型五、类六、继承七、多态注:出自B站尚硅谷Vue.JS教程快速入门到项目实战视频的笔记总结,感谢~~~原创 2022-12-29 17:55:20 · 263 阅读 · 0 评论 -
vue3+ts项目 笔记总结
1.在终端新建项目输入:vue create vue3-ts2.接下来的每一步如图所示:注意要通过空格选中TypeScript原创 2022-12-21 17:59:46 · 3631 阅读 · 1 评论 -
vue 更多筛选 列表字段动态搜索
一、需求:表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据。每一个查询字段都会调用一次查询接口。1.更多筛选字段获取,触发接口查询。点击确定按钮绑定触发的方法;2.列表页面在点击确定之后就触发了绑定在dialog的方法;4.监听在queryForm,自动触发表格接口调用方法;3.接口方法处理获取参数;原创 2022-12-14 14:55:18 · 2175 阅读 · 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 评论 -
vant+vue在静态页面实现车牌号软键盘
1.因为是在html静态页面中使用,所以要先引入vant.css、vant.js、vue.js到需要使用的html页面;2.将实现好的车牌软键盘功能放到一个js里面,再将该组件使用js方式引入到html界面,同样该组件的css代码也要引入;2. 当在多个静态页面需要使用该组件时,如何封装成组件?1、如何将选中的车牌号回显在需要显示的表单中?原创 2022-09-29 14:30:48 · 3377 阅读 · 0 评论 -
如何手机上检查h5页面
一、前提:保证开发用的电脑与手机连的是同一个网络;二、在电脑连接的网络上找到属性中的IPv4 地址;原创 2022-09-28 14:21:14 · 1633 阅读 · 0 评论 -
axios封装与拦截器使用
1.先安装axios;2. 新建一个http.js的文件;3.在接口文件中使用封装的axios;原创 2022-09-02 16:18:42 · 301 阅读 · 0 评论 -
vue配置多个服务端请求地址并实现scp2自动部署
通常情况下,一个项目会有开发环境、内网环境、测试环境、生产环境等多个环境,通过请求不同的服务器来获取数据,如果可不修改代码,通过执行不同命令就发布不同环境,我们的效率会得到很大提升。原创 2022-09-02 14:54:40 · 1488 阅读 · 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 评论