- 博客(80)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 从害怕到努力，从充满希望到变成咸鱼
2014年，18岁的我高考完之后填志愿，我当时非常清楚，选什么都不要选计算机专业，就因为我从小都非常讨厌做这相关的东西，感觉很麻烦，而且要跟机器的交道，受到的反馈不确定。我的感觉还是跟当初一样，很复杂，很不可控，很累，很艰难的一条路，我走到了这里，后面不想再走了。后面本科第一批志愿的时候，我觉得我分数太低了，就没有填。没过几天我就发现我已经录取了，是当地一所还不错的大学的软件工程专业，这既不是我想要的，也不是我父母想要的。那三年的时间里，我天天看书看视频学习，巩固了扎实的基础，积累了一些经验，
2023-12-20 18:18:20
458
2
原创 echarts图从隐藏到显示以后大小有问题的解决方法
我认为跟这个绘图容器的空间从无到有的变化有关系，这个变化需要时间，如果还没等它变得足够大，就开始绘图的话，就会这样。按照标准流的话，显示的时候它实际上会显示在下方，撑大父容器，这样不仅位置不对，还会占据额外空间。我只能想到一种解决方法，那就是确认返回空数组以后，不显示柱状图，直接显示“暂无数据”的提示，也就是说，有数据的时候要显示这个容器，没有数据的时候要隐藏容器，显示暂无数据的提示，柱状图你懂的，横坐标要表示要显示哪些数据，纵坐标表示要显示的数据分别是多少。
2023-11-09 11:45:57
382
原创 封装canvas选择区域的组件
大家好，我是南宫，最近我刚完成了一个canvas相关组件的封装。我个人其实很怕canvas和地图，就感觉这里有很复杂的操作，搞不懂，所以这次封装完了以后，决定写一篇博客来记录。首先我先简单介绍一下这个组件的功能，然后分布介绍思路并列出代码，最后如果有需要的小伙伴，可以联系我获取完整代码。
2023-10-17 17:00:19
453
原创 只是加了个console.log输出，效果就不一样了，怎么办
但是我又不能留着这个console.log，因为打包后部署的代码肯定是没有这个的，那到时候怎么办呢？如果在某个地方输入了console.log，虽然时间很短很短，但是肯定是做了这个输出的事情，然后再接着执行我们的代码，说明是“等一下”以后就正常了。页面显示异常了，想调试，调试的时候在需要的地方加上了console.log，想输出一下当前的变量，排查结果是否正确，然后再运行，诶，这回是正常的。大家好，我是南宫，忽然发现我已经有一年没有更新博客了，今天来写一个我刚刚发现的问题。我今天突然有了个新的思考。
2023-10-09 16:30:31
98
原创 解决el-form部分字段在输入的时候被带着走的问题
你用form对象来控制这个表单，用form对象里面的元素来绑定里面的表单控件的v-model的话，建议要在data定义的时候和初始化form的时候写上form里面要使用的属性。你在输入完姓名，但是没有变化的时候，在学校这里输入了“师大”，结果你发现，在“师大”出现在“学校”这里后，“张三”同时也出现在了“姓名”这里。部分字段编辑的时候内容没有被修改，但是修改了另一个字段后，前一个字段的内容修改成了刚才的样子。假设有一个字段叫“姓名”，是输入框，你在输入的时候输入了“张三”，但是输入框没有变化。
2023-10-09 16:19:51
133
原创 echarts+vue实现柱状图分页显示
用柱状图展示出一系列分类的数据，结果发现分类共9种，每类的名字都很长，一行显示的时候x轴文字直接重叠到飞起，就算是弄成x轴3个字一换行，效果也很难看，变成换了很多行。本文参考了这篇博客里面的思路和分割数据的代码，不过我用的是vue页面，后面没有照搬他的代码，而是我自己根据我的项目需求拆分了我的函数，下面整理一下思路。1. 调用接口获取数据，然后在数据里找到x轴、y轴要显示的字段，用map方法映射出了两个新数组，保存起来，作为x轴，y轴的数据。我这里认为type是x轴的数据，value是y轴的数据。
2022-11-21 19:04:01
1955
1
原创 TypeError: Cannot read properties of undefined (reading ‘__ob__‘) 的一个错误原因记录
注意，下面有一个提到具体文件的一行，我点进去以后再看看代码，反复排查以后终于明白这个报错的含义——这里是在说this.$set的响应式绑定的属性不能是undefined，null或者原始值，我这边是因为我的失误，把属性名写错了导致的。我在做一个带有搜索项的页面，搜索条件被放到tableOption的一个字段searchParams里了，其中有一个动态添加上去的某字段，需要用this.$set进行动态绑定上去。然后我就看到了下面这样的报错信息，我看到报错的信息似乎是来自底层，就感觉调试好麻烦啊。...
2022-08-08 10:17:29
6344
原创 Vue项目本地运行和打包后样式不同怎么办
大家好，我是南宫。今天来分享一个小问题的解决方法，问题可能不是很具体，可以说是介绍一个思路了。有的时候vue项目本地运行时样式正常，打包部署后样式异常，解决方法可以看看这篇文章。
2022-06-02 17:13:07
6779
1
原创 React的JSX事件绑定的一个注意点
大家好，我是南宫。我之前一直是用vue的，结果2月28日那天突然给我一套React的代码，让我基于这套代码来开发新的功能，也需要根据需求修改一些原有的功能，时间只给两周，而我完全没学过React，我简直是要裂开了。当然，最后两周结束的时候，我基本完成了任务。（这里插播一段，没心情看的同学可以跳过一下）那两周是从零开始学习React（我一直在内心对自己说：这不是真正的零基础，你有3年开发经验，而且有一定的js基础，也有vue的经验和概念），用几天时间快速过了一下React的官方文档，跟着敲了写
2022-04-08 15:41:06
807
原创 记一次el-tree懒加载树的CheckBox优化
大家好，我是南宫。今天检查代码的时候，遇到了个问题：我随手点了个提交，结果返回给我一个500，还以为是接口又出了问题，仔细一看控制台，是我提交的数据不符合业务需求。那么问题来了，我为什么能够提交这样的数据过去？这样的请求能不能被避免？
2022-02-24 11:53:37
616
原创 canvas制作图片选区的效果（Vue）
大家好，我是南宫，今天来写一篇关于canvas绘制“图片选区”的博客。 最近我接到了一个新的任务，要求做一个新的弹窗，里面可以点击按钮，切换配置的能力。其中一个能力涉及到在图片上用鼠标拖动，框选出一个区域，这看起来比较复杂，各种百度无果，我只能自己从零开搞。历时两天终于弄完了，所以现在写一篇博客来记录一下这个思路和实现的过程。一、成品效果截图如下：初始状态是这样的，左右是两张相同的图片，中间有一个钩的按钮。左边的图可以用鼠标框出一个虚线框。具体来说是按下鼠标后，在图片区...
2022-01-28 21:29:46
4401
3
原创 textarea的placeholder怎么实现换行-新的方法
大家好，我是南宫。我最近遇到一个需求，要在之前写过的页面中加上一个textarea，但是我注意到，textarea里面的placeholder在第一行还没有填满的时候换行了，如下图：怎么实现呢？我百度找到的方案是“使用
”，也就是Unicode的换行符或回车符，兴冲冲地复制过来以后，一看结果，我感觉很失望：emmm， 原样输出了，没有起到换行的效果。鉴于之前的那些博客都是2018到2019年的，我认为可能是新版本的浏览器对placeholder的解析规则
2022-01-24 10:29:13
4649
3
原创 vue项目用qrcodejs2生成多个二维码的实现
本文参考了这篇博客：vue项目使用qrcodejs2生成二维码 - 潇湘羽西 - 博客园大家好，我是南宫。最近我这边有这样一个需求：在PC端的web页面获取下载链接，同一个软件的下载的链接不止一个，其中PC端可以直接下载到电脑上，安卓和iOS的客户端需要扫码下载，所以需要把APP的下载地址转成二维码。简而言之，不确定有几个链接要转换成二维码，不确定要转换成二维码的链接是什么（换一个软件，地址就不同）之前我没有做过类似的场景，所以我现在来记录一下。其他博主写的博客，基本就是针对于需要在固.
2022-01-06 15:02:18
4981
2
原创 vue实现导航栏吸顶效果 + 与内容联动
大家好，我是南宫。今天写一篇博客来整理下最近刚解决的一个问题，那就是导航栏跟内容联动的问题。简单说一下我想要的效果：写了一个宽度为屏幕100%的div，居中的部分是一个导航栏，水平排列，默认位于banner下，如果页面滚到了banner下面，要让导航栏固定顶部。如果页面滚到了下方对应的内容，那就高亮对应的tab标记。如果点击了tab，那就要让页面滚到对应的内容，并且让该tab高亮。（效果是动态的，我随便截取一个场景来展示吧，比如我点击“应用场景”的时候，页面滚动到了对应的内容区域，并且对应的tab高
2021-12-31 23:42:36
7377
2
原创 avue的crud组件切换分页大小，不会同步改变的解决方案
大家好，我是南宫，最近我在做一个用avue的项目，感觉这个框架的生态非常不友好啊，找不到官方交流群之类的，文档也写得特简单，我感觉阅读项目的旧代码比看官方文档学习方便多了。avue的crud组件看起来非常强大，就一个表格组件，配一配数据，配一配表格的分列，一个整整齐齐还自带分页组件的表格就出来了，而且一进入页面，就自动查询啊，很方便，有木有？但是我现在的需求有一点特殊：我要获取的数据，不仅仅是有接口地址就可以请求的，而是需要一个必填参数，那就是月份。而我即使是在mounted就马上获取当前月份并设置
2021-10-15 09:34:21
2865
3
原创 avue的crud组件的一个注意点
大家好，我是南宫。很久没有更新了。这期间，我换了家公司，加入了一个新的团队，接手了一份代码，让我在现有代码的基础上做一些修改和新的功能。熟悉代码的时候，我发现，这份代码居然是用avue写的！我之前完全没有接触过和听说过，然后我赶紧一边读代码，一边看文档。私以为avue框架有这些特点：1.方便。我这套代码有一个“代码生成”的功能，可以自动生成出模板代码，包括调用接口的js，crud组件的表格配置。到时候把相应的文件放到相应的位置，改改接口地址，就能直接看到数据2.封装太深了。看起来只是一个组件
2021-10-13 21:07:28
1369
4
原创 用vue做一个简单的emoji表情组件
大家好，我是南宫。最近在项目里，发文字的时候有配上表情的需求，这个需求令我一头雾水，后来通过查资料和参考别人的代码，我做了一个表情组件，下面来分享一下我的思路和过程。效果大概是这样的。一、想要显示表情图标，就需要表情素材这个非常重要，有了素材才有东西展示嘛，我找到的这个素材是json格式的文件，里面的内容大概长这个样子:[ { "codes": "1F600", "char": "????", "name": "grinnin
2021-08-13 12:13:13
3994
9
原创 使用el-tabs的弹窗显示的时候，怎么让它指定tab显示
大家好，我是南宫，今天接着分享一个刚发现的小技巧。最近在用Vue_CLI+ElementUI写一个项目，里面经常出现比较复杂、带有tab的弹窗。比如下面这样：很明显，这个tab应该使用el-tabs组件，稍微改一改样式就OK了。白色的弹窗是一个自定义组件，里面用一个data来控制显示的tab，初始值可能指定为第一个tab的名字。那么问题来了，假如我要从父组件打开这个白色弹窗，但是并不希望一进来就看到第一个tab，而是第三个或者第四个tab，怎么办呢？如图所示，如果选择“发布任务”，则希望一.
2021-08-09 11:27:08
1942
原创 CSS“超出显示省略号，后面还能显示其他内容”的解决方案
大家好，我是南宫。好久没有写博客了。最近两个月来在做一个Vue_CLI的项目（Vue2.x+ElementUI），项目不简单而且需求很急，一直在加班。这是我上班以来第一次写Vue_CLI项目，之前仅仅只有两次项目经验，而且都是自学时候做的，做这个项目让我很紧张，遇到不少问题，所以考虑写几篇博客分享一下思路和解决方案。今天的标题有一点拗口了，很抱歉，好像用三言两语很难讲清楚这个需求，而这个需求我觉得是可以理解的，详细描述如下：有这么一块宽度有限的空间，来显示一段文字内容。文字的字体大小确定，但是
2021-07-30 10:05:13
4735
2
原创 来看一道关于js作用域的面试题
今天我看了一篇关于面试题的推文，结果感觉确实挺有难度的，我只看到了题目和答案，没看到解析。现在想明白了一道题，我来解析给大家看看。题目如下： var a = 0, b = 0; function A(a) { A = function (b) { console.log(a + b++) } console.log(a++) }
2021-04-05 21:16:20
165
原创 对JavaScript的Array的排序方法的理解
JavaScript的数组Array的原型里有个sort方法，任何数组都可以使用它，作用是“排序”。具体是怎么排序呢？我今天来做个简单整理。首先，如果不接受参数，sort方法会怎么排序呢？答案是，把每个元素转成字符串，按照字符串的排列顺序的从小到大进行排序。可以这么记忆：String的开头是s，所以sort方法会给每个元素调用String方法转成字符串，“升序”的拼音也是s开头，sort默认是升序排列。比如下面这个例子：let values = [0, 1, 5, 10, 15];.
2021-04-03 18:04:15
302
原创 《JavaScript高级程序设计》（第4版）阅读笔记（三十三）
这篇文章开始分享第六章的内容了。6.1 Object到目前为止，大多数引用值的示例使用的是 Object 类型。Object 是ECMAScript中最常用的类型之一。虽然 Object 的实例没有多少功能，但很适合存储和在应用程序间交换数据。显式地创建 Object 的实例有两种方式。第一种是使用 new 操作符和 Object 构造函数，另一种方式是使用对象字面量（object literal）表示法。对象字面量是对象定义的简写形式，目的是为了简化包含大量属性的对象的创建。...
2021-03-25 20:58:09
184
2
原创 《JavaScript高级程序设计》（第4版）阅读笔记（三十）
这一篇继续分享《高程四》的第五章的内容。9. 字符串迭代与解构字符串的原型上暴露了一个 @@iterator 方法，表示可以迭代字符串的每个字符。可以像下面这样手动使用迭代器：let message = "abc";let stringIterator = message[Symbol.iterator]();console.log(stringIterator.next()); // {value: "a", done: false}console.log(stringIte..
2021-03-21 16:16:44
160
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十九）
这篇博客继续分享高程四第五章的内容。3. 字符串操作方法本节介绍几个操作字符串值的方法。首先是 concat() ，用于将一个或多个字符串拼接成一个新字符串。来看下面的例子：let stringValue = "hello ";let result = stringValue.concat("world");console.log(result); // "hello world"console.log(stringValue); // "hello"在这个例子中，对 strin.
2021-03-17 15:38:55
108
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十八）
这篇博客继续分享《高程四》第五章的内容。5.3.2 NumberNumber 是对应数值的引用类型。要创建一个 Number 对象，就使用 Number 构造函数并传入一个数值，如下例所示：let numberObject = new Number(10);与 Boolean 类型一样， Number 类型重写了 valueOf() 、toLocaleString() 和 toString() 方法。 valueOf() 方法返回Number 对象表示的原始数值，另外两个方法返..
2021-03-15 21:05:57
157
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十七）
这篇文章继续分享《高程四》第五章的内容。5.2.4 模式局限虽然ECMAScript对正则表达式的支持有了长足的进步，但仍然缺少Perl语言中的一些高级特性。下列特性目前还没有得到ECMAScript的支持（想要了解更多信息，可以参考Regular-Expressions.info网站）：\A 和 \Z 锚（分别匹配字符串的开始和末尾）联合及交叉类原子组x （忽略空格）匹配模式条件式匹配正则表达式注释虽然还有这些局限，但ECMAScript的正则表达式已经非常强大，可..
2021-03-14 11:05:49
131
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十六）
这篇文章继续分享《高程四》第5章的内容。从5.2.1节开始。5.2.1 RegExp 实例属性每个 RegExp 实例都有下列属性，提供有关模式的各方面信息。global ：布尔值，表示是否设置了 g 标记。ignoreCase ：布尔值，表示是否设置了 i 标记。unicode ：布尔值，表示是否设置了 u 标记。sticky ：布尔值，表示是否设置了 y 标记。lastIndex ：整数，表示在源字符串中下一次搜索的开始位置，始终从0开始。multiline ：布尔值，..
2021-03-09 23:31:01
118
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十五）
这篇文章继续分享《高程四》第五章的内容。有需要的同学可以跟着看呀。5.1.2 日期格式化方法
2021-03-07 17:04:51
126
1
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十四）
这篇文章开始分享第五章的内容了。第 5 章 基本引用类型引用值（或者对象）是某个特定引用类型的实例。在ECMAScript中，引用类型是把数据和功能组织到一起的结构，经常被人错误地称作“类”。虽然从技术上讲JavaScript是一门面向对象语言，但ECMAScript缺少传统的面向对象编程语言所具备的某些基本结构，包括类和接口。引用类型有时候也被称为对象定义，因为它们描述了自己的对象应有的属性和方法。对象被认为是某个特定引用类型的实例。新对象通过使用 new 操作符后跟一个构造函数（c..
2021-03-03 21:29:17
126
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十三）
4.3.3 性能垃圾回收程序会周期性运行，如果内存中分配了很多变量，则可能造成性能损失，因此垃圾回收的时间调度很重要。尤其是在内存有限的移动设备上，垃圾回收有可能会明显拖慢渲染的速度和帧速率。开发者不知道什么时候运行时会收集垃圾，因此最好的办法是在写代码时就要做到：无论什么时候开始收集垃圾，都能让它尽快结束工作。（也就是说，我们写的代码要从方便垃圾回收的角度来考虑）现代垃圾回收程序会基于对JavaScript运行时环境的探测来决定何时运行。探测机制因引擎而异，但基本上都是根据已分配对象的大小和.
2021-03-02 23:09:30
264
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十二）
4. 标识符查找当在特定上下文中为读取或写入而引用一个标识符时，必须通过搜索确定这个标识符表示什么。搜索开始于作用域链前端，以给定的名称搜索对应的标识符。如果在局部上下文中找到该标识符，则搜索停止，变量确定；如果没有找到变量名，则继续沿作用域链搜索。（注意，作用域链中的对象也有一个原型链，因此搜索可能涉及每个对象的原型链。）这个过程一直持续到搜索至全局上下文的变量对象。如果仍然没有找到标识符，则说明其未声明。为更好地说明标识符查找，我们来看一个例子：var color = 'blue';.
2021-02-28 11:45:43
122
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十一）
这一篇继续分享《高程四》第四章的内容。4.2.2 变量声明ES6之后，JavaScript的变量声明经历了翻天覆地的变化。直到ECMAScript 5.1， var 都是声明变量的唯一关键字。ES6不仅增加了let 和 const 两个关键字，而且还让这两个关键字压倒性地超越var 成为首选。...
2021-02-25 12:55:42
118
原创 《JavaScript高级程序设计》（第4版）阅读笔记（二十）
这篇文章继续分享《高程四》第四章的内容。4.1.4 确定类型前一章提到的 typeof 操作符最适合用来判断一个变量是否为原始类型。
2021-02-24 12:57:59
126
原创 《JavaScript高级程序设计》（第4版）阅读笔记（十九）
这一篇继续分享第三章的内容，第三章的内容快要结束了。3.7 函数函数对任何语言来说都是核心组件，因为它们可以封装语句，然后在任何地方、任何时间执行（也就是说，函数的好处是可以封装重复的代码）。ECMAScript中的函数使用function 关键字声明，后跟一组参数，然后是函数体。以下是函数的基本语法：function functionName(arg0, arg1,...,argN) { statements}可以通过函数名来调用函数，要传给函数的参数放在括号里（如果..
2021-02-22 22:40:46
158
原创 《JavaScript高级程序设计》（第4版）阅读笔记（十八）
这一篇继续分享《高程四》第三章的内容。3.6.8 break 和 continue 语句break 和 continue 语句为执行循环代码提供了更严格的控制手段。其中， break 语句用于立即退出循环，强制执行循环后的下一条语句。而 continue 语句也用于立即退出循环，但会再次从循环顶部开始执行（也就是不再继续执行本次循环，但还会执行下次循环）。下面看一个例子：let num = 0;for (let i = 1; i < 10; i++) { if (i ..
2021-02-21 15:00:04
140
原创 《JavaScript高级程序设计》（第4版）阅读笔记（十七）
这一篇博文继续分享《高程四》第三章的内容，估计第三章快要结束了。3.6.2 do-while 语句do-while 语句是一种后测试循环语句，即循环体中的代码执行后才会对退出条件进行求值。换句话说，循环体内的代码至少执行一次。...
2021-02-19 23:23:31
112
原创 《JavaScript高级程序设计》（第4版）阅读笔记（十六）
这篇博文继续分享《高程四》第三章的内容，从3.5.8开始。3.5.8 相等操作符判断两个变量是否相等是编程中最重要的操作之一。在比较字符串、数值和布尔值是否相等时，过程都很直观。但是在比较两个对象是否相等时，情形就比较复杂了。ECMAScript提供了两组操作符。第一组是等于和不等于，它们在比较之前执行转换。第二组是全等和不全等，它们在比较之前不执行转换。（在《你不知道的JavaScript》中，把这两种分别介绍成“宽松相等”和“严格相等”。注意，虽然“===”要求类型和值都相等，看起来要求更高.
2021-02-16 16:42:17
139
原创 《JavaScript高级程序设计》（第4版）阅读笔记（十五）
这篇文章继续讲《高程四》的第三章的内容。3.5.4 乘性操作符ECMAScript定义了3个乘性操作符：乘法、除法和取模。这些操作符跟它们在Java、C语言及Perl中对应的操作符作用一样，但在处理非数值时，它们也会包含一些自动的类型转换。如果乘性操作符有不是数值的操作数，则该操作数会在后台被使用 Number() 转型函数转换为数值。这意味着空字符串会被当成0，而布尔值 true 会被当成1。1. 乘法操作符乘法操作符由一个星号（ * ）表示，可以用于计算两个数值的乘积。乘...
2021-02-15 22:27:32
115
原创 《JavaScript高级程序设计》（第4版）阅读笔记（十四）
这一篇继续来说《高程四》的第三章。目前是看到了3.5.2的位操作符这里。2. 按位与按位与操作符用和号（ & ）表示，有两个操作数。本质上，按位与就是将两个数的每一个位对齐，然后基于真值表中的规则，对每一位执行相应的与操作。（也就是把两个操作数进行逐位的与运算，与运算就是“两个值都为1才得到1，否则都得到0”的运算）...
2021-02-09 23:24:46
160
各个版本的jQuery
2018-07-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人