功能实现
分类下为实现功能为主
xt_XiTu
这个作者很懒,什么都没留下…
展开
-
vue开发可拖拽可放大模块的功能
开发中发现遇到一个小问题,只开发子组件时,拖拽移动位置正常,但实际到父组件中引入,鼠标按下之后并不能直接拖拽,而是鼠标抬起后拖拽内容跟随鼠标移动,再次鼠标按下抬起才能停止。最后发现是由于L1Map组件内 img 标签原本就可以拖拽,导致出现此问题,在img标签配置。可拖拽放大的组件代码。原创 2024-04-07 09:56:20 · 300 阅读 · 0 评论 -
js将阿拉伯数字转为中文数字
项目中需求,需要自己根据数组顺序,回显对应数据名称,例如:事项一、事项二,记录一下阿拉伯转中文数字方法。原创 2024-03-22 10:27:08 · 267 阅读 · 1 评论 -
记录一下el-table的tooltip换行
一些需求场景下,需要保持el-table中tooltip出现的时机,并且当前代码编写时完全不能通过js控制tooltip禁用属性时,可以通过以下方法实现tooltip换行。1、对应单元格的 showOverflowTooltip 属性设置为true,tooltip出现时机依然使用组件原本的。2、监听中判断当前单元格宽度与内容实际宽度,当内容实际宽度 > 单元格宽度时,对应的tooltip设置为不禁用即可。2、对应单元格内容使用p标签展示,当前单元格依然可设置一行展示,tooltip中可以按照p标签换行。原创 2024-03-11 10:31:23 · 1265 阅读 · 0 评论 -
js判断是否为数字的方法
找到一个比较好用的方法,记录下来,方便以后使用查找。isNumber(‘无’) —> false。原创 2024-01-05 11:08:50 · 591 阅读 · 0 评论 -
vue实现element-ui对话框dialog可拖拽功能
使用时直接在el-dialog标签中加上 v-dialogDrag 即可。业务中有支持弹窗拖拽的需求,根据网上搜到的内容实现了,整理记录一下。创建directives.js文件。在main.js中引入。原创 2022-11-15 10:07:20 · 572 阅读 · 1 评论 -
利用js将列表数据转换为树结构
记录一下遇到过好多次的需求,重复写太恶心了parent_id:最顶层的默认父节点值list:需要处理的列表数据返回的数据为处理好的树结构数据 const dealTreeData = (parent_id: any, list: any) => { const arr = list?.filter((c:any) => c.parent_id === parent_id) || []; arr.forEach((item: any) => { cons原创 2022-04-08 15:41:15 · 1496 阅读 · 0 评论 -
接口返回数据流格式时导出表格实现方法
当接口返回数据流格式的数据时,导出表格就需要使用到blob,new Blob([data])用来创建URL的file对象或者blob对象关于blob,可以查看:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob主要实现方式:此方法可以实现将二进制流数据转为表格下载// 下载文件 // data为二进制流数据 downloadFile(data) { const content = data; c原创 2020-12-08 16:51:05 · 668 阅读 · 0 评论 -
element tree树形结构接口不支持搜索、懒加载情况下实现搜索
目前项目中,element tree树形结构由于数据太多使用了懒加载,并且接口不支持搜索,只能由前端实现搜索功能,暂时按照自己思路实现功能。思路为:输入搜索内容后,直接遍历树形结构的数据,通过filter筛选出结果之后再赋值给树形结构。demo中是三层树形结构的筛选代码为:template中:...原创 2020-12-08 15:59:27 · 1353 阅读 · 5 评论 -
使用canvas给下载的图片加平铺水印
此水印方法可以加为背景图,也可以作为导出图片的水印,水印内容可以使用图片,也可以使用文字将相应位置转为图片下载并带水印的流程1、首先拿到当前页面的偏移距离// 偏移距离const y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;const x = window.pageXOffset || document.documentElement.scrol原创 2020-11-30 15:52:57 · 676 阅读 · 0 评论 -
使用html2canvas将页面转为图片并下载
插件介绍直接引用官网上的介绍为该脚本允许您直接在用户浏览器上拍摄网页或其中一部分的“屏幕截图”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图官网地址:http://html2canvas.hertzen.com/使用1、下载插件npm i -S html2canvas2、文件中引入插件import html2canvas from ‘html2canvas’;3、使用方法html2canvas(d原创 2020-11-19 13:34:13 · 694 阅读 · 0 评论