- 博客(29)
- 收藏
- 关注
RSS订阅原创 【Naive UI】实现useDrawer hooks后续优化
之前的blog【Naive UI】实现useDrawer hooks-CSDN博客，提供了一种hooks方案以API的方式调用Naive UI的弹窗组件，在一般的单抽屉弹窗的业务场景下是没有问题的，但是后面发现，在打开一个抽屉后再打开新的抽屉，会出现问题：关闭上层抽屉，会把所有的抽屉都关闭掉。原因是因为按照原来的实现，抽屉组件创建时候都绑定了同一个show属性
2024-05-30 18:26:20
334
原创 【Naive UI】实现useDrawer hooks
最近在使用Vue3 + Vite + Naive UI开发新项目，发现Naive对于dialog，model组件都提供了API方式的调用实现，同时支持传入render函数，可以轻松地实现弹出式的组件功能。但是同样是弹出式组件的抽屉（drawer）却被不公平对待😡， 居然没提供API方式的调用，只能老老实实在template引入使用，这简直无法忍受，网上查了一圈没有找到相关的实现，到官方github的Issues居然没人提这个需求😮，所以我以hooks方式自己实现一个useDrawer。
2024-05-15 11:26:55
241
原创 【JavaScript基础】使用JSON.stringify快速提取数组键值
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。如果此函数返回 undefined，则排除成员。可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。必需， 要转换的 JavaScript 值（通常为对象或数组）。用于转换结果的函数或数组。
2024-02-05 23:23:19
622
原创 Element UI 组件el-table以高内聚的方式实现拖拽排序
最近碰到el-table做拖拽排序的需求，而且有好几个页面都用到相同的代码逻辑，就想着把这拖拽排序的代码给封装一下，多个地方都能复用。并且以高内聚的方式封装，其他项目要用的话，直接copy一个js文件过去就能用，方便快捷。
2024-01-29 18:03:41
875
原创 Element UI 组件全局设置默认配置
Element UI 组件库有时候想全局设置一些默认配置，避免重复代码。以vue项目为例，把以下js引入到main.js即可，再引入这个封装后的date-picker替换原先的el-date-picker，即可全局默认设置快捷选项，如果某个场景的组件需要定制，重新设置即可覆盖此默认值。Element UI 组件库有时候想全局设置一些默认配置，避免重复代码。以vue项目为例，把以下js引入到main.js即可。
2024-01-08 11:46:22
1530
原创 TypeScript基础学习笔记
TypeScript 作为 JavaScript 语言的超集，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更健壮的组件。
2023-12-05 16:01:02
1082
原创 Vant 2：van-popover组件气泡弹窗溢出屏幕的问题
本文提供一种补丁方案处理vant 2：van-popover组件气泡弹窗溢出屏幕的问题
2023-11-16 19:13:08
2001
2
原创 前端工程项目(Vue项目为例)目录文件命名规范（个人推荐）
例：person-manage.vue、new-information/index.vue、new-information/detail.vue。注意：Windows文件系统是不区分大小写的，而Linux区分，曾经发生：文件名小写，本地开发环境运行和打包都没问题，在CI上打包会报错找不到文件，使用大驼峰命名和引入文件时必须仔细区分好大小写。例：wx-config.js、request.js、design-pattern.ts、axios.d.ts。全部采用小写方式，以短横线分隔，有复数结构时使用复数形式。
2023-11-02 15:56:28
2040
原创 Naive UI的数据表格 Data Table 动态显示隐藏列
刚好遇到一个需求，要根据不同状态，显示隐藏不同列，所以要动态修改columns属性的数组，看到官方githup仓库上也有这么个issue：但目前最新版本也并没有支持这个属性。Naive UI的表格组件跟Element UI有点不同，template里面不需要再写每一列的组件，而是通过数组渲染每一列的数据。通过控制width属性，再过滤掉宽度为0的列，就可以动态切换表格每一列的显示和隐藏。
2023-10-27 18:26:58
1339
原创 【JavaScript进阶】手写深度克隆函数（循环递归方式）
使用递归+循环方式手写功能全面的深度克隆函数，包含原型链指向，排除原型上的属性以及考虑环形引用的情况
2023-08-12 22:39:06
234
原创 vant 2：van-tabs组件标签切换时滚动位置不准的问题之后续
本文接之前van-tabs组件标签切换时滚动位置不准的问题，给出真正原因和完美处理方法
2023-07-22 15:33:49
921
原创 vant 2：van-tabs组件标签切换时滚动位置不准的问题
本文简要介绍了关于vue.js移动端开源组件库：vant 2的van-tabs组件标签切换时滚动位置不准的问题和处理方案。
2023-07-21 17:13:37
2331
原创 SVG图标使用指南
介绍可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于XML的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比HTML相对于文本。本文简要介绍它的使用方法。
2023-03-13 11:16:30
1665
原创 【JavaScript进阶】函数柯里化
在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。以下定义一个接收多个参数的函数，使用柯里化将它，当它接收足够的参数时，就执行函数。最后附上一段大神的极简currying代码，思路与上面的写法是一样的。
2023-03-06 23:28:46
120
原创 TypesScript+vue3+vite项目根据文件目录自动生成路由注册表
vue工程化项目每新增一个页面都要注册路由，是个繁琐而且重复的工作，下面通过vite提供的import.meta.glob方法自动引入路由，拼接路由注册表，从而减少手动注册路由的工作量。备注：如果使用webpack可以使用require.context()，也能做到根据文件目录生成路由注册表，这里不多赘述
2023-03-02 00:09:53
955
原创 微信小程序中内嵌的H5页面调用微信的JSSDK的注意事项
开发微信小程序时用webview中打开H5页面，在webview中，需要实现发送短语音功能，调用微信的录音JSSDK。权限注册失败处理
2023-02-24 18:17:19
1287
原创 vue管理后台项目表格分页搜索问题和element组件el-pagination的使用
管理端常见搜索功能，若不在第1页进行搜索，将会搜索出n条数据但界面表格当前页数无数据的问题，此文分析此问题和解决方案。
2023-02-19 11:53:40
1705
1
原创 vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死
2023-02-16 10:31:43
757
原创 vue移动端项目调试优雅的引入vconsole
移动端项目经常要在线调试，引入vconsole插件，当生产环境出现故障需要查看接口或数据时，直接引入会影响用户使用，可以通过以下方法优雅地调出vconsole，又不影响正常用户使用
2022-12-22 11:01:29
1282
原创 Vue项目与后端网络通信，http网络请求失败时的异常提示
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。大部分vue项目都是使用axios这个库来发起网络请求。
2022-10-01 18:22:39
3184
原创 javascript函数传参方式
javascript基础：函数传参方式先分析以下逻辑输入什么：let a = { name:'a', age:12}function change(o){ o.age = 18 o = { name:'b', age:49 } return o}let b = change(a)console.log(a.age)//18console.log(b.age)//49涉及内容：1.按值
2022-05-22 12:09:55
4482
原创 使用拼接URL显示指定定位（腾讯地图）
最近碰到需求，做某个单位的官网，显示地址栏，点击跳转到导航到该单位的地址，使用腾讯地图api实现：1、先使用腾讯地图提供的坐标拾取器（腾讯位置服务 - 立足生态，连接未来），此工具免登录可直接使用，即可获取拼接url的三个参数：title、coord、addr2、即可拼接直接跳转导航的urlhttps://mapapi.qq.com/web/mapComponents/locationMarker/v/index.html?type=0&marker=coord:23.10647,1
2022-05-11 18:12:57
1199
原创 小程序webview嵌入h5兼容iphone安全区域
在苹果 iPhoneX及以上设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，原生APP和小程序和H5都可以使用苹果官方推出适配方案css函数env()、constant()来适配。但是嵌入微信小程序webview中的h5网页使用env()、constant()是不生效的，需要在顶层的h5应用做兼容处理。1.在webview加入padding-bottom，或者调整webview高
2022-04-05 22:55:42
2028
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人