漆黑菌的博客

也许面向工资编程才是先进生产力的发展方向...

nextTick执行顺序小探

缘起 群友在群里问了下nextTick和updated的执行时间。我一开始觉得肯定是先updated再nextTick。然而实验结果稍微有点意外，要看注册nextTick函数的时间。在数据变动之前就比updated钩子先，之后则后。 原理 vue为了减少数据多次变动导致的watcher多次被过量更新，实际上处理数据变动产生的副作用是放在异步的timerFunc函数里操作的，劫持timerF...

本文章由 漆黑菌 于 2021年01月20日 发布

探索el-input使用v-model.trim后无法输入空格的问题

原理 elementUI和vue genComponentModel机制冲突。作用在组件上的v-model在加了trim修饰符后向子组件传递value（默认情况下）事件时会先进行trim操作。而el-input中this.value和this.nativeInputValue同步的机制 nativeInputValue() { return this.value === nul...

本文章由 漆黑菌 于 2020年12月06日 发布

使用html-webpack-inline-source-plugin把js和css全部输出到单个HTML页面

需求 公司项目有个新需求，需要前端提供HTML模板后端灌数据进行混合渲染。 遇到的问题 首先想到的就是最原始的前端写HTML基础，然后后端写逻辑+灌数据的模式。之前同项目的消息通知模板也是采用这种模式，但是这种模式在使用过程中暴露了很多问题。 前后端责任不清晰，之前要进行国际化的时候，就需要前后端反复沟通费时费力效率低。 前端工程化技术突飞猛进，再也不是当年简简单单引入boot...

本文章由 漆黑菌 于 2020年11月27日 发布

兄弟选择器配合flex-reverse实现连线hover效果

原理 因为种种原因，css世界里基本上是只能上文影响下文，父元素影响子元素的。而flex-reverse等css样式可以通过改变视觉顺序和dom实际顺序的关系，也就是看上去是下文的元素实际上在dom中是上文，产生通过下文影响上文的错觉。 要点 看上去的第一行实际上是第二行，看上去一行的第一个item实际上是最后一个。 看上去的第二行实际上的第一行hover时，左半边看上去空空的元...

本文章由 漆黑菌 于 2020年11月22日 发布

梦幻联动————记一次disabled样式失效

现象 某页面中的翻页button，disabled后光标还是默认样式。一开始还以为是忘记加了，结果用开发者工具看，是有cursor: not-allowed;样式的，然而!important都用上了还是没有正确的not-allowed光标样式。 排查 在Chrome上发现的，换Firefox试试看是不是浏览器实现问题，然而Firefox表现一致。 同事提出是不是上面遮挡了什么奇怪...

本文章由 漆黑菌 于 2020年06月05日 发布

探索可拖拽自定义看板

需求 某客户可能需要一个功能更强大自定义程度更高的看板，能够根据一定的规则（如尺寸，图表类型）进行看板的自定义。 参考 Azure DevOps Dashboard vue-cli自定义Dashboard HTML5原生拖拽/拖放 Drag & Drop 详解 MDN HTML 拖放 API 修复跨浏览器情况下Drag事件表现不一致FireFox onDrag...

本文章由 漆黑菌 于 2020年06月04日 发布

使用axios半自动控制图片加载

问题 普通img标签+src的加载图片模式在加载头像的时候会遇到一个问题。当在类似个人中心页面上传新头像后，因为图片缓存机制（URL没有变直接使用本地缓存）的原因，页面顶部的用户头像并不会更新成新的图片，所以需要手动刷新浏览器的缓存。 解决 正确设置axios请求头 由于使用的Ajax库是axios，所以第一步查阅axios相关文档。普通img加载的图片使用二进制方式，需要在axios中...

本文章由 漆黑菌 于 2020年05月18日 发布

科学使用PowerShell和Windows Terminal

安装Windows Terminal和PowerShell 先贴官方文档 Windows Terminal PowerShell在GitHub PowerShell在Microsoft Docs 推荐的安装方式 Windows Terminal通过Microsoft Store https://aka.ms/windowsterminal PowerShel...

本文章由 漆黑菌 于 2020年05月15日 发布

vue项目i18n总结

安装i18n依赖 使用vue-i18n进行项目国际化，此处推荐使用vue-cli中的vue-cli-plugin-i18n安装 vue add i18n 安装过程中会有一些自定义选项，其中enableInSFC要引入单独的vue-i18n-loader，我选择false。 vs code上有个插件i18n Ally，对国际化很有帮助强烈推荐安装。 i18n Ally配置 官方推...

本文章由 漆黑菌 于 2020年05月13日 发布

模仿vue checkbox改造checkbox组件小结

简介 在学习了vue处理checkbox的方法后，尝试为公司内部组件的checkbox添加绑定数组支持。果然觉得看懂了和模仿着写出来中间还是差非常多的。 vue checkbox 如何处理change和checked 先上props props: { model: { require: false, default: undefined }, ...

本文章由 漆黑菌 于 2020年03月26日 发布

FEATURED TAGS
helloworld Linux 记录生活 微信 JavaScript tomcat 开机启动 免费CDN VPS nginx 科学使用 网络工程 代理 vue webpack css 面试总结 npm 移动端 docker Windows checkbox vue-cli monaco-editor vue3 vue2 qiankun vue2.6 vue2.7 vue $slots vue $scopedSlots
关于我

人生梦想之一是和叶绿体整合，这样就可以不吃饭了。

✉️ 还没想好用哪个邮箱……

FRIENDS