weixin_44707050的博客

原创 任意组件之间的传参mitt

/ 触发事件并传参。console.log('收到数据:', data.value);三种方法，on绑定事件，off解绑事件 ， emit触发事件。创建一个初始化mitt的文件。// 组件销毁时记得移除监听。

原创 鼠标悬移 视频播放 不显示视频组件控件

【代码】鼠标悬移 视频播放 不显示视频组件控件。

原创 el-select中自定义 两组el-option,但是key不一样，并且点击需获取当前整个项的所有属性

当el-select中只有一组el-option ， 获取点击的当前项的属性 ， el-select 绑定:value-key='id'但是 当el-select中有两组el-option ,每组option的key不一致,如下代码所示。对value-key做处理。

原创 js实现base64编码

可以通过encodeURIComponent \ decodeURIComponent将中文变为ASCII 字符序列。但不适用于unicode ， 如中文 表情符号等。btoa 用于编码base64。atob用于解码base64。

原创 vue-clipboard3的使用

【代码】vue-clipboard3的使用。

原创 pinia-plugin-persistedstate的使用

typescript复制下载persist: {},

原创 使用vue开发electron

打开开发者工具，操作栏 - view - toggle - developer tools。electron下载 可以用yarn ，注意node版本20。添加成功后，目录中多了background.js文件。例如 窗口大小，是否可以缩放，是否可以移动窗口等。在vue项目中添加electron模块。可以在background.js配置。可在dist_electron中查看。1.全局安装electron。

原创 浏览器监听resize事件 导致input内容随窗口变化而变化

但发现，页面中的input , textarea内的placeholder及内容会随着窗口的大小变化而变化。给input , textarea的文字设置固定的大小即可。页面中，因为有别的需求添加了resize的监听。

原创 字体包的基础使用

div class="custom-text">使用自定义字体</div>font-display: swap;/* 优化字体加载显示 */font-weight: 700;/* 使用粗体 */将下载的字体文件存放于assets/fonts文件中。(WOFF 2.0 - 推荐格式，压缩率更高)在style/index.css中定义字体。main.js中引入index.css。

原创 同源不同标签之间的通信

需求：比如 同一个窗口 打开两个页签，a页签发送消息给b页签 ，让b页签和a页签同步；

原创 监听滚动事件

监听滚动事件1.原生scroll方法2.观察器 （对于无限滚动、长列表有较好的性能）：现代浏览器都支持，但IE不支持。如需兼容IE，需要polyfill然后在入口文件导入：：需要一个实际存在的DOM元素作为观察目标：根据实际需求调整threshold，避免过于敏感：组件销毁时务必调用trigger通常是无样式或极小高度的元素（如必须存在于 DOM 中（确保在mounted后访问）

原创 git clone 下载指定远程分支的代码操作

一般git clone下载的是master分支，如果想拉取常用的分支，可能会有很大的冲突 需要合并。git clone -b 远程分支 远程仓库地址。直接下载指定远程分支代码。

原创 routerLink 的activeclass的写法

linkActiveClass:'selected' //添加这行 ， 在公共样式中写入selected的样式即可。写法1. <RouterLink :to="item.path" active-class='active'/>写法二： <RouterLink :to="item.path">routerlink的active-class 高亮的类。在router文件中。

原创 vue3:i18n的使用

index.vue页面中的使用。main.ts中导入 ，i18n 国际化语言。

原创 vue3二次封装组件el-form

myForm组件，用于封装form表单 ， 通过配置项的方式生成表单 ， 无需过多的写html结构。引用myform组件的页面 ， 写config配置表单 ， 并通过v-bind传给组件。子组件定义了重置表单的方法 ，并且需要defineExpose暴露方法，父组件才可使用。v-bind传值 ， 相当于传的是解构的值。

原创 typescript学习

void : 函数 不返回值 ， return , return undefined。tuple : 元组 ， let str:[string , number]interface , type可以给对象 ，函数， 类定义接口 ，let str: string = '111' //类型是小写的。2.ts除了js的那些数据类型 ， 还额外的常用的有7+2。泛型T :定义时未知类型 ， 当调用时，给一个类型。unknown ：未知类型 ， 等赋值，才知道类型。enum :枚举 ， 一组数据的集合。

原创 vue:生命周期

setup(会在beforecreate , created之前执行) ， onBeforeMount , onMounted , onBeforeUpdate , onUpdated , onBeforeUnmount , onUnmount , onActivated , onDeactivated。

原创 vue:teleport , suspense

suspense : 当异步组件在加载时，可以渲染一些额外的内容。可以把结构html传送到指定的位置。teleport：传输门。

原创 vue3:ref , reactive

可以配置vscode，设置，搜索dot , 勾选即可 ，输入变量会自动.value。解构赋值会失去响应性 ， 使用toRefs（toRef是单个变量可使用）reactive需要使用Object.assign。ref,reactive定义的都是响应式数据。ref变量修改或获取 需要.value ,ref可以定义基础数据类型， 引用数据类型。reactive只能定义引用数据类型。ref重新赋值一个对象可以直接赋值。

原创 vue3:watch和watchEffect

4.ref对象的属性，reactive对象的属性 , 监听数据函数形式 ()=>data , 如果监听多个数据 ， 数组中的函数形式[()=>data1 , ()=>data2]2.ref定义的引用数据类型 , 监听到的只是地址，如果想监听内部属性，开启deep:true。3.reactive定义的引用数据类型 , 默认deep:true。watchEffect无需指定侦听数据 ， 谁有变动就会被监听到。deep:true 谨慎使用，注意性能。5.上述混合 {deep:true}

原创 vue3组件传值的几种方案

父组件可操作子组件的变量$ref获取全部子组件 ， 子组件需要ref标识 ， 并且子组件中需要暴露是变量defineExpose。祖组件传给子组件 ， 子组件绑定v-bind传给孙组件 ， 孙组件$attrs接收。npm i mitt 需要下载 ， mitt.on , mitt.emit。provide传值 ， inject收值 ，可以写默认值。

原创 vue3 中获取不到ref指定的dom

问题：直接在setup中获取title2 , 但是打印出来为undefined。解决：在on/mounted中获取即可。

原创 nodemon : 无法加载文件 D:\nvm\nodejs\nodemon.ps1，因为在此系统上禁止运行脚本。

想使用nodemon ，在npm i nodemon -g 安装之后，报了nodemon : 无法加载文件 D:\nvm\nodejs\nodemon.ps1，因为在此系统上禁止运行脚本这样的错误。执行nodemon 1.js。

原创 线上调试vue项目

打印 vue devtools now is enabled 控制台会出现vue devtools调试工具 ， 如果没有重新打开控制台即可；打开控制台 ， 输入上面的代码 ，

原创 Parsing error: No Babel config file detected for报错解决

重启编辑器 ， 打开项目为根目录。

原创 watch监听对象排除某些属性的监听

p.s转自某公众号。

原创 chrome浏览器打开控制台很慢解决办法

问题：谷歌浏览器右键或者f12打开控制台速度很慢，需要等个几秒。设置成english(us)即可。

原创 js时间转成xx前

方案1.封装方法getDateDiff。方案2.使用dayjs的方法。main.js引入dayjs。

原创 el-option选中一个值后 全部选项都变蓝

解决：给el-select添加 value-key = 'id'(此处id根据实际情况写)

原创 nvm install下载node报错问题Could not retrieve https://npm.taobao.org/mirrors/node/latest/

报错：Could not retrieve https://npm.taobao.org/mirrors/node/latest/nvm root 获取nvm的路径 ， 修改settings.txt文件。原因：因为使用的淘宝镜像是旧版 不能下载。改为新版的淘宝镜像地址即可。

原创 git上传图片名称大小写忽略问题

原创 vscode使用git

提交到暂存区后，点击 提交 ， 编辑备注内容 ，相当于git commit -m '提交备注内容'点击+号 ， 相当于git add 添加到暂存区。同步提交到远程仓库，拉取远程，合并，提交远程。编辑器左下角点击分支，可以创建新分支。相当于git tag v2.0.0。创建标记 ，本地打tag。可以查看更改的前后对比。-号 取消暂存区内容。

原创 常用git 打tag命令

7.在当前tag的基础上开发或操作，实质创建新分支 git checkout -b new-branch v5.0.0。git tag v5.0.0 -a -m '携带备注信息'之后推送远程git push origin v5.0.0。2.创建 v5.0.0的tag。git tag （创建后查看）6.添加带有备注信息的tag。3.推送到远程tag。

原创 关于websocket数据过多造成浏览器卡顿问题

websocket发送大量数据并不会造成卡顿 ， 如果不停的 渲染页面 ， 那可能会造成浏览器卡顿。如果推送数据大于展示行数（比如100行），截取最新的100条数据展示。btw. 数据从末尾截取 arr.slice(-100)如果推送数据小于展示行数，那么当前的数据渲染即可。给页面设置展示数据行数，限制页面渲染内容。

原创 vue中锚点定位scrollIntoView

使用element.scrollIntoView跳转。

原创 页面跳转方法

可以用this.$router.push 等。在微前端 ，子应用之间的跳转。vue项目中内部跳转。

原创 联动表单的解决办法

使用this.$set把this.form.data清空，根据需求做其他处理。给a,b,c的表单添加change事件（仅作举例，具体根据实际情况添加），dataList中清空form.data ， 及做其他处理。只要联动相关的表单发生变化，就去调用dataList方法。需求：修改a,b,c表单 就需要d去清空 的联动。

原创 下载excel文件

【代码】下载excel文件。

原创 this.$on及this.$emit

this.$emit用于触发事件。this.$on监听事件。

原创 webpack自动导入require.context

/store/modules/index.js文件中。vuex中使用module文件。