- 博客(39)
- 收藏
- 关注
RSS订阅原创 Vue 之组件插槽Slot用法（组件间通信一种方式）
在某些场景中，我们可能想要在父组件为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。插槽分多种，默认插槽、具名插槽、条件插槽、动态插槽、作用域插槽。父组件：父组件传递给子组件的数据，可以通过插槽再次传递给父组件使用，非常常用。父组件：子组件的插槽写在哪里，父组件传递的内容就在哪里展示。3.条件插槽，主要是为了给插槽提供额外的样式。2.具名插槽，一个子组件可以存在多个。父组件：父组件使用具名插槽有2种写法。4.动态插槽，动态传入插槽名。2）插槽类型和举栗子。
2024-09-29 09:10:34
655
3
原创 按键 tab 则 切换输入框, 按键 ↑↓ 则 加减数值
2、进入页面就聚焦到第一个输入框（ 用focus() ）；tab切换时，聚焦到下一个输入框；聚焦到最后一个输入框时，再tab切换，聚焦到第一个输入框。1、按键 tab切换input框，默认tab切换会聚焦到浏览器地址栏（F12时会聚焦到开发者工具选项），我们需要阻止该默认事件。3、使用el-input-number设置好属性，实现↑↓按键input框值加减。不要忽视你达成的每个小练习，它是你前进路上的垫脚石。3、进入页面就监听tab事件，离开页面时移除监听事件。如有不足，欢迎指正。
2024-09-29 09:09:57
462
原创 Vue3封装table表格右键菜单功能
3、右键菜单组件 事件传递，这里没有使用emit的方式，而是调用textList数组对象中fnn字段传递给子组件的，子组件调用就可以触发 父组件定义的方法。3、右键菜单组件 展示内容，数据的传递 textList 和 点击事件的位置clickXY（决定右键菜单组件出现的位置）。2、右键菜单组件 出现的位置，根据右键单击table表格的位置 对 右键菜单组件的位置进行设置。点击菜单选项，可选择只读/编辑，可在只读/编辑方法中，拿到该行列表格的数据，进行相关操作。如有不足，欢迎指正。
2024-09-10 23:20:38
1024
2
原创 table表格左键双击，单元格可编辑效果
不要忽视你达成的每个小目标，它是你前进路上的垫脚石。(回车按钮或者点击其他位置input框失去焦点)2、左键双击后，该单元格更改为input框后，1、el-table提供了左键双击事件。，数据需要更改，emit 数据给父组件。input框需要获取焦点。如有不足，欢迎指正。
2024-09-09 09:37:25
504
1
原创 性能优化之自定义指令实现图片懒加载
是常见的用于在页面滚动时动态加载图片，而不是在页面加载时一次性加载所有图片。性能优化必备提高页面加载速度的手段，特别是在包含大量图片的网站上。图片懒加载的原理，其实就是，当图片出现在视口内时，进行图片的加载。市场上也有成熟的第三方库可以帮助我们实现图片懒加载，如 Vue Lazyload 或 vue3-lazy。不过在这里，我通过自己的理解，使用浏览器 API——Intersection Observer 实现图片懒加载的自定义指令。很多问题有多种解决方案，深入探究，前进。积跬步，至
2024-08-07 23:04:15
1151
16
原创 ElementPlus 中el-select自定义指令实现触底加载请求options数据
ElementPlus 中el-select自定义指令实现触底加载请求options数据/ 不插入body时，以下方式可获取元素// 插入body时，需要以document.querySelector('.el-scrollbar__wrap')获取
2024-08-02 23:39:24
1701
25
原创 效能工具：执行 npm start 可直接切换proxy代理UR后直接启动项目
因此经常切换vite.congig.js中的proxy后端代理链接，是挺麻烦的。于是我研究如何能快速切换后端URL，所幸懒人有懒福，我找到了Inquirer 和 fs，实现执行 npm start 可直接切换vite.config.js中proxy的代理URL，然后直接启动项目。
2024-07-16 10:00:32
1046
12
原创 用户可拖动的Echarts图，滚动条显示七天数据及tooltip浮层配置，亲测有效
用户可拖动的Echarts图，滚动条显示七天数据及tooltip浮层配置
2024-07-11 10:46:56
1157
1
原创 ElementUI el-select最上面添加一个‘全部‘选项
ElementUI提供的el-select并没有'全部'选择，这一个选项，而业务中又有需要，遂自己写一个
2024-07-10 09:54:59
1026
原创 JS获取当前日前几天前的日期、两个日期相差天数、当月的天数、几月前的日期
JS获取当前日前几天前的日期、两个日期相差天数、当月的天数、几月前的日期
2024-07-09 09:19:30
640
原创 [Vue Router warn]: ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.
Vue3 keep-alive的用法 [Vue Router warn]: can no longer be used directly inside or .
2024-07-03 11:07:41
528
原创 input框上传图片，利用createObjectURL或者FileReader去实现图片预览
input框上传图片，利用createObjectURL或者FileReader去实现图片预览
2024-06-26 10:19:05
363
原创 Vue打包报错处理Syntax Error: Error: spawn /Users/apple/main/node_modules/gifsicle/vendor/gifsicle ENOENT
Syntax Error: Error: spawn /Users/apple/main/node_modules/gifsicle/vendor/gifsicle ENOENT
2024-06-25 09:40:10
386
原创 利用fetch内置API和createObjectURL实现静态资源的下载
利用fetch内置API和createObjectURL实现静态资源的下载
2024-06-21 12:13:54
246
原创 数组对象排序arr.sort几种使用方法
需求1: 根据数组对象的 单个属性 排序需求2: 根据数组对象的 多个属性 排序需求3: 刷新页面时，单个属性随机排序
2024-06-18 12:26:30
427
原创 TypeError: this.cliEngine is not a constructor
the eslint library loaded from node_modules\eslint\lib\api.js doesn't export a cliengine.you need at least eslint@1.0.0.TypeError: this.cliEngine is not a constructor
2024-06-18 12:25:48
534
原创 搭建Vue3+Vite+Js+Element-plus项目遇到的报错集合
搭建Vue3+Vite+Js+Element-plus项目遇到的报错集合
2024-06-17 14:00:00
971
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人