- 博客(36)
- 收藏
- 关注
RSS订阅原创 探索Vue：数字翻滚动画的实现与优化
这个Vue组件名为，旨在通过数字翻滚的效果来展示一个变化的数值。无论是整数还是小数，都能以翻滚动画的形式呈现，为数据展示增添一抹动感。
2025-02-20 14:42:15
428
原创 el-select下拉框在弹框里面错位
组件所在的父容器中。这样做的好处是可以避免下拉菜单被父容器的样式或布局所影响，确保下拉菜单能够正确地显示在屏幕上的合适位置。时，下拉菜单将会被 "传送"（teleported）到 body 的直接子元素中，而不是。，这意味着下拉菜单将不会被传送到 body 的直接子元素中，而是会渲染在。Element Plus 是一个基于 Vue 3 的组件库，组件的下拉菜单的渲染位置，从而避免一些潜在的布局问题。是其中一个用于选择器的组件。属性用于控制下拉菜单的渲染位置。在这个示例中，我们将。组件所在的父容器中。
2025-01-07 17:13:26
417
原创 vue3和vue2父子组件互相通信的方式和原理
在Vue框架中，父子组件之间的数据传递是一个核心功能，它允许组件之间进行有效的通信和数据共享。随着Vue 3的发布，父子组件之间的传值方式发生了一些变化，同时也带来了一些新的特性和改进。本文将详细总结Vue 3与Vue 2在父子组件传值方面的区别和原理。
2025-01-03 11:12:01
913
原创 什么是代理，node&nginx前端代理详解
nginx代理就是通过一个特殊的网络服务去访问另一网络服务的一种间接访问方式。像我们不能直接访问国外的网站，只能使用VPN，就是使用了代理。
2024-11-27 10:24:29
1303
原创 【elementUI系列四】el-selec位置偏移解决思路
在开发过程中，el-select位置随着滚动条的出现，未退出focus状态下窗口出现如下情况，下拉框已经超出屏幕显示区域，下拉内容还在屏幕中，如图：一、解决方案翻阅官方文档，发现el-select的属性popper-append-to-body默认是将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false考虑到功能的通用性和可复用性，最终决定选择使用自定义指令directives来实现，根据类名获取到所有下拉框，监听页面滚动后，改变下拉框样式，关闭显示下拉选项。
2024-11-22 16:28:22
1170
1
原创 vue+antdesign开发踩坑记录之keep-alive刷新tab-pane
奇奇怪怪的产品大佬们提了个反人类的需求，要根据有无数据显示不同的pane面板，没有就不显示，但是pane业务每个面板调用的接口都不一样当然还有一点就是项目也很古老，用的是antdesign-1.x和vue2,使开发过程变得爽之又爽。。。
2024-05-30 16:29:06
356
1
原创 vue2中swiper的使用（swiper6)
例如：怎么引用和使用，原生直接按需引入swiper-bundle.min.js和swiper-bundle.min.css文件即可，官方vue的使用也是在vue3的说明，没有vue2的使用文档。
2023-12-14 14:22:53
1619
原创 【elementUI系列三】el-table多列排序（后端排序）、重置后清除排序
业务需求el-table需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列（一个字段）排序。点击一列排序，另一列排序自动消失一、解决方案想要支持多列排序，首先要定义一个数组，用于存放所有排序的字段及其顺序，设置列sortable=“custom”，结合sort-change事件header-cell-class-name属性，在点击排序箭头时进行排序操作。
2023-10-31 14:35:26
5180
1
原创 Vue2：使用provide和inject时，无法获取到实时更新的数据
当vue文件中存在多级的父子组件传值、多个子组件或孙子级组件都要使用顶级或父级的数据时，使用provide 和 inject 组合出现一个问题，只是注入的初始值，并不能随时拿到数据源的实时更新。
2023-09-13 15:23:53
974
原创 vue项目中object内嵌html链接
在做项目是通常会遇到两方平台对接打通，需要把html的页面内嵌到vue的项目里，做到两方内容打通。object内嵌,
2023-08-18 09:51:18
796
2
原创 手写签名vue-esign和vue-signature-pad对比
1. 兼容 PC 和 Mobile； 2. 同时支持vue2和vue3; 3. 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）； 4. 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色手写签名vue-esign和vue-signature-pad对比.因为是vue3项目，同时不需要笔压控制，同时只需要清空和保存，就选择了vue-esign。nut-popup为京东风格的轻量级移动端组件库nutui组件弹窗层。以上总结，vue-signature-pad的功能更丰富些。
2023-06-28 16:53:06
1568
原创 el-tree没有复选框时，选中、高亮、定位功能的实现
机缘在使用无选择框的el-tree时遇到的一个问题，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能，其中定位功能涉及到无论当前在那个菜单，删除某一项菜单后，刷新菜单会跳到全部，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的...
2023-06-16 17:04:55
392
原创 vue中this.$router.push跳转提示 Cannot read properties of undefined (reading ‘push')
背景项目封装axios的全局拦截的时候遇到一个很奇怪的问题：axios.interceptors.request中遇到接口status不是200的情况，想跳到首页，方法如下:this.$router.push('/Login')可是，并没有达到预期的效果，总会提示Cannot read properties of undefined (reading 'push')探索中。。。...
2023-06-15 15:57:13
1036
原创 el-tree没有复选框时，选中、currentNodeKey高亮、定位、刷新后保留展开状态功能的实现
使用无选择框的el-tree时，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。el-tree没有复选框时，选中、高亮、定位、刷新后保留展开状态功能的实vue2+elementUI的el-tree的选中、高亮、定位功能，其中定位功能涉及到无论当前在那个菜单，删除某一项菜单后，刷新菜单会跳到全部:current-node-key="currentNodeKey" ----> 设置初始选中的值:highlight-current="true" ----> 设置高亮 必须写
2023-06-13 15:22:40
5228
原创 js根据某个属性合并两个数组
两个数组，如果id相同则合并到一起，id不一样则添加,arr.reduce((pre,cur)=>{},arr1);Object.assign方法拷贝cur对象里面的值到目标对象也就是target里面，也就是如果target对象里面有cur对象里面的属性就覆盖，如果没有就添加。target的值就是判断下累计的数组里面有没有和当前元素id一样的，一样的话把pre里面的这个元素赋值给target，没有的话就赋值为undefined。arr1是初始值，
2023-06-05 15:48:51
340
原创 【webstrom】常用插件和快捷键设置
1.1.1 File-setting-LiveTemplates-JavaScript，点击右侧的加号，选择Live Template1.1.2 ///+enter实现代码注释/***/1.2.3 点击Define，选择模板的应用范围，选中JavaScript。
2023-05-12 14:44:33
1656
原创 使用screenfull插件报错error in ./node_modules/screenfull/index.js解决思路
npm install --save screenfull,使用安装依赖报错。因为直接install安装的版本是^6.0.1，网上查了资料后说是版本太高了，需要降低版本，抱着试一试的心态，选择了降低版本，降成5.*，把导入的路径改一下
2023-05-11 15:29:49
1451
原创 h5键盘弹起遮挡输入框的处理
混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验。
2023-04-26 14:54:39
6755
5
原创 用html2canvas截图保存图片趟坑记录
前言：开发过程中截图保存图片用到html2canvas，但是呢，使用过程中也会趟坑。。。来说下趟过的坑一、截图不全问题：开发中发发现有滚动条的情况下会截图不全，仅能展示出当前页面展示出来的内容二、不支持textarea换行显示三、不支持省略号:js控制字数，截取字数长度后，动态添加省略号
2023-04-21 15:04:00
3944
原创 数组操作的方法总结汇总
数组常用操作方法大全，unshift、shift、push、pop、splice、split、sort、reverse、indexOf、findIndex、reduce、every、some、map、forEach等各种操作总结汇总
2023-04-20 16:38:53
1331
原创 在Vue3的setup中如何使用this
但是Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。可以看到，2者有所区别。ctx是普通对象，proxy是Proxy对象。2、使用：由vue提供，官方文档现已找不到此api，可寻找其他替代方案，可能也不推荐使用。中使用this， Vue为我们提供了getCurrentInstance（）方法，这个方法返回了ctx和proxy。1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。
2023-04-20 15:16:42
4050
原创 如何判断一个对象是否为空{}
Object.keys() 方法会返回一个，由一个给定对象的自身可枚举属性组成的数组。如果我们的对象为空，那么他会返回一个空数组。2、利用JSON 自带的 JSON.stringify() 方法来判断。（大概意思就是专为字符串‘{}’，来判断）1、根据 for...in 遍历对象，如果存在返回 true，否则返回 false。在实际开发中经常要判断判断一个对象是否为空，如果为空，则不能进行后续的操作。3、利用ES6中Object.keys()来判断（推荐该方法）可以采取以下方法来进行判断。
2023-04-18 16:25:35
1558
原创 Event loop微任务宏任务
亦或者有些代码执行了大量计算，比方说在前端暴力破解密码之类的鬼操作，这就会导致后续代码一直在等待，页面处于假死状态，因为前边的代码并没有执行完。微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。所以就是说在一行代码执行的过程中，必然不会存在同时执行的另一行代码，就像使用。当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行。先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中。遇到异步微任务则将异步微任务放入微任务队列中。1. 微任务、宏任务。
2023-04-12 17:42:42
106
原创 【elementUI系列二】el-image实现下载功能
el-image实现下载功能const imgUrl = document.getElementsByClassName('el-image-viewer__img')[0].src;
2023-02-10 13:44:38
3547
4
原创 【elementUI系列一】vue拖拽功能实现-vuedraggable实现多层嵌套拖拽
draggable区域内嵌入多层，要把拖拽区域加上class名称，draggable=‘.class名’,这样就能确保draggable内部分可以拖拽，部分不能拖拽el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题，那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.
2023-02-10 11:14:22
5813
3
原创 vue中this.$router.push 路由跳转提示错误 Cannot read properties of undefined (reading ‘push‘)
后来打印发现可能这个封装的方法里面最初this本身就有问题，打印出来是undefined,那怎么整都找不到$router啊，于是最后在这个js文件中引入了router。项目封装axios的全局拦截的时候遇到一个很奇怪的问题，axios.interceptors.request中遇到接口不是200的情况，想跳到首页，方法如下。当然，要是实在是想不到解决办法，我还有个投机取巧的方法，直接用windows本身自带的路径跳转也可以实现了。附上完整的registerAjax.js。然后像下面这样写，就可以实现了。
2023-02-01 18:01:22
20383
11
原创 webstrom没有语法错误，却有一堆烦人的红线
ESlint是代码检测、规范开发人员代码用的，虽然挺牛逼的，能帮助我们纠错，但是那种不是语法错误，单纯的只是缩进、空格、单双引号之类报出的红色波浪线，丑的要命了，如下图。类似git的忽略文件，来个*忽略所有就行了。只要在对应的报错文件上加上这么一句注释即可。bingo，红色波浪线没了~就是这个，空js或直接删除。
2023-01-10 15:42:26
1753
转载 npm run dev 执行过程
所以当使用 npm run dev 执行 vue-cli-service serve 时，虽然没有安装 vue-cli-service的全局命令，但是 npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为 脚本来执行，则相当于执行了 ./node_modules/.bin/vue-cli-service serve。在npm run dev的时候，首先会去项目的package.json文件里找scripts 里找对应的 dev ，然后执行 dev 的命令。
2022-11-24 14:21:52
5421
原创 VUE element-ui之el-form复杂表单的校验，可动态添加删除
项目场景：一些大型的项目中，不仅仅是简单的form表单校验，可能会有一些复杂的表单校验，入如下图所示，带新增删除功能，同时删除新增的表单也需要做校验： 关键点：data中数据如下：form表单格式如下： methods部分如下:
2022-11-02 11:21:32
4043
2
原创 一些关于git命令的简单整理
刚开始使用git时，整理了一些不常用的，但是工作中偶尔需要用到的git命令。1.git远程仓库回滚：其中BranchName 是仓库名。6.cache清除缓存。
2022-10-28 15:48:02
140
1
原创 vue 的ant design的Switch开关不支持二次确认，自定义封装
vue 的ant design的Switch开关不支持二次确认，所以自定义封装一套
2022-10-28 11:06:37
1940
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人