- 博客(153)
- 资源 (1)
- 收藏
- 关注
原创 vue3.5.12 vite 5.4.8使用service worker 缓存 vite-plugin-pwa
【代码】vue3.5.12vite5.4.8使用serviceworker缓存vite-plugin-pwa。
2025-01-02 15:33:43
236
原创 Echarts中文版 2D世界地图
美国和格陵兰hover不出现名字,因为tmp.json 地图数据的脏数据,可以用我本文的地图数据(@/assets/tmp.json )链接: https://pan.baidu.com/s/1vMcTiOVWMZNF-wMeg9qsGg 提取码: 1234。
2024-09-14 15:08:40
325
原创 element plus el-table show-overflow-tooltip实现源码
文件地址:packages/components/table/src/table-body/events-helper.ts。
2024-08-29 19:48:45
581
原创 时钟翻牌器 vue3
index.vue<template> <div class="FlipClock"> <Flipper ref="flipperHour" /> <em>:</em> <Flipper ref="flipperMinute" /> <em>:</em> <Flipper ref="flipperSecond" /> </div>&l
2024-06-06 19:02:54
1597
2
原创 mac book pro (m1 pro芯片)安装 ADB(Android Debug Bridge) 并导出日志
在Mac上连接安卓手机进行调试,你需要遵循与Windows上类似的步骤,但具体的设置和工具可能会有所不同。无需配对码直接远程链接电脑和手机,但必须手机和电脑需连接在同一 WiFi 下;ip和port 可以再手机上查找。6、根据提示,输入第 3 步中的配对码,系统会显示一条消息,表明您的设备已成功配对;5、运行adb pair ip:port,使用第 4 步中的 IP 地址和端口号;4、允许无线调试后,选择使用配对码配对。记下显示的配对码、IP 地址和端口号;1、手机和电脑需连接在同一 WiFi 下;
2024-05-30 19:26:13
1210
原创 表单检验 async-validator
Element UI 表单校验使用的是 async-validatorAnt Design 的form组件底层也是 async-validator。
2024-05-30 19:23:06
333
原创 vuejs 3.x 通过js 判断文本超长一出后出现省略号 ... 并动态设置显示element plus tooltip弹框
文本’xxxxx‘超长不会自动换行,需要使用css设置强制换行,不换行getClientRects()返回的数组里只有一个元素;因为行数据只被识别分割成一个独立的块。
2024-05-30 19:22:33
342
原创 vueJs 2.x elementUI messageBox手动关闭
【代码】vueJs 2.x elementUI messageBox手动关闭。
2024-05-30 19:21:54
568
原创 Echart 渐变颜色、图例文本与图标的布局
效果:代码:<!DOCTYPE html><html lang="en" style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script
2024-05-30 19:21:02
856
原创 收缩页面js+css动画,缩小弹框页面移动至头像处
/ 移动到页面的右下角,这里假设页面高度为100vh,宽度为100vw,具体数值可能需要根据实际情况调整。/* 为了演示移动效果,确保弹框是绝对定位 *//* 添加过渡效果 */
2024-05-30 19:15:28
400
原创 个性化步骤条、多边形
width;height;borderrgb;;;flex;position;content"";width;height;position;background;rgb;right;top;z-index;content"";width;height;position;rgb;
2024-05-30 19:14:48
777
原创 vite + vue + typscript + pinia + axios + vue-router + elementPlus
创建项目后。
2024-05-10 10:26:28
1083
3
原创 vuejs 3.x项目使用terser-webpack-plugin 去除console 没有生效
【代码】vuejs 3.x项目使用terser-webpack-plugin 去除console 没有生效。
2023-12-14 18:52:58
972
原创 chakra-ui useForm 数组动态遍历FormControl组件 表单验证 TS react nextjs
【代码】chakra-ui useForm 数组动态遍历FormControl组件 表单验证 TS react nextjs。
2023-11-11 11:35:20
235
原创 webpack与vite区别
总体来说,Vite在开发体验上更加快速和顺滑,webpack提供了更完整的功能和生态,两者都有各自的使用场景。webpack采用“打包”的方式构建,需要将所有模块打包成几个大的bundle文件,构建速度较慢。assistant: 在Vite中,可以通过配置vite.config.js文件来实现代理功能。在开发环境下,代理是一个非常有用的功能,可以避免跨域问题。Vite采用了“按需编译”的方式,只在浏览器请求时才编译对应模块,启动速度更快。Vite HMR采用细粒度更新,只更新修改的模块,HMR速度更快。
2023-08-06 19:53:49
798
原创 vite4 + vue3 + pinia + axios + vue-router + elementPlus
创建项目后node_modules 有但是就是找不到使用pnpm i 重新加载依赖就可以了关键是其他电脑上没有这个问题…(可能是我本机配置有问题)
2023-04-14 18:11:49
3013
原创 vue中动态跟新 favicon.ico;<link rel=“icon“ href=“<%= BASE_URL %>favicon.ico“>
因为第一次加载成功后就会有缓存(再vue项目,请各位大神解惑为啥)相同域名首次加载成功后,会被缓存无法更改,首次加载不成功可以有效。updateFavicon 内容。其次再router守卫 处理。不href控制会被缓存。
2023-01-31 20:00:59
3174
1
原创 vuejs 2.x;gzip文件压缩 compression-webpack-plugin;可视化资源分析webpack-bundle-analyzer;splitChunks分包;
【代码】vuejs 2.x;gzip文件压缩 compression-webpack-plugin;可视化资源分析webpack-bundle-analyzer;splitChunks分包;
2023-01-17 13:34:11
483
原创 正则实用列表2023
验证多行xyz坐标 尾部可以没有\n 每行开头可以有除去\n 以外的空白字符。验证有多少个xyz坐标的原子。验证0-0.7之间的数字。验证0-1之间的数字。
2023-01-04 10:31:14
223
原创 CSS linear-gradient 实现背景双色或多色,颜色渐变,颜色分明
参考连接:https://blog.youkuaiyun.com/qq_41860203/article/details/111559665。/* 背景色45度倾斜 *//* 由深蓝渐变为白色 *//* 上下两色分明 *//* 左右两色分明 */
2022-12-16 14:02:24
1521
原创 webpack运行原理;构建工具的定义;webpack的定义;编写webpack loader; 编写webpack plugin;
构建工具的定义构建就是做这件事情,把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码,包括如下内容。代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。自动刷新:监听本地源代码的变化,自动重
2022-04-07 18:43:08
480
原创 tapable 中文文档
Tapabletapable 公开了许多Hook类,可以用来为插件创建钩子实例。const { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, AsyncSeriesBailHook, AsyncSeriesWaterfallHook } = require("tapable");安装npm in
2022-04-07 17:04:44
759
原创 JS的继承 ES5;javascript的继承;
基础概念说继承之前简单介绍一下,几个概念,有助于更深刻的理解继承。能用口述或者文字的形式,说一下什么是函数吗?按照犀牛书的说法,函数简单的说就是重复执行的代码块。函数是这样的一段JavaScript 代码,它只定义一次,但可能被执行或调用任意次。//使用方式//1.直接声明function(){}//2.函数表达式let fun = function(){}//3. new Function()var fun1 = new Function (arg1 , arg2 ,arg3 ,…
2022-01-29 16:30:22
1098
原创 js关闭浏览器页签
兼容性js实现function closeWebPage(){ if (navigator.userAgent.indexOf("MSIE") > 0) { if (navigator.userAgent.indexOf("MSIE 6.0") > 0) { window.opener = null; window.close(); }else { window.open('', '_top'); window.top.c
2021-12-22 19:11:45
1398
原创 主动取消请求的多种情况,原生Ajax、Jquery、axios、fetch
原生Ajax对于原生XHR对象来说,取消的ajax的关键是调用XHR对象的.abort()方法 var xhr = new XMLHttpRequest(); xhr.open("GET","https://api.github.com/"); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ c
2021-12-02 19:46:22
635
原创 Object.defineProperty & Proxy
object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。官网地址使用:let arr = [1,2,3]let obj = { arr,}Object.defineProperty(obj, 'arr', { get () { console.log('get arr') return arr }, set (newVal) { console.
2021-12-02 19:46:06
592
原创 javascript 结束 forEach
使用抛出异常来跳出foreach循环let arr = [0, 1, "stop", 3, 4];try { arr.forEach(element => { if (element === "stop") { throw new Error("forEachBreak"); } console.log(element); // 输出 0 1 后面不输出 });} catch (e) { consol
2021-12-02 19:45:44
1513
原创 nuxt设置全局loading
创建js文件elLoading.jsimport { Loading as ElLoading } from 'element-ui'class LoadingConf { constructor(){ this.loading = null this.loadingCounter = -1 } showLoading(config) { if (config) { // config.loading 自定义 变量 通接口中传过来,用于控制那些接口需要load
2021-12-01 19:57:27
2169
原创 必须有数字和字母组合的密码正则表达式
由数字和字母组成,并且要同时含有数字和字母,且长度要在8-16位之间。^(?![0-9]+)(?![a−zA−Z]+)(?![a-zA-Z]+)(?![a−zA−Z]+)[0-9A-Za-z]{8,16}$分开来注释一下:^ 匹配一行的开头位置(?![0-9]+)预测该位置后面不全是数字(?![a−zA−Z]+) 预测该位置后面不全是数字(?![a-zA-Z]+)预测该位置后面不全是数字(?![a−zA−Z]+) 预测该位置后面不全是字母[0-9A-Za-z] {8,16} 由8-16位数字或这
2021-11-29 13:51:28
1530
原创 css实现圆环进度条
vue组件<template> <div class='container'> <div class="left"> <div class="leftcircle"></div> </div> <div class="right"> <div class="rightcircle"></div> </d
2021-11-22 14:27:35
1315
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人