随笔分类 - 前端
HTML、css、JavaScript、vue、jQuery
摘要：1. 原始方案（静态配置） // 依赖环境变量，需在 .env 文件中配置 const websocketUrl = import.meta.env.VITE_WEBSOCKET_SERVER_BASEURL; 缺点： 需要手动配置环境变量 不灵活，切换环境需要修改配置 开发和生产环境需要不同配置
阅读全文
摘要：1. 简介 TinyMCE 是一个强大的富文本编辑器，tinymce-vue 是官方提供的 Vue 组件封装，可轻松集成到 Vue 2 / Vue 3 项目中。 本文使用的依赖版本如下 "vue": "3.5.13", "@tinymce/tinymce-vue": "^6.3.0", "tinym
阅读全文
摘要：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. 问题
阅读全文
摘要：HTTP 的事件流（如 Server-Sent Events, SSE）和 WebSocket 都是用于实现实时通信的技术，但它们在设计目标、工作方式和适用场景上有显著区别。 以下是两者的详细对比： 1. 通信模式 HTTP 事件流（SSE） 单向通信：仅支持服务器向客户端推送数据（服务器 → 客户
阅读全文
摘要：vue3+ textarea 实现自动控制高度+Enter键发送+Shift+Enter换行 使用的element-ui的el-input组件 <el-input v-model="inputMessage" :autosize="{ minRows: 1, maxRows: 4 }" type="
阅读全文
摘要：CEF方案加载不显示网页问题 报错不兼容JS的Static语法块问题 ✅ 解决方案（更新 Browserslist + Babel） ✅ 第一步：配置 browserslist 在 package.json 中添加或修改 browserslist 字段： "browserslist": { "pro
阅读全文
摘要：一、勾选SQLite数据库选项 （1）HBuilder工具打开项目 （2）项目/manifest.json =>App模块配置 => 勾选SQLite(数据库) 二、封装sqlite.ts 在项目根目录下创建sqlite/sqlite.ts // 数据库名称 const dbName = 'scan
阅读全文
摘要：功能目标 在前端实现 ZIP 压缩包的解析，将文件名通过下拉框展示，并支持查看所选文件的内容。 使用技术 JSZip：解析 ZIP 文件的库。 FileReader：读取用户上传的文件。 HTML 和 JavaScript：实现交互和动态内容展示。 实现步骤 1. 引入 JSZip 通过 CDN 或
阅读全文
摘要：Vue 3 路由组件缓存 Vue3 KeepAlive官方文档 1. keep-alive 基本介绍 keep-alive 是 Vue 的内置组件，用于缓存动态组件或路由组件，避免组件被频繁销毁和重建，从而提高性能。 当组件被 keep-alive 包裹后，在路由切换时不会销毁组件，而是将其缓存起来
阅读全文
摘要：JavaScript 实现只复制已存在属性的笔记 在 JavaScript 中，如果需将一个对象的属性复制到另一个对象中，但只复制目标对象中已经存在的属性，可以使用以下几种方法： 1. 手动遍历属性 通过遍历 source 对象的属性，并判断 target 对象中是否存在对应属性，决定是否进行复制。
阅读全文
摘要：在 CSS 中，可以使用 text-overflow、white-space 和 overflow 来配置文本省略（即当文本内容超过容器宽度时，显示为省略号 ...）。以下是实现单行和多行文本省略的配置方法。 1. 单行文本省略 要实现单行文本省略，可以使用以下 CSS： .ellipsis { w
阅读全文
摘要：在 Vue 3 中，如果使用动态 ref，可以通过 this.$refs 或 template refs 来获取。因为 ref 是动态的，需要使用对应的键名来访问。 一、示例代码 假设有一个列表，每个列表项都有一个 <el-upload> 组件，并且为每个组件动态设置了 ref： <template
阅读全文
摘要：当指定了参数limit=1, 再次上传就会无效 以下是官方文档给出的解决方法示例 通过on-exceed来定义超出限制时的行为 <template> <el-upload ref="uploadRef" :limit="1" :on-exceed="handleExceed" :auto-uploa
阅读全文
摘要：要在 Vue Router 中实现返回时记住滚动条位置的功能，可以利用 Vue Router 提供的 scrollBehavior 函数。这允许在导航时控制页面的滚动行为，包括返回之前访问的页面时恢复到之前的滚动位置。 实现方法 以下是一个示例，展示如何在 Vue 3 中使用 scrollBehav
阅读全文
摘要：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
阅读全文
摘要：在前端项目的 package.json 文件中引用本地依赖，可以使用以下几种方式： 1. 使用 file: 前缀 如果本地依赖是一个已经存在的目录，可以在 package.json 中使用 file: 前缀来引用它。 { "dependencies": { "your-local-package":
阅读全文
摘要：<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
阅读全文
摘要：MutationObserver 介绍 MutationObserver 是是一个用于监视 DOM 变动的 Web API。通过它可以监控 DOM 树中的更改，比如元素的属性、子元素的增加和删除等，并在这些变化发生时执行回调函数。可以替代过时的 Mutation Events，它具有更高的性能和更广
阅读全文
摘要：在 Vue 3 中，要遍历 funConfig 并动态生成组件，可以使用 Vue 的 defineAsyncComponent 来加载异步组件，并结合 v-for 指令在模板中进行渲染。 以下是一个示例代码来实现这个需求： 1. 配置文件 确保配置文件导出的是一个 reactive 对象： impo
阅读全文
浙公网安备 33010602011771号