sfyjknvcx的博客

大家好，我是南宫，上上周我去开了个需求评审，里面有几个细节我特别担心，特意花了两天去查资料，查的昏天黑地的。上周我开始写在地图上选择坐标的组件，写完以后想分享一下其中的经验，所以写了这篇博客。

我刚学前端的时候，node的版本是6，后来我习惯用14的时候，发现已经更新到16了，那个时候我就意识到node的不同大版本是有很大不同，甚至无法兼容的。刚刚临时安装的新版本npm覆盖了我原本用nvm安装的npm，但是我并没有动我原本的nvm和npm啊，如果把临时安装的npm删掉，不就影响不到我了吗？nvm切换后，npm的版本也正常，不会受到全局npm版本的覆盖了。我注意到了文件夹的更新时间，其中D盘的那个是今天下午，E盘的那个是去年——很明显D盘的那个是刚刚误装的版本，我要保留的是E盘的那个。

2014年，18岁的我高考完之后填志愿，我当时非常清楚，选什么都不要选计算机专业，就因为我从小都非常讨厌做这相关的东西，感觉很麻烦，而且要跟机器的交道，受到的反馈不确定。我的感觉还是跟当初一样，很复杂，很不可控，很累，很艰难的一条路，我走到了这里，后面不想再走了。后面本科第一批志愿的时候，我觉得我分数太低了，就没有填。没过几天我就发现我已经录取了，是当地一所还不错的大学的软件工程专业，这既不是我想要的，也不是我父母想要的。那三年的时间里，我天天看书看视频学习，巩固了扎实的基础，积累了一些经验，

大家好，我是南宫，来分享一个昨天解决的问题。把尖头做成空心的。

我认为跟这个绘图容器的空间从无到有的变化有关系，这个变化需要时间，如果还没等它变得足够大，就开始绘图的话，就会这样。按照标准流的话，显示的时候它实际上会显示在下方，撑大父容器，这样不仅位置不对，还会占据额外空间。我只能想到一种解决方法，那就是确认返回空数组以后，不显示柱状图，直接显示“暂无数据”的提示，也就是说，有数据的时候要显示这个容器，没有数据的时候要隐藏容器，显示暂无数据的提示，柱状图你懂的，横坐标要表示要显示哪些数据，纵坐标表示要显示的数据分别是多少。

大家好，我是南宫，最近我刚完成了一个canvas相关组件的封装。我个人其实很怕canvas和地图，就感觉这里有很复杂的操作，搞不懂，所以这次封装完了以后，决定写一篇博客来记录。首先我先简单介绍一下这个组件的功能，然后分布介绍思路并列出代码，最后如果有需要的小伙伴，可以联系我获取完整代码。

但是我又不能留着这个console.log，因为打包后部署的代码肯定是没有这个的，那到时候怎么办呢？如果在某个地方输入了console.log，虽然时间很短很短，但是肯定是做了这个输出的事情，然后再接着执行我们的代码，说明是“等一下”以后就正常了。页面显示异常了，想调试，调试的时候在需要的地方加上了console.log，想输出一下当前的变量，排查结果是否正确，然后再运行，诶，这回是正常的。大家好，我是南宫，忽然发现我已经有一年没有更新博客了，今天来写一个我刚刚发现的问题。我今天突然有了个新的思考。

你用form对象来控制这个表单，用form对象里面的元素来绑定里面的表单控件的v-model的话，建议要在data定义的时候和初始化form的时候写上form里面要使用的属性。你在输入完姓名，但是没有变化的时候，在学校这里输入了“师大”，结果你发现，在“师大”出现在“学校”这里后，“张三”同时也出现在了“姓名”这里。部分字段编辑的时候内容没有被修改，但是修改了另一个字段后，前一个字段的内容修改成了刚才的样子。假设有一个字段叫“姓名”，是输入框，你在输入的时候输入了“张三”，但是输入框没有变化。

用柱状图展示出一系列分类的数据，结果发现分类共9种，每类的名字都很长，一行显示的时候x轴文字直接重叠到飞起，就算是弄成x轴3个字一换行，效果也很难看，变成换了很多行。本文参考了这篇博客里面的思路和分割数据的代码，不过我用的是vue页面，后面没有照搬他的代码，而是我自己根据我的项目需求拆分了我的函数，下面整理一下思路。1. 调用接口获取数据，然后在数据里找到x轴、y轴要显示的字段，用map方法映射出了两个新数组，保存起来，作为x轴，y轴的数据。我这里认为type是x轴的数据，value是y轴的数据。

注意，下面有一个提到具体文件的一行，我点进去以后再看看代码，反复排查以后终于明白这个报错的含义——这里是在说this.$set的响应式绑定的属性不能是undefined，null或者原始值，我这边是因为我的失误，把属性名写错了导致的。我在做一个带有搜索项的页面，搜索条件被放到tableOption的一个字段searchParams里了，其中有一个动态添加上去的某字段，需要用this.$set进行动态绑定上去。然后我就看到了下面这样的报错信息，我看到报错的信息似乎是来自底层，就感觉调试好麻烦啊。...

大家好，我是南宫。今天来分享一个小问题的解决方法，问题可能不是很具体，可以说是介绍一个思路了。有的时候vue项目本地运行时样式正常，打包部署后样式异常，解决方法可以看看这篇文章。

大家好，我是南宫。我之前一直是用vue的，结果2月28日那天突然给我一套React的代码，让我基于这套代码来开发新的功能，也需要根据需求修改一些原有的功能，时间只给两周，而我完全没学过React，我简直是要裂开了。当然，最后两周结束的时候，我基本完成了任务。（这里插播一段，没心情看的同学可以跳过一下）那两周是从零开始学习React（我一直在内心对自己说：这不是真正的零基础，你有3年开发经验，而且有一定的js基础，也有vue的经验和概念），用几天时间快速过了一下React的官方文档，跟着敲了写

大家好，我是南宫。今天检查代码的时候，遇到了个问题：我随手点了个提交，结果返回给我一个500，还以为是接口又出了问题，仔细一看控制台，是我提交的数据不符合业务需求。那么问题来了，我为什么能够提交这样的数据过去？这样的请求能不能被避免？

大家好，我是南宫，今天来写一篇关于canvas绘制“图片选区”的博客。 最近我接到了一个新的任务，要求做一个新的弹窗，里面可以点击按钮，切换配置的能力。其中一个能力涉及到在图片上用鼠标拖动，框选出一个区域，这看起来比较复杂，各种百度无果，我只能自己从零开搞。历时两天终于弄完了，所以现在写一篇博客来记录一下这个思路和实现的过程。一、成品效果截图如下：初始状态是这样的，左右是两张相同的图片，中间有一个钩的按钮。左边的图可以用鼠标框出一个虚线框。具体来说是按下鼠标后，在图片区...

大家好，我是南宫。我最近遇到一个需求，要在之前写过的页面中加上一个textarea，但是我注意到，textarea里面的placeholder在第一行还没有填满的时候换行了，如下图：怎么实现呢？我百度找到的方案是“使用&#10”，也就是Unicode的换行符或回车符，兴冲冲地复制过来以后，一看结果，我感觉很失望：emmm，
原样输出了，没有起到换行的效果。鉴于之前的那些博客都是2018到2019年的，我认为可能是新版本的浏览器对placeholder的解析规则

本文参考了这篇博客：vue项目使用qrcodejs2生成二维码 - 潇湘羽西 - 博客园大家好，我是南宫。最近我这边有这样一个需求：在PC端的web页面获取下载链接，同一个软件的下载的链接不止一个，其中PC端可以直接下载到电脑上，安卓和iOS的客户端需要扫码下载，所以需要把APP的下载地址转成二维码。简而言之，不确定有几个链接要转换成二维码，不确定要转换成二维码的链接是什么（换一个软件，地址就不同）之前我没有做过类似的场景，所以我现在来记录一下。其他博主写的博客，基本就是针对于需要在固.

大家好，我是南宫。今天写一篇博客来整理下最近刚解决的一个问题，那就是导航栏跟内容联动的问题。简单说一下我想要的效果：写了一个宽度为屏幕100%的div，居中的部分是一个导航栏，水平排列，默认位于banner下，如果页面滚到了banner下面，要让导航栏固定顶部。如果页面滚到了下方对应的内容，那就高亮对应的tab标记。如果点击了tab，那就要让页面滚到对应的内容，并且让该tab高亮。（效果是动态的，我随便截取一个场景来展示吧，比如我点击“应用场景”的时候，页面滚动到了对应的内容区域，并且对应的tab高

大家好，我是南宫，最近我在做一个用avue的项目，感觉这个框架的生态非常不友好啊，找不到官方交流群之类的，文档也写得特简单，我感觉阅读项目的旧代码比看官方文档学习方便多了。avue的crud组件看起来非常强大，就一个表格组件，配一配数据，配一配表格的分列，一个整整齐齐还自带分页组件的表格就出来了，而且一进入页面，就自动查询啊，很方便，有木有？但是我现在的需求有一点特殊：我要获取的数据，不仅仅是有接口地址就可以请求的，而是需要一个必填参数，那就是月份。而我即使是在mounted就马上获取当前月份并设置

大家好，我是南宫。很久没有更新了。这期间，我换了家公司，加入了一个新的团队，接手了一份代码，让我在现有代码的基础上做一些修改和新的功能。熟悉代码的时候，我发现，这份代码居然是用avue写的！我之前完全没有接触过和听说过，然后我赶紧一边读代码，一边看文档。私以为avue框架有这些特点：1.方便。我这套代码有一个“代码生成”的功能，可以自动生成出模板代码，包括调用接口的js，crud组件的表格配置。到时候把相应的文件放到相应的位置，改改接口地址，就能直接看到数据2.封装太深了。看起来只是一个组件

大家好，我是南宫。最近在项目里，发文字的时候有配上表情的需求，这个需求令我一头雾水，后来通过查资料和参考别人的代码，我做了一个表情组件，下面来分享一下我的思路和过程。效果大概是这样的。一、想要显示表情图标，就需要表情素材这个非常重要，有了素材才有东西展示嘛，我找到的这个素材是json格式的文件，里面的内容大概长这个样子:[ { "codes": "1F600", "char": "????", "name": "grinnin