随笔分类 -  前端

1 2 3 4 5 ··· 16 下一页
HTML、css、JavaScript、vue、jQuery
TinyMCE + Vue 使用
摘要：1. 简介 TinyMCE 是一个强大的富文本编辑器，tinymce-vue 是官方提供的 Vue 组件封装，可轻松集成到 Vue 2 / Vue 3 项目中。 本文使用的依赖版本如下 "vue": "3.5.13", "@tinymce/tinymce-vue": "^6.3.0", "tinym 阅读全文
posted @ 2025-12-11 09:12 槑孒 阅读(71) 评论(0) 推荐(0)
Next.js + pnpm Docker 构建问题
摘要：1. 问题现象 在 Docker 构建过程中，执行： RUN npm install -g pnpm@10.11.1 时报错： npm error EEXIST: file already exists npm error File exists: /usr/local/bin/pnpm 2. 问题 阅读全文
posted @ 2025-09-19 16:25 槑孒 阅读(68) 评论(0) 推荐(0)
HTTP 事件流（SSE）与WebSocket的区别
摘要：HTTP 的事件流（如 Server-Sent Events, SSE）和 WebSocket 都是用于实现实时通信的技术，但它们在设计目标、工作方式和适用场景上有显著区别。 以下是两者的详细对比： 1. 通信模式 HTTP 事件流（SSE） 单向通信：仅支持服务器向客户端推送数据（服务器 → 客户 阅读全文
posted @ 2025-06-20 15:32 槑孒 阅读(360) 评论(0) 推荐(0)
Vue3+ textarea 实现自动控制高度+Enter键发送+Shift+Enter换行
摘要：vue3+ textarea 实现自动控制高度+Enter键发送+Shift+Enter换行 使用的element-ui的el-input组件 <el-input v-model="inputMessage" :autosize="{ minRows: 1, maxRows: 4 }" type=" 阅读全文
posted @ 2025-05-15 13:50 槑孒 阅读(194) 评论(0) 推荐(0)
QT的CEF方案集成网页加载失败解决方案
摘要：CEF方案加载不显示网页问题 报错不兼容JS的Static语法块问题 ✅ 解决方案（更新 Browserslist + Babel） ✅ 第一步：配置 browserslist 在 package.json 中添加或修改 browserslist 字段： "browserslist": { "pro 阅读全文
posted @ 2025-05-06 09:36 槑孒 阅读(141) 评论(0) 推荐(0)
uniapp整合SQLite(Android)
摘要：一、勾选SQLite数据库选项 （1）HBuilder工具打开项目 （2）项目/manifest.json =>App模块配置 => 勾选SQLite(数据库) 二、封装sqlite.ts 在项目根目录下创建sqlite/sqlite.ts // 数据库名称 const dbName = 'scan 阅读全文
posted @ 2025-03-17 15:30 槑孒 阅读(1256) 评论(0) 推荐(0)
JS实现 ZIP 压缩包的导入解析
摘要：功能目标 在前端实现 ZIP 压缩包的解析，将文件名通过下拉框展示，并支持查看所选文件的内容。 使用技术 JSZip：解析 ZIP 文件的库。 FileReader：读取用户上传的文件。 HTML 和 JavaScript：实现交互和动态内容展示。 实现步骤 1. 引入 JSZip 通过 CDN 或 阅读全文
posted @ 2024-11-27 11:09 槑孒 阅读(1014) 评论(0) 推荐(1)
Vue 3 路由组件缓存keep-alive
摘要：Vue 3 路由组件缓存 Vue3 KeepAlive官方文档 1. keep-alive 基本介绍 keep-alive 是 Vue 的内置组件，用于缓存动态组件或路由组件，避免组件被频繁销毁和重建，从而提高性能。 当组件被 keep-alive 包裹后，在路由切换时不会销毁组件，而是将其缓存起来 阅读全文
posted @ 2024-08-30 00:38 槑孒 阅读(4620) 评论(0) 推荐(0)
JS实现对象只复制已存在的属性
摘要：JavaScript 实现只复制已存在属性的笔记 在 JavaScript 中，如果需将一个对象的属性复制到另一个对象中，但只复制目标对象中已经存在的属性，可以使用以下几种方法： 1. 手动遍历属性 通过遍历 source 对象的属性，并判断 target 对象中是否存在对应属性，决定是否进行复制。 阅读全文
posted @ 2024-08-26 14:53 槑孒 阅读(295) 评论(0) 推荐(0)
CSS设置文本省略
摘要：在 CSS 中，可以使用 text-overflow、white-space 和 overflow 来配置文本省略（即当文本内容超过容器宽度时，显示为省略号 ...）。以下是实现单行和多行文本省略的配置方法。 1. 单行文本省略 要实现单行文本省略，可以使用以下 CSS： .ellipsis { w 阅读全文
posted @ 2024-08-25 21:00 槑孒 阅读(1577) 评论(0) 推荐(0)
动态获取ref绑定的组件实例
摘要：在 Vue 3 中，如果使用动态 ref，可以通过 this.$refs 或 template refs 来获取。因为 ref 是动态的，需要使用对应的键名来访问。 一、示例代码 假设有一个列表，每个列表项都有一个 <el-upload> 组件，并且为每个组件动态设置了 ref： <template 阅读全文
posted @ 2024-08-23 17:09 槑孒 阅读(906) 评论(0) 推荐(0)
el-upload重复上传文件失效(Element-Plus)
摘要：当指定了参数limit=1, 再次上传就会无效 以下是官方文档给出的解决方法示例 通过on-exceed来定义超出限制时的行为 <template> <el-upload ref="uploadRef" :limit="1" :on-exceed="handleExceed" :auto-uploa 阅读全文
posted @ 2024-08-23 17:05 槑孒 阅读(783) 评论(0) 推荐(0)
Vue Router 返回后记住滚动条位置的实现方法
摘要：要在 Vue Router 中实现返回时记住滚动条位置的功能，可以利用 Vue Router 提供的 scrollBehavior 函数。这允许在导航时控制页面的滚动行为，包括返回之前访问的页面时恢复到之前的滚动位置。 实现方法 以下是一个示例，展示如何在 Vue 3 中使用 scrollBehav 阅读全文
posted @ 2024-08-23 09:20 槑孒 阅读(827) 评论(0) 推荐(0)
Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json
摘要：pnpm install 报错 Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json Note that in CI environments this set 阅读全文
posted @ 2024-08-21 14:55 槑孒 阅读(839) 评论(0) 推荐(0)
前端项目package.json文件引用本地依赖
摘要：在前端项目的 package.json 文件中引用本地依赖，可以使用以下几种方式： 1. 使用 file: 前缀 如果本地依赖是一个已经存在的目录，可以在 package.json 中使用 file: 前缀来引用它。 { "dependencies": { "your-local-package": 阅读全文
posted @ 2024-08-01 14:15 槑孒 阅读(2256) 评论(0) 推荐(0)
el-slider实现滚动条自定义分段颜色
摘要：<template> <el-slider ref="sliderRef" class="!w-80%" style="--el-slider-runway-bg-color: red; --el-slider-main-bg-color: green" v-model="speedRange" r 阅读全文
posted @ 2024-07-29 23:40 槑孒 阅读(348) 评论(0) 推荐(0)
Dom-API | MutationObserver使用方法详解
摘要：MutationObserver 介绍 MutationObserver 是是一个用于监视 DOM 变动的 Web API。通过它可以监控 DOM 树中的更改，比如元素的属性、子元素的增加和删除等，并在这些变化发生时执行回调函数。可以替代过时的 Mutation Events，它具有更高的性能和更广 阅读全文
posted @ 2024-07-29 23:19 槑孒 阅读(448) 评论(0) 推荐(0)
Vue3动态生成组件
摘要：在 Vue 3 中，要遍历 funConfig 并动态生成组件，可以使用 Vue 的 defineAsyncComponent 来加载异步组件，并结合 v-for 指令在模板中进行渲染。 以下是一个示例代码来实现这个需求： 1. 配置文件 确保配置文件导出的是一个 reactive 对象： impo 阅读全文
posted @ 2024-07-18 22:19 槑孒 阅读(423) 评论(0) 推荐(0)
vue中使用leaflet加载瓦片时残缺
摘要：然后改动窗口大小才会正常 在map容器所在的vue页面中，在方法中加入 nextTick(()=>{ let map = L.map(...)； }) nextTick作用是在所有dom元素加载完毕之后才执行 因为这种情况一般是容器dom还没调整到相应大小，地图就已经创建了，所以在加载完毕之后会显示 阅读全文
posted @ 2024-07-12 10:49 槑孒 阅读(165) 评论(0) 推荐(0)

1 2 3 4 5 ··· 16 下一页