Kimser

原创 鸿蒙Next学习-监听指定页面显示/页面生命周期

​自定义组件监听页面生命周期使用无感监听页面路由的能力，能够实现在自定义组件中监听页面的生命周期

原创 鸿蒙Next学习-悬浮窗口/拖动/吸边

实现了一个可以拖拽的悬浮球组件，支持自动贴边和隐藏等功能，适用于窗口场景。

原创 鸿蒙Next学习-webview原生与JS交互通信

应用侧可以通过和方法调用前端页面的JavaScript相关函数。和在参数类型上有些差异。入参类型不仅支持string还支持ArrayBuffer（从文件中获取JavaScript脚本数据），另外可以通过AsyncCallback的方式获取执行结果。在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。前端页面代码。应用侧代码。

原创 根据用户选择的行和列数据构造数据结构(跨行跨列)

这段代码的功能是根据用户选择的行和列数据，生成一个适合复制粘贴的字符串表格。代码会先按列的id从小到大排序，再根据行列的选择关系将数据按顺序填入表格，每行之间使用换行符分隔，每列之间使用制表符分隔。如果某一行缺少对应列的数据，则在该位置插入空格。

原创 实现Web QQ音乐打开现有新标签页切换音乐

若没有打开播放音乐标签页，则打开新标签页播放所选音乐。如果已打开新标签页，则直接切换所选音乐。

翻译 vue-i18n报错Type instantiation is excessively deep and possibly infinite.

在普通的ts文件中，要用到 国际化插件时，引入 i18n.global.t。

原创 JS激活已有标签页(页面存在则激活，关闭则打开)

你可以使用 JavaScript 在标签页 1 中打开或激活标签页 2（如果标签页 2 已经打开）。来打开新的标签页，并通过检测窗口引用来确定标签页 2 是否已经打开。

翻译 跨标签页通信的8种方式

BroadCast Channel：使用Broadcast Channel API可以在不同的浏览器上下文之间进行消息广播和接收。通过创建一个广播频道，并在不同的标签页中监听该频道，可以实现跨标签页通信。Service Worker：Service Worker是一种在浏览器后台运行的脚本，可以拦截和处理网络请求。通过在Service Worker中监听和处理消息事件，可以实现跨标签页通信。

原创 swiper(无插件)下载即用

javascript实现。

翻译 Golang gorm mysql group by json字段合并(干货)

GORM使用database/sql的参数占位符来构造SQL语句，它会自动转义参数以避免SQL注入，但生成的SQL不提供安全保证，请仅用于调试。及其参数而不执行，可用于准备或测试生成的 SQL，查看。GORM 允许缓存准备好的语句来提高性能，查看。

翻译 pdfmake.js 引入自定义字体

原创 Excel 转 Json 、Node.js实现（应用场景：i18n国际化）

需转换文件 第一列作为 key 二三四列作为 value 分别对应中 英 印三种语言。

原创 flutter run之后安装canvasKit出现网络连接错误

输入`这个到命令行。

翻译 Flutter中通过Charles无法抓包的问题解决

前提已经配置好Charles（代理、证书...）！

原创 Could not locate device support files. iPhone16 may be running a version of iOS that is not supporte

Could not locate device support files. iPhone16 may be running a version of iOS that is not supported by this version of Xcode. You can download the latest version of Xcode from the Mac App Store or developer.apple.com. (code 601)地址：GitHub - iGhi

原创 ‘_InternalLinkedHashMap＜dynamic, dynamic＞‘ is not a subtype of type ‘Map＜String, dynamic＞‘

模型类 fromJson时报错flutter: type '_InternalLinkedHashMap' is not a subtype of type 'Map'

转载 如何在react中安装并配置less，简单易用

如何在react中安装并配置less，简单易用

转载 Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用）

Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细_wocwin的博客-CSDN博客

翻译 vite-plugin-style-import 动态按需引入element-plus

vite-plugin-style-import 动态按需引入element-plus

转载 Vite 配置篇:日常开发掌握这些配置就够了!（vite-plugin-components）

Vite 配置篇:日常开发掌握这些配置就够了!（vite-plugin-components）

转载 vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法_编程一枚的博客-CSDN博客

原创 vue3 + antdesignvue（element同理） 完美封装Input无需定义繁琐api（开箱即用）

vue3 + antdesignvue（element同理） 完美封装Input无需定义繁琐api（开箱急）

转载 Vue静态资源上CDN方案简述

Vue静态资源上CDN方案简述

转载 webpack 构建之 splitChunks 优化与 manifest

cacheGroups 里可以定义每种类型包的抽离规则，比如默认的 vendor 包，test 值为 node_modules，意为只匹配 node_modules 的内容，即只打包第三方库，所以 vendor 包就是抽离的第三方库。lodash 是 page1.js 中引入的，而 page1.js 是动态加载的，所以 loadsh 就可以进入分包规则的校验，并抽离出来，生成 vendors-xxxlodash.js 包。（注意：需要自行配置 Babel 解析 React 语法）

原创 Refused to display in a frame because it set ‘X-Frame-Options‘ to ‘sameorigin‘.

Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'.

原创 vue实现计算商品sku笛卡尔积（干货）

vue实现计算商品sku笛卡尔积

翻译 jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例）

jsPDF + html2canvas A4分页截断 完美解决方案（

翻译 Element-UI日期组件支持时间范围以及限制选择时间跨度

每次只能选7天，是指选择的是10号，则以10号为基准点前推6天则是4号后推6天则是16号，选择的范围则是4号到16号（还得考虑180天的限制和今天日期的限制）。左右边界的限制计算时要加上20天这个限制，也就是左边界要取20天的左边界和选择时间跨度7天的左边界中大的，右边界取今天日期和时间跨度7天的右边界中小的。可以这样做，当用户点击第一下时，我们可以获得最小日期，也就以当前选择的日期为基准点，前面加6天后面加6天，包括选择的基准点正好是7天。选择的是20日，前后加减6天范围就是7天了。

转载 AndroidStudio运行Flutter ios环境配置

AndroidStudio运行Flutter ios环境配置

原创 vue项目中 img标签加载失败方法（亲测可用）

< img src=“123” @error=“defImg()” />默认图地址defaultImg: "./img/defPic.png" defImg(){ let img = event.srcElement; img.src = this.defaultImg; img.onerror = null; //防止闪图 }

翻译 从一道面试题来理解JS事件循环

一道面试题　　说出下面代码的运行结果，并说明原因：async function async1(){ console.log('async1 start') await async2() console.log('async1 end')}async function async2(){ console.log('async2')}console.log('script start')setTimeout(function(){ console.

翻译 阮一峰的ES6---Class的继承

Class可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多；class Father { }class Son extends Father {}代码定义了一个Son 类，该类通过extends关键字，继承了Father类的所有属性和方法，但是由于没有部署任何代码,所以这两个类完全一样，等于复制了一个Father类。class Son extends Father { constructor (name,age,city)

翻译 async/await的基础用法

一、async/await的优点1）方便级联调用：即调用依次发生的场景；2）同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；3）多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或

翻译 JS数组去重多种方法

1.怎么解决一个数组去重问题我看了很多面试相关的问题，发现数组去重出现过几次，这里就对数组去重问题进行一个总结。并且进行扩展。请一定要看到第二章！问题描述：数组去重，顾名思义就是，把数组里的重复数值去除，使其多个相同的数值变为一个，最后使数组里不含有重复数值。举个例子：有个数组：[1,2,3,4,4,5,5,5,6,7],数组去重后就变为[1,2,3,4,5,6,7]。该问题有很多解决方法，这里将一一列出，并且会对其个别重要知识点进行扩展解法将由浅入深????，一定要看到最后几个解法！

翻译 elementUI中el-table 动态生成列

<el-table :data="tableData" style="width: 100%"> <el-table-column v-for="col in cols" :prop="col.prop" :label="col.label" > </el-table-column></el-table> <el-button raw-type="button" @click="addCol"> 添加一列&l.

翻译 js中动态改变一个对象的key值

let name="qzq"const obj={[`I is ${name}demo`]：3333}原文地址：https://blog.csdn.net/qq_42157868/article/details/108011519

原创 js给一个对象动态添加属性并赋值

1、js创建一个bai对象或者在原有对象上添du加一个zhi已知属性，并给这个dao属性赋值，写法如下：let obj = {'a1':'a1'};obj['a2'] = 'a2';console.log(obj);//输出{'a1':'a1','a2':'a2'};2、添zhuan加一个变量属shu性，并赋值变量，写法如下：function add(name,value){let obj = {"a1":"a1"};obj[name] = value;//返回参数console.log(obj);.

原创 element-ui el-upload判断文件是否已上传

<el-upload ref="upload" class="upload-dem" drag :action="uploadUri" :on-exceed="handleExceed" :limit="1" :on-change="onChange" // 重点 :on-success="uploadSuccess" // 重点 .

翻译 解决Element resetFields()重置表单不生效的问题（踩过的坑）

前言由于最后在做公司后台在使用 element-ui 框架，开发过程中出现 resetFields表单无法重置的问题，在此记录下解决的办法，也能帮助到以后的同学少踩点坑1.问题重现因 “添加” 和 “编辑” 字段是一样的，所以我把它们放在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了。重现步骤：进入列表页后，先打开编辑框，然后打开新增框，新增框会填充第一次打开的编辑框内容先打开编辑框再打开新增框新增编辑框也被填充了数据form的@clo

原创 el-table实现隐藏列切换时引起表格抖动

表头变动的时候数据可能会下掉，使用element中的dolayout函数解决element中写到：doLayout方法 对Table进行重新布局。当Table或其祖先元素由隐藏切换为显示时，可能需要调用此方法beforeUpdate(){ this.$nextTick(() => { //在数据加载完，重新渲染表格 this.$refs['table'].doLayout(); })}原文：https://www.cnblogs.com/my466879168/p