- 博客(8)
- 收藏
- 关注
原创 vue3函数挂载组件如何传入和使用插槽
之前通过el-dialog实现了一个函数式调用的二次确认弹框组件,由于业务需求需要支持弹框内部内容自定义,那么首先想到使用插槽的方式实现,由此引出了本次的问题:函数挂载组件如何传入和使用插槽;弹窗vue实例内部,默认slot插槽用于接收传来的h函数或jsx;由于函数式挂载的vue组件并没有写templete,所以考虑。
2024-11-12 10:30:40 254
原创 如何作为程序员搞办公室恋情(js实现修改主题色)
我们只需要找到页面中所有的样式内容,然后将内容里面老的主题色对应的色系全部替换为新的色系即可;因为女朋友是公司的业务,想做一个主题色修改的功能,所以满足她哈哈哈哈。获取外链的样式(link标签)内容并替换样式。获取DOM元素上的style(内联样式)获取页面的style标签内容并替换样式。有了如上思路之后我们开始代码实现。
2024-08-30 16:49:56 639 3
原创 vue3实现非确定高度列表项的虚拟滚动列表
虚拟滚动列表是一种优化长列表渲染性能的技术,通过只渲染可视区域内的列表项,减少DOM的渲染数量,从而提高页面滚动的流畅性。在滚动时,只渲染可视区域内的列表项,而不是一次性渲染所有列表项。通过计算可视区域的起始索引和结束索引,动态渲染该范围内的列表项。当用户滚动时,根据滚动位置动态更新可视区域内的列表项,从而实现虚拟滚动的效果。
2024-08-19 10:02:39 923
原创 使用rrweb进行前端页面可回溯录制
rrweb 全称 'record and replay the web',是当下很流行的一个录制屏幕的开源库。与我们传统认知的录屏方式(如 WebRTC)不同的是,rrweb 录制的不是真正的视频流,而是一个记录页面 DOM 变化的 JSON 数组,因此不能录制整个显示器的屏幕,只能录制浏览器的一个页签。
2024-08-15 13:44:24 1315
原创 vue3使用createVNode + render基于el-dialog封装二次确认弹框组件
【代码】vue3使用createVNode + render基于el-dialog封装二次确认弹框组件。
2024-08-09 19:05:37 402
原创 vue + echarts + websocket实现PC后台首页实时数据大屏展示(含地图)
2、在给echart设置大小宽高等样式要根据当前浏览器宽度和设计稿宽的比例动态计算一下。以对象的形式创建websocket连接,加入心跳检测重连机制,通过事件监听触发回调;主要是用到echarts的visualMap、geo和map类型的series;对象向外暴露向服务端推送信息的方法以及主动关闭socket链接的方法;筛选时动态改变饼图option中series的data切换渲染维度;大屏页面左侧、底部列表为相似样式列,固抽离为公用组件,注意点是。在main.js中引入文件;
2024-07-03 10:46:22 714
原创 基于已经创建的vue3业务组件库接入typescript
如果执行vue add typescript报vue : 无法加载文件 C:\Program Files\nodejs\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink。Restricted 策略不允许任何脚本运行,防止执行不信任的脚本。初始化成功后项目中应该会出现tsconfig.json等文件,并且将js后缀文件替换为ts后缀文件;LinkID=135170 中的 about_Execution_Policies;
2024-06-17 10:35:10 466
原创 Vue3基于element-plus二次封装搜索列表组件
element原生的props配置,透传给element,select比较特殊,valueName为绑定的值的key,labelName为绑定展示文案的key,options为下拉选先数据源。如果有比较定制化的需求,可以将列表和筛选栏组件拆开分别引入使用,减少了组件的耦合性,增强了组件的可扩展性;在列表接口请求前的事件,事件会返回search栏对应绑定的query,可以在此方法中处理接口请求入参,改函数return的参数就是最后请求接口的参数;组件主要接收两个参数,一个为顶部筛选栏的配置项。
2024-06-04 17:01:29 1012
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人