- 博客(65)
- 资源 (3)
- 问答 (4)
- 收藏
- 关注
RSS订阅转载 摘录 State of JavaScript 2024 问卷调查
本文全文摘录自调查问卷 / State of JavaScript 2024，填写时发现很多新特性、框架等没有使用乃至听说过，特摘录下来以供个人学习查阅
2024-11-20 18:50:40
152
转载 摘录 State of HTML 2024 问卷调查
本文全文摘录自"调查问卷 / State of HTML 2024"，填写时发现太多 HTML 新 API 没有使用乃至听说过，特摘录下来以供个人学习参考。感兴趣的可以前往填写问卷，摸摸底。
2024-11-01 15:19:45
108
原创 vue-router 在新的标签页打开链接/路由
vue-router 在新的标签页打开链接/路由，由于官方没有提供对链接target属性的配置，要实现这个需求，需要自行实现，这里提供几个方案供参考
2024-09-14 15:01:15
1281
原创 优化Webpack打包流程：打包完成后再删除旧文件，确保网站访问稳定
假设webpack打包耗时三分钟，在这三分钟内，网站都是无法访问的。生产环境下，影响太大。在生产环境下，为了确保网站的稳定性和一致性，通常建议在打包完成后再部署新的打包文件，以确保网站始终可访问。因此，想到一个手动操作文件系统的方案: 将项目打包到临时文件夹下，完毕后，删除原dist文件夹，再将临时文件夹重命名为dist。
2023-07-03 14:54:28
3052
原创 [BUG记录] Element Plus 的 Backtop 组件未生效
vue项目，页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件，未随着页面滚动生效
2023-06-14 16:35:16
1898
1
原创 axios封装，包括基本封装以及若干非必要封装（自定义方法、监听上传/下载进度、中断请求、接口loading）
axios 是前端开发的基本工具之一，它的封装早就不新鲜了本文分为两部分：一是 axios 基本封装示例；二是非必要封装，列举个人开发中遇到的一些较为实用的封装需求。
2023-05-29 17:10:16
4502
原创 分享：前端开发使用的各类AI工具辅助开发
现在谁还没听过 ChatGPT，通没通网我不确定，但一定不是搞开发的网上各种教注册OpenAI账号的、卖key的，然后就可以去各类基于ChatGPT api的插件、应用使用。但是这类都属于不合规的方式，这里不推荐虽然因为种种原因，无法直接使用。但现如今，已经有的很多合规方式可以让我们稳定使用了。
2023-04-15 00:35:41
13622
2
原创 对比 vue2 vue3 中响应式地获取 vuex 状态
store中的状态是响应式的，在组件中调用 store 中的状态仅需要在计算属性中返回即可。
2023-04-07 11:35:30
659
原创 Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染、多级表头) - 个人使用总结
element-plus@2.2.0 后提供的虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考。
2023-03-13 14:33:00
25320
24
原创 实现 element-plus 表格多选时按 shift 进行连选的功能
element-plus表格提供了多选功能，可单击勾选一条数据，可全选。现在有个很合理的需求，希望实现类似于文件系统中shift连续选择功能，并且在表格排序后，依照排序后的顺序连选。
2023-02-14 22:34:42
2999
原创 Element Plus 跟踪表格数据总数，包括查询、筛选等操作
Element Plus表格，在筛选等更改表格数据条数的操作下，如何实时跟踪计算它。本文探索了两种方案
2023-01-19 15:40:13
3651
原创 [BUG记录] element-ui / element-plus 的 Select 可搜索组件在 iOS 下无法唤起软键盘
element-plus 的 Select 组件可以通过 filterable 属性开启搜索功能，该组件在iOS系统中，点击组件输入框，无法唤起软键盘。vue3.x下的解决方案略有不同
2022-12-30 16:56:18
2007
原创 [BUG记录] vue3 setup provide/inject：无法正常进行依赖注入
以服务的方式来调用element-plus loading，导致依赖注入失效：祖先组件部分属性无法provide，后代组件无法inject祖先组件provide的值。
2022-08-18 14:54:08
7865
原创 js 构造函数 return 非空对象，其实例化的对象在原型上的差异
ECMAScript 中的构造函数是用于创建特定类型对象的。构造函数也是函数，只是使用new操作符调用构造函数会执行如下操作：(1) 在内存中创建一个新对象(2) 这个新对象内部的 特性被赋值为构造函数的 属性(3) 构造函数内部的 被赋值为这个新对象（即 this 指向新对象）(4) 执行构造函数内部的代码（给新对象添加属性）(5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象......
2022-07-29 17:17:25
404
原创 上手 vue3 组合式API (Composition API) --- 语法要点总结
本文以 `` 为示例，总结个人学习使用 Composition API 的一些常见语法要点
2022-07-01 16:56:53
953
原创 基于 vue3 & element-plus 的暗黑模式
element-plus@2.2.0 已经开始支持暗黑模式了。通过在 html 标签上添加一个名为 dark 的类来启用为了方便切换，可使用 useDark | VueUse。示例：以下，基于 element-plus switch组件 创建了一个暗黑模式开关组件，将它放入菜单栏，就可以方便地切换模式了..................
2022-06-29 15:20:03
12329
原创 Element Plus@1.0更新至@2.x的一些破坏性改动
Element Plus官方迁移指南中间版本的更新策略：element-plus 代码仓库，discussion 中查询"Breaking Change"，可以查看迁移必备的更改，例如：Breaking changes made in 1.1.0-beta.11.2.0-beta.1 Breaking Change1.3.0-beta.1 Breaking ChangeElement Plus Breaking Changes其它非破坏性改动，可参照更新日志或者官方文档......
2022-06-20 11:48:11
5492
2
转载 JS原生滚动到指定元素
Element.scrollTo()、Element.scrollIntoView()、Element.focus()
2022-05-04 18:15:32
19296
原创 网页性能优化——图片，使用多种图片处理策略提升性能，包括压缩、云存储、预加载、懒加载、渐进式图片
前言网站如果包含很多图片等静态资源文件，那打包后的文件会非常大。不做处理会导致非常糟糕的浏览体验一、图片处理1、压缩首先就是压缩静态资源的大小。相机照片一张就能轻松破10M，微信、钉钉等都会自动压缩图片视频。放一个简单好用的在线图片压缩链接 squoosh图片过多时，效果受限，无法从根本上解决2、云存储将图片等资源存储在云上，使用外链方式引入需先下载后加载，下载速度不能保证，体验可能仍然很糟糕二、图片预加载图片预加载就是在当前页面加载完毕后，预先加载其它页面所需的图片，这样，切换到该页
2022-04-14 12:36:01
3969
原创 node-sass安装失败问题分析及解决方案
项目场景：一个使用node-sass的vue项目，从远程代码库拉到本地问题描述无法正常安装项目依赖error D:\My prgram\demo-proj\node_modules\node-sass: Command failed.Exit code: 1Command: node scripts/build.jsArguments:Directory: D:\My prgram\demo-proj\node_modules\node-sassOutput:Building: D:\
2022-03-14 12:31:44
8618
2
原创 async...await...异常捕捉封装
async…await…简化了Promise的写法，尤其是后者多次嵌套的情况下，代码可读性很差。但前者的异常捕获却没那么方便
2022-03-04 12:04:46
513
原创 vue相同的组件实例间跳转页面不刷新，即路径参数更改
使用带有参数的路由时需要注意的是，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用
2022-02-28 18:20:55
1929
原创 暗黑模式下图片处理
CodePen上发现的一行代码的方案 Dark mode image filter其实是通过使用 css filter 设置图片的亮度、饱和度：filter: brightness(0.8) saturate(1.25);
2022-02-07 09:55:53
1403
原创 vue i18n v9的迁移后的$t()无法获取数组、对象
项目场景：将老的vue2项目更新到vue3，vue-i8n也更新到v9版本以上后，发现改动还是挺大的具体迁移工作参考官网：vue-i18n: Migration from Vue 2问题描述：改动的细节很多，此文仅涉及 Translation API 的问题v9后，$t()将仅返回字符串，数组及对象会直接返回其属性名 原因分析：官方解释：“Reason: To make simple obligation to return the translation results, and i
2022-01-14 11:36:43
2849
原创 JS打印表格时边框缺失问题
问题描述：JS打印表格时边框缺失问题项目场景：window.print()打印网页，预览中，表格的边框缺失部分或全部原因分析：首先，怀疑是设置了border-collapse:collapse合并边框导致的问题不使用合并边框，手动设置td边框后发现问题还是存在然后，发现貌似是PDF预览的问题。下载PDF，打开，发现缩放都会让边框样式改变。转WORD或者直接打印机打印，证实边框样式并没有问题。。。解决方案：如果真的只是PDF预览问题，那无法解决。如果不是的话，可以参考这位老哥的方案：J
2021-12-30 17:26:19
5501
原创 v-viewer：vue3图片查看器
v-viewer：一个方便易用的vue3 图片查看器1、cdn引入：<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet"><script src="//unpkg.com/viewerjs/dist/viewer.js"></script><script src="//unpkg.com/v-viewer@next/dist/index.umd.js"></scrip
2021-12-24 14:46:27
13807
19
原创 element-plus表单验证使用 个人总结
表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的..............................
2021-10-18 12:22:19
51481
7
原创 js获取随机数
根据需要生成自己的随机数，一般用简单的随机数就可以了随机数Math.random(0,1).toString().substring(2)时间戳Date.now()时间戳+随机数Date.now() + +Math.random(0,1).toFixed(3)UUIDJS生成uuid的四种方法...
2021-09-14 19:01:59
821
原创 vue组件中监听键盘/按键事件
问题描述：组件监听键盘escape事件，vue提供的按键修饰器无法监听到组件整体上解决方案：将监听事件绑定在document上，销毁组件时，再移除该事件created() { document.addEventListener('keyup', this.escEvent)},methods: { escEvent(){ if(window?.event?.keyCode == 27) this.closeComp() }, closeComp() { // ... }}
2021-09-06 17:38:16
3367
原创 vue3使用Font-Awesome
如题，vue3使用font-awesome5有些需要注意的地方一、安装官方提供了很多安装使用方式，这里仅展示一种Git地址：vue-fontawesome1、npm安装Install the core package and icon content.安装核心包和图标npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/free-solid-svg-iconsInstall this Vu.
2021-05-18 10:32:59
11718
1
转载 css媒体查询总结
一、定义及基本用法CSS3 @media 查询1、定义使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。2、语法mediatype：媒体类型and|not|only：运算符(media feature)：媒体功能@media mediatype and|not|only (medi
2021-05-14 15:41:14
764
原创 js实现一个回调，在页面内所有图片及后续动态插入的图片加载完成后（onload）执行
需求描述架构：原生js及jQuery需求：需要根据网页DOM及资源都加载后的布局（高度等）来调整页面方案：监听图片的load事件，都加载完毕后，执行后续js逻辑考虑到动态添加的dom中也可能存在图片，对这些图片也需要监听load事件1 load事件绑定问题1.1 在img标签中定义onload事件...<img src="img/img_1_1.png" onload="testLoad()"/>...<script>testLoad = () => {
2021-04-23 19:05:14
1959
原创 js入口函数
原生js// 不仅文本加载完毕，而且图片也要加载完毕，再执行函数。window.onload = function () { console.log(1);}jQuery// 1.文档加载完毕，图片不加载的时候就可以执行这个函数。$(document).ready(function () { console.log(1);})$(function () { console.log(1);});// 2.文档加载完毕，图片加载完毕的时候再执行这个函数。$(window).read
2021-04-23 14:46:43
1754
原创 JavaScript的console用法
console常用的四个输出方法：console.log：输出普通信息console.info：输出提示性信息console.error：输出错误信息console.warn：输出警示信息上面4种方法，都可以使用printf风格的占位符。支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。其他方法其它方法参考下列文章：Console MDNconsole.log 用法(调试用)...
2021-04-23 14:39:26
207
VueEleTable.vue
2020-03-12
Mybatis-Plus的插入数据返回主键值
2020-09-15
百度地图底图上的默认标注点在移动H5页上如何设置点击事件
2019-12-20
H5百度地图获取当前定位只能定到城市吗？
2019-10-18
H5页面如何添加预设样式？
2019-08-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人