xt_XiTu-CSDN博客

原创 vue开发可拖拽可放大模块的功能

开发中发现遇到一个小问题，只开发子组件时，拖拽移动位置正常，但实际到父组件中引入，鼠标按下之后并不能直接拖拽，而是鼠标抬起后拖拽内容跟随鼠标移动，再次鼠标按下抬起才能停止。最后发现是由于L1Map组件内 img 标签原本就可以拖拽，导致出现此问题，在img标签配置。可拖拽放大的组件代码。

2024-04-07 09:56:20 249

原创 js将阿拉伯数字转为中文数字

项目中需求，需要自己根据数组顺序，回显对应数据名称，例如：事项一、事项二，记录一下阿拉伯转中文数字方法。

2024-03-22 10:27:08 218 1

一些需求场景下，需要保持el-table中tooltip出现的时机，并且当前代码编写时完全不能通过js控制tooltip禁用属性时，可以通过以下方法实现tooltip换行。1、对应单元格的 showOverflowTooltip 属性设置为true，tooltip出现时机依然使用组件原本的。2、监听中判断当前单元格宽度与内容实际宽度，当内容实际宽度 > 单元格宽度时，对应的tooltip设置为不禁用即可。2、对应单元格内容使用p标签展示，当前单元格依然可设置一行展示，tooltip中可以按照p标签换行。

2024-03-11 10:31:23 995

原创 nginx: [error] OpenEvent(“Global/ngx_reload_12744“) failed (2: The System cannot find the file spec)

双击nginx.exe或者执行 start nginx.exe 启动就可以。最后发现是因为nginx没有启动。

2024-01-26 09:42:18 325

原创 js判断是否为数字的方法

找到一个比较好用的方法，记录下来，方便以后使用查找。isNumber(‘无’) —> false。

2024-01-05 11:08:50 503

原创 npm发包中一些操作备忘

发布beta版 npm publish --tag beta。取消发布 npm unpublish --force。发布 lerna publish。发布 npm publish。其他的的官方文档里面比较全。

2023-08-09 10:35:29 895

原创 formily报错undefined is not an object（evaluating e.onMount）

苹果11机型，系统ios16.5.1，混合开发的h5中，使用formily的表单设计器发起流程时其中某个select组件选择某些可选项时会执行代码到一定步骤突然报错，表单消失，排查很久没找到具体原因。已经发现的解决办法是排查对应表单，其中的x-designable-id名如果是以数字开头的就手动调整为字母开头，既可解决。formily报错undefined is not an object（evaluating e.onMount）

2023-07-13 14:13:16 488

原创 vue实现element-ui对话框dialog可拖拽功能

使用时直接在el-dialog标签中加上 v-dialogDrag 即可。业务中有支持弹窗拖拽的需求，根据网上搜到的内容实现了，整理记录一下。创建directives.js文件。在main.js中引入。

2022-11-15 10:07:20 472 1

原创 vue3磕磕绊绊汇总

最初只写了这些，value一直是null，最后发现了问题，setup里面忘了把创建的ref return出去。1、文件中定义的ref，在setup中onMounted生命周期中打印一直是null。记录一下最近在做的一个vue2写的插件转为vue3项目时遇到的各种问题。...

2022-08-26 16:50:15 248

原创使用wps转换文本中001、002章节名为第001章、第002章

文本转换章节名，正则替换

2022-08-18 13:29:41 3044

原创 Invalid hook call. Hooks can only be called inside of the body of a function component

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be

2022-08-11 11:06:59 852

原创项目中记住账号后选中账号input框背景色被改变问题记录

最近项目的UI走查提出了选中上次记住的账号后，账号密码输入框样式改变的问题，记录一下最后找到的解决方案。vue项目使用此方法解决问题时，注意样式穿透问题，有时候此方法无效可能需要增加v-deep。...

2022-08-02 14:01:09 674

原创常见git提交规范

git提交规范

2022-08-02 13:49:05 659

原创 Git Rebase与Merge

git merge、 git rebase

2022-08-02 13:45:08 217

原创 git常用命令

gitmerge--no-ff-m‘合并描述’分支名不使用Fastforward方式合并，采用这种方式合并可以看到合并记录。gitupdate-index--assume-unchangedfile忽略单个文件。gitrm-r--cached文件/文件夹名字(.忽略全部文件)gitrm-r--cached文件/文件夹名字取消文件被版本控制。gitbranch--no-merged查看未与当前分支合并的分支。...

2022-08-02 13:40:27 92

原创火狐浏览器文本两端对齐无效text-align: justify

火狐浏览器文本两端对齐无效text-align: justify找了很多地方，尝试很多办法都不好使，直到看到这篇只需要设置了text-align: justify时加设一个white-space: pre-line就可以了

2022-07-08 17:35:07 498

原创 snapsvg插件踩坑记录

近期做项目从其他人项目里迁移的一个复杂动画出现了问题，Cannot read properties of undefined (reading on),排查问题出自snapsvg插件。最后发现这个问题出现是因为未做一些配置，分为两步：1、下载imports-loader插件，执行 npm i imports-loader ,这个插件的坑在于版本，我的snapsvg插件是0.5.1，对应的imports-loader插件版本是0.8.02、vue.config.js中增加配置：...

2022-06-16 11:00:37 507

原创利用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 1452

原创为什么 i&1 可以判断奇偶

记录一下看到过几次但是总会遗忘的知识点。&是位运算。在计算机里是只认识二进制的，我们人类用的一般是十进制，而二进制有个特点就是每一位上要么是0要么是1，还有一个特点是如果哪个位置是1，那一位的值就是2n【这个符号表示次方】，n就是这个1所处的位。举个例子，比如二进制“11”，它有两位，那么类比十进制“个十百千”的规律，这里的个位1（也就是最右边的1）它的值是2^0 =1，它的十位就是2^1=2，所以它的总数为2+1=3。这就是二进制的计算规则。了解了这个规则之后，你可能会发现，2的n次方（n&g

2022-02-15 14:20:58 1150

原创前端vue项目一些好用的包（持续更新）

1、vue-echartsvue-echarts是封装后的vue插件，更适合vue项目使用2、dayjsmomentjs已停止维护，dayjs与其功能基本相同3、number-precision计算方法，避免js浮点运算bug4、vue-wait和vuex搭配，方便控制接口请求等待时的loading效果，避免了通过特定变量控制时繁琐以及遗漏处理效果的问题5、vue-resize监听dom大小调整6、jsoneditor是一个基于 Web 的 JSON 数据浏览和编辑的工具7、vue-

2021-12-16 13:56:23 1898

原创前端项目cookie无法设置问题记录

cookie无法设置问题记录项目中遇到了一个cookie无法设置的问题，大佬排查之后，找出原因如下：当前服务器下不同端口有另外一个项目，并且存储cookie名称与我项目相同。正常来说，我项目登录后会直接将另外一个项目cookie覆盖掉，这样使用时还是正常的。但是由于另外一个项目是https的，cookie中有一个secure属性被设置为true，此时，非https的我的项目cookie就无法覆盖https设置的带有secure属性的cookie，导致项目无法登录...

2021-11-08 15:32:55 844

原创 js排序对象数组

方法 //排序方法 function sortNum(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 - value2; } }, // 调用 arr.sort(sortNum('orderBy'))

2021-06-02 17:15:09 92

原创 vue项目中汉字转拼音

1、使用插件lodashjs-pinyin2、下载npm install js-pinyin点击查看插件文档3、方法封装在js文件中引入两个插件，并初始化js-pinyin插件import Pinyin from 'js-pinyin'Pinyin.setOptions({ charCase: 1 })setOptions中传入对象，对象可传两个参数charCase参数：输出拼音的大小写模式，0-首字母大写；1-全小写；2-全大写checkPolyphone：是否检查

2021-06-02 16:07:59 4130

原创 echarts实现联动的折线图

实现出的效果为上下两个折线图，划入时tooltip直接显示的是两个折线图的数据如图：实现此种折线图需要的不一样的配置主要有以下几点：1、xAxis横轴配置、yAxis纵轴配置上，需要几个坐标系就配置几个，并且每个横纵坐标都需要配置gridIndex2、series中，那条线在哪个坐标，就配置对应的xAxisIndex、yAxisIndex与所需横纵坐标的gridIndex相对应除了正常需要的配置外再加上这两条，即可实现一个echarts中同时存在多个坐标系...

2021-03-24 13:26:13 2111 2

原创使用canvas画迁徙线并加上动态效果与小飞机图标

首先在页面中放上地图图片，并建立三个canvas标签，分别用于点、迁徙线、动态效果 <div class="mapBox"> <div class="map"> <img src="@/assets/shanxi.svg" alt=""> </div>  <canvas id="canvas" class="canvas"></c

2021-01-21 15:01:30 1320 4

原创对象数组的排序与去重

1、对象数组的排序sortNum方法为排序方法，参数property为需要排序的字段名arr: [ { num: 23, name: '铅笔' }, { num: 5, name: '橡皮' }, { num: 33, name: '钢笔' }, { num: 1, name: '彩笔' }]function sortNum(property) { //排序方法 return (a, b) => { const value1 = a[property];

2021-01-20 09:50:16 411

原创前端小知识点杂记

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。因为直接写对象形式是引用数据类型，各个组件中都有data的话会互相影响，但是以函数形式返回出的对象，每次都是返回一个新对象，不会造成各组件间数据干扰。

2020-12-25 13:27:41 106

原创前端项目怎么查看内存是否泄露

常听前端内存泄漏，但是一直不知道怎么看是否泄露，或者内存泄漏不大的时候体会不到内存泄漏问题。一个很简单的判断方式，在项目页面中F12打开控制台，找到Memory，此处就会显示当前页面的内存占用情况，图中我的项目由于嵌套了iframe页面，所以显示两个占用情况下图箭头指的位置可以清除部分能被清除的内存具体查看内存是否泄漏的方法是：首先在一个页面A中找到memory内存这里，清除能清除的内存部分，然后记下当前内存情况，之后跳转要要查看内存泄漏的页面B，再跳转回原页面A，此时如果内存变多，证明要查看的

2020-12-25 11:05:11 2890

原创 vue项目中使用拖拽排序实现无刷新组件更改排序的办法

一个项目中拖拽排序使用的插件是vuedraggable，由于拖拽之后排序变化，通过v-for循环出的组件会重新创建，体验很不好，找了很多方法都没能解决无刷新组件更改排序，直到想起来看下v-for的原理。在vue中，通过v-for来渲染一个数组列表时，现在都需要传属性key，因为之前一直没太用到这相关的，所以key值我一直是用的index或者是随机字符串+index定义的，直到这次出的问题，才真正了解key的作用。就地复用策略就是解决本问题的关键点，在v-for循环的列表顺序改变时，只要key还是那个唯

2020-12-18 14:43:02 681

mqttws31.js

空空如也