- 博客(102)
- 收藏
- 关注
RSS订阅原创 css设置动态数值：clamp函数
CSS 的 clamp() 函数是一个强大的工具，用于创建响应式且范围可控的动态值。它结合了min() 和max() 的逻辑，允许你定义一个值在最小值和最大值之间动态调整。
2025-05-28 10:42:57
524
原创 Decimal.js 的常用方法
Decimal.js是一个用于高精度计算的JavaScript库，特别适用于需要避免浮点数精度问题的场景，比如金融计算。1. 安装与引入# 通过 npm 安装npm install decimal.js// 浏览器环境<script src="decimal.js"></script> // Node.js 环境const Decimal = require('decimal.js');2. 基本用法创建实例const a = new Decimal(123.456);
2025-05-12 13:08:20
327
原创 JS判断用户使用的是什么浏览器
// 获取浏览器类型const getSysType = () => { var Sys: any = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+
2025-04-17 11:56:22
124
原创 vue所有的内置指令及修饰符说明
1. v-text功能：更新元素的 textContent，直接渲染纯文本内容。修饰符：无。2. v-html功能：渲染原始 HTML 内容（需注意防范 XSS 攻击）。修饰符：无。3. v-show功能：通过 CSS 的 display 属性控制元素显示/隐藏，适合频繁切换的场景。修饰符：无。4. v-if / v-else-if / v-else功能：条件渲染，直接添加或移除 DOM 元素。v-if 为真时渲染，v-else-if 提供多条件分支，v-else 作为默认分支。
2025-04-17 11:55:58
492
原创 JS一元减号运算符（-）的使用方法及注意事项
在 JavaScript 中，一元减号运算符（-）用于对操作数的值取反。1. 数字类型 - 直接取反：2.字符串类型 - 若字符串是有效数字，转换为数字后取反：3.布尔类型 - true 转为 1，false 转为 0：4.对象类型 - 调用 valueOf() → toString() 转换为原始值，再取反：5.null 和 undefined - null 转为 0，undefined 转为 NaN：6.BigInt 类型 - 支持直接取反：注意事项NaN 结果：若操作数无法转换为有
2025-04-03 09:45:19
468
原创 JS一元加号运算符（+）的使用方法及注意事项
一元加号运算符（unary plus operator）在JavaScript中主要用于将其操作数转换为数字类型（如果操作数本身不是数字的话）。这个运算符只有一个加号（+），并且它前面没有任何其他操作数。
2025-03-28 10:16:22
368
原创 vue3中用v-for循环出三个元素，绑定元素的ref并拿到这三个元素的ref属性
这种情况多在动态循环三个form表单的情况出现，以element UI为例：简单来说就是用的ref的函数用法：:ref="el => (formRefs[index] = el)"
2025-03-18 11:08:45
664
原创 vue上传文件的请求头携带token校验、和携带另外的参数请求
拿element plus UI库举例：，（不使用element plus的话js方法通用）：// 自定义上传文件(携带token和id)const myUploadHttp = (options: any) => { console.log(options); if (!options) return; let Authorization = localStorage.getItem("Authorization");//请求头添加token权限
2025-03-12 11:40:49
583
原创 使用vue的路由打开新标签页跳转
vue的路由只支持在本标签页跳转，要用vue的路由打开新标签页需要做处理再用window.open方法打开router.push: 这是 Vue Router 提供的用于在当前标签页中进行路由跳转的方法。router.resolve: 这个方法会返回一个包含 href 等属性的对象，href 是解析后的完整 URL。window.open: 这是原生的 JavaScript 方法，用于在新标签页中打开指定的 URL。'_blank' 参数表示在新标签页中打开
2025-03-12 11:29:58
440
原创 js获取html标签中的纯文本
用到js的DOMParser Api// 从html中获取纯文本const getTextFromHtml = (htmlString) => { const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); // 获取所有文本内容，包括子节点的文本 const textContent = doc.body.textContent || "";
2025-03-07 10:12:40
180
原创 前端带样式导出excel表格，html表格生成带样式的excel表格
众所周知，前端生成表格通常是用xlsx、excel.js等js库，但这些库想要生成时增加excel样式会很麻烦。有这么一个js库把html表格连样式带数据一并导出为excel表格
2025-02-17 11:21:42
427
原创 python实现打开电脑上的任意软件；打开某个视频并全屏、循环播放；并定时启动该程序
python实现打开电脑上的任意软件；打开某个视频并全屏、循环播放；并定时启动该程序
2025-02-12 10:30:02
419
原创 用html、css、js 200行代码实现的todolist功能，可以持久存储，有添加、删除、待办、已办、创建时间等功能，并自适应屏幕大小
用html、css、js 200行代码实现的todolist功能，可以持久存储，有添加、删除、待办、已办、创建时间等功能，并自适应屏幕大小
2025-01-16 16:36:06
151
原创 js根据两个经纬度点计算文字显示角度
用于计算两点之间的罗盘方位角（也称为恒向线角或罗盘角）。这种方法假设地球是一个球体，并且沿着最短路径（即大圆路径）测量两点之间的距离和方位角，但在计算方位角时采用了一种简化的方法，即假设沿恒向线（罗盘线）航行。rhumbBearing(start, end)方法需要两个参数，一个开始经纬度数组，一个结束经纬度数组。
2024-12-17 14:54:22
277
原创 js把数据导出excel表格并给表格设置样式
// 整理表格const formatExcel = (data, name) => { // 创建一个新的工作簿 const workbook = XLSXS.utils.book_new(); // 创建数据 const worksheetData = data; // 将数据转换为工作表 const worksheet = XLSXS.utils.aoa_to_sheet(worksheetData); // 设置样式 cons
2024-10-08 11:19:12
608
原创 js判断一个对象里有没有某个属性
使用in操作符时，它会检查对象自身及其原型链上是否有该属性。hasOwnProperty()只检查对象自身是否有该属性，不检查原型链。Object.keys()会返回一个由对象自身所有可枚举属性键组成的数组，然后通过includes()检查数组是否包含该属性键。propertyIsEnumerable()检查对象自身是否包含该属性，并且该属性是否可枚举。
2024-09-25 11:15:35
970
原创 vue实现从粘贴板获取图片
const pastPic = async (e) => { let items = (e.clipboardData || e.originalEvent.clipboardData).items; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { //只过滤出粘贴的图片 formList.loading
2024-09-14 13:15:39
307
原创 js使用网络请求下载文件
// 网络请求下载文件export const donwloadFileByUrl = async (item) => { axios.get(item.filePath, { responseType: 'blob' // 拿到文件的blob数据 }).then(async (blob) => { console.log(blob); const url = URL.createObjectURL(blob.data); const a = document.cr
2024-09-10 16:06:49
596
原创 vue使用全局指令实现左右拖拽调整元素宽度
app.directive('draggable', draggableObj)const draggableObj = { mounted(el, binding, vnode) { let xOffset = 0; let yOffset = 0; el.style.width = binding.value + 'px'; const handleMouseDown = (event) => { xOffset = event.clientX;
2024-08-28 09:52:46
482
原创 vue3 el-table手动选中某一行、设置默认选中某一行
选中某一行用的是el-table的toggleRowSelection方法，用来切换某一行的选中状态
2024-06-25 11:24:40
3676
原创 用vue把iconfont阿里巴巴的图标封装成组件（可该颜色、大小、增加css动画等样式）
一般来说iconfont图标库是下载图片作为icon，这样对编码来说就有些局限性，比如不能图片的颜色，css动画等等，我们来把iconfont的图标库封装成组件就可以实现：1. 在components文件夹下创建个空的myIcon.vue文件：2. 在iconfont-阿里巴巴矢量图标库中找到适合自己项目的icon，我随便找了一个，然后不下载图片，点击复制svg代码：......... 以上是更改颜色，除此之外还可以把myIcon完全当做组件来用，比如增加css的animation动画：
2024-05-30 11:18:57
745
4
原创 解决css使用@keyframes/animation属性失效的问题
导致该属性失效的原因可能有很多种，这里记录我遇到的一种：以下代码阴影不生效：以下代码阴影生效：
2024-05-13 15:14:44
1326
1
原创 uniapp解决后端传来的id太长导致精度丢失（超过16位的数字会变成0000）的问题
办法一：让后端把id传成字符串类型；办法二：用jsonBig转换为bigInt数字类型：1.在项目根目录打开命令行输入命令安装jsonBig插件：2.在封装的请求中使用插件，核心是在uni.request的配置项添加{dataType: 'String'}配置(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析
2024-05-11 16:23:55
1484
原创 axios解决后端传来的id太长导致精度丢失（超过16位的数字会变成0000）的问题
办法一：让后端把id传成字符串类型；办法二：用jsonBig转换为bigInt数字类型：1.在项目根目录打开命令行输入命令安装jsonBig插件：2.在封装的请求中使用插件，核心是在创建sxios实例的时候假如transformResponse这个配置项，可以拦截接口返回的内容进行处理(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析
2024-05-11 16:23:04
2170
原创 微信开发者工具预览和真机调试的时候显示游客appid无法使用此功能的解决办法
并扫码选择登录你的账号，没有账号要点二维码下边小程序注册。这里有你的小程序appid，复制。打开微信开发者工具，点详情 - 基本信息 - 修改appid。微信开发者工具的appid和uniapp的appid无关。把再微信公众平台复制的appid粘贴进来再确定就行了。
2024-03-29 11:41:37
5080
原创 鸿蒙开发运行“Hello World“ 项目时报错：Can not find @ohos/hvigor Please check @ohos/hvigor configuration and sync
当我新创建一个项目想预览时提示报这个错：Can not find @ohos/hvigor Please check @ohos/hvigor configuration and sync
2024-01-09 17:29:40
9127
6
原创 uniapp app端路由跳转时设置跳转过渡时间
其中，animationType和animationDuration属性只在app端生效，而且只有uni.navigateTo可以使用uni.reLaunch无法使用 uni.navigateTo({ url: this.nextUrl, animationType: "slide-in-left", animationDuration: 15000 });
2023-11-22 15:42:57
864
原创 javaScript解决手机浏览器下载为图片之后，图片漆黑无法保存的问题
pc端能正常下载图片并查看手机移动端下载的图片全是黑色的并且无法保存，这个问题可能与移动浏览器的安全策略有关解决办法：使用Blob对象和createObjectURL方法来创建一个临时URL，然后将其赋给链接的href属性下载：
2023-11-22 15:34:18
1153
原创 解决uniapp的video标签和transition属性使用时出现错位的问题
视频错位了 ，因为视频消失又出现的时候transition过渡还没结束，所以错位了，这时候在点击按钮向上滚动的时候给控制视频消失/显示的样式延后0.3秒就行了，如(v-if)
2023-11-02 11:08:34
1488
原创 vue3中使用vue-i18n
1.先在项目中下载vue-i18n2.1 .为了结构清晰，在src目录下创建一个lang文件夹2.2 . 在lang文件夹分别下创建两个文件：en.js / zh.js代表两种语言2.3 . 接着在lang文件夹下创建一个index.js文件：3. 在main.js中引入并use刚才创建的index.js文件：4. 到此基本配置已经完成了，接下来使用：在项目中任意一个.vue文件中：5.修改语言
2023-10-30 17:35:59
1079
原创 uniapp把文件中的内复制到另一个文件中
使用的是Html 5+的plus.io.resolveLocalFileSystemURL方法切记：要操作一个目录必须就要plus.io.resolveLocalFileSystemURL一次，像我示例里边有三个操作目录的动作，1.读取目录2. 删除老目录3. 把读取到的目录内容移动到目标目录所以就嵌套了三层plus.io.resolveLocalFileSystemURL；
2023-10-24 17:37:49
1900
1
原创 uniapp退出微信小程序的代码
uni.exitMiniProgram()是UniApp提供的方法之一，用于在小程序平台中退出当前小程序应用该方法还可以接受一个配置项，配置项包含成功和失败的回调函数：
2023-09-04 15:10:43
3842
原创 npm v10.0.0 is known not to run on Node.js v12.8.0. This version of npm supports the following node
执行命令时报错：ERROR: npm vxxx is known not to run on Node.js vxxx. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.报错说你现在的npm版本是vxxx 不支持你现在Node的版本vxxx，需要把node版本改成npm支持的
2023-09-04 10:38:01
4535
原创 Refused to execute script from ‘‘ because its MIME type (‘text/html‘) is not executable, and strict
Refused to execute script from 'http://localhost:8080/style.js?v=1.1' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.造成这个报错的情况有很多，比如服务器配置错误、缓存问题、代码错误、应用部署问题等等这篇文章是在前端项目运行时产生的问题，原因就是我在vue.config.js中设置了静态资源
2023-08-22 11:58:56
9316
原创 Vue3如何像在prototype（原型）上挂载数据
1. 首先，由于Vue团队对原型链的封装和改进，Vue3无法像Vue2一样直接在原型上放置数据，2. 在Vue原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据，如果Vue3想要达到同样的效果，即（所有组件都可以通过this.myName获取到张三），需要用到vue3的mixin方法：这样，在其他组件使用this.myName的时候就可以获取到'张三'，达到与在Vue.prototype上挂载数据同样的作用
2023-08-08 11:41:49
4899
1
原创 vue全局状态管理工具 Pinia 的使用
与vuex的作用一样，用于全局共享数据。其实Pinia就是起源于vuex的一次更新，Pinia 于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式api的 vue 状态管理库，就是说在vuex中可以写vue3的代码。，即“菠萝”，菠萝花是一组各自独立的花朵，它们结合在一起，形成一个多重的水果。Pinia确实比vuex方便了很多，它不需要受到action和mutation的限制，可以直接对仓库中的数据进行读写我感觉Pinia与Vuex的关系就像是Vue3和Vue2的关系。
2023-07-25 15:54:52
1016
原创 创建一个vue3 + vite项目，一个命令创建
1. 在一个文件夹下打开cmd命令窗口并输入命令：2. 接着询问你是否需要安装以下这些包，这些都是需要的，输入y回车3.接着起一个项目名称，默认是vue-project4.接着是否使用TypeScript，根据个人需求选择，如果你不知道TypeScript是什么就选No5.接着JSX同理，不知道是什么就选No6. 接着是否添加路由（Router），根据需要选择，这个我一般选择yes7.接着是否添加Pinia，Pinia的作用于vuex相同，用于全局共享数据，根据需要添加8. 接着是否添加单元
2023-07-25 14:28:52
518
空空如也
uniapp视频播放时绿屏
2023-02-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人