漆黑菌的博客

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

如何基于webpack配置可以使用tsx的vue2.7项目

引入ts支持 安装相关依赖typescript和ts-loader和vue-tsc。 vs code选手记得安装相关volar插件。 配置tsconfig.json。同时参考了vue cli创建的项目和create-vue的ts配置。主要起作用的还是vue cli的配置，直接复制，然后加上 "vueCompilerOptions": { "target": 2.7 } 允许使用j...

本文章由 漆黑菌 于 2024年01月29日 发布

小探vue中的$slots和$scopedSlots

缘起 vue2.6.11的项目代码中试图通过$slots.slotName判断是否传递了自定义slot发现行为不合预期。 总结 在vue2.6和vue2.7中使用$scopedSlots，在vue3中使用$slots。 历史 在vue2.6之前可以向slot传递参数的scopedSlot和普通的slot是两种东西，分别放在$scopedSlots和$slots中。在vue2.6中把...

本文章由 漆黑菌 于 2023年12月13日 发布

小探vue2.6和2.7和3中的setup的初始化时机

缘起 vue2.6.11 + composition-api setup中无法通过proxy获取computed中定义的值。 2.6.14 + composition-api 行为 从composition-api代码中initSetup(vm, vm.$props)我们可以看到，在beforeCreate时会把initSetup挂在初始化data之前。 从2.6.14的代码中ini...

本文章由 漆黑菌 于 2023年12月13日 发布

写给自己看快速reset css代码片段

button .base-button { all: unset; cursor: pointer; box-sizing: border-box; appearance: none; -webkit-text-fill-color: currentcolor; // iOS 12以下文字显示会因为all: unset不能正确显示为color &:disa...

本文章由 漆黑菌 于 2023年12月08日 发布

写给自己看的品字形布局main右侧内容和左侧滚动联动配置

描述 一种2023年很流行的页面布局方式。bilibili的视频播放页。知乎的文章页都是类似设计。类似品字大致可以分为 最顶部的内容 body主内容，分为左右两侧。 当页面主体部分小于一屏高度时，页面看上去和正常流式布局类似。 当页面主体部分大于一屏高度时。 如果是页面主体左侧大于一屏高度。当页面主体右侧滚动到浏览器顶部时会吸顶，并随之滚动。当主体右侧内容滚动到底时，吸...

本文章由 漆黑菌 于 2023年12月05日 发布

小探vue2中为什么使用transition过渡元素时，元素不能show和key同时存在

缘起 如果有代码 <transition mode="out-in" > <div v-show="true" :key="game" class="tab-body-item" /> </transition> 在game值变化后，元素div.tab-body-ite...

本文章由 漆黑菌 于 2023年12月01日 发布

小探vue2中的$attrs是如何生成的

缘起 vue2中传递给组件的props，如果不在子组件的props设置中，会被添加到子组件的$attrs 过程 <template> <HelloWorld :test123="'test233'" :test233="'1234'" v-bind="{ test233: '123' }" /> </template> template在2....

本文章由 漆黑菌 于 2023年10月12日 发布

新版chrome使用新版安卓媒体选择器处理HEIC问题记录and如何科学处理移动端HEIC图片

问题 新版chrome在部分新版安卓（13及以上）灰度了新版图片选择器。可参考https://www.androidcentral.com/apps-software/android-13-photo-picker-chrome-105 在此种模式下浏览器选择图片即使设置了accept为jpeg+png，也可以选择heic。并且会将heic后缀改成accept中设置的格式，但是编码并没有...

本文章由 漆黑菌 于 2023年09月15日 发布

小探vue2中的动态组件

缘起 当前vue2项目中存在jsx和template混用的情况。发现可以通过 <component :is="{ render: $slots.default }" /> 向component is中传递一个有render属性的render函数在template中渲染jsx生成的组件。 总结 当向is中传入object时，vue2会调用vue.extend创建...

本文章由 漆黑菌 于 2023年09月14日 发布

写给自己看的postcss-preset-env配置攻略

默认安装 安装postcss-preset-env，并添加配置文件。按照文档来就可以。 启用有副作用插件 本次想要降级has选择器，这是一个有副作用的插件，默认不会开启，并且需要手动映入js。 在配置文件中直接写好’css-has-pseudo’: {}， 在需要降级的地方引入import cssHasPseudo from ‘css-has-pseudo/browser’...

本文章由 漆黑菌 于 2023年05月04日 发布

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