- 博客(106)
- 收藏
- 关注
RSS订阅原创 Vue 和 React 使用ref
因为 Vue 的 ref 是基于其响应式系统实现的，任何对 ref 的修改都会被 Vue 检测到，并触发组件的更新。useImperativeHandle 允许子组件自定义暴露给父组件的 ref 值。父组件通过 ref 访问子组件的实例，并调用子组件的方法（如 focus）forwardRef 允许父组件访问子组件中的 DOM 元素或组件实例。父组件通过 inpt 访问子组件中的 <input> 元素。3. 通过ref对象的current获取元素，再获取它的值。自定义子组件暴露给父组件的 ref 值。
2025-03-19 16:24:33
1017
原创 Vue3项目匹配PC端和移动端---两套组件
在 Vue 3 项目中同时适配 PC 和移动端，结合 响应式布局、动态组件加载 和 设备检测 来实现。DesktopLayout 或 MobileLayout。main.js这引入global.css。在 App.vue 中根据设备类型。
2025-03-17 15:21:40
264
原创 Vue3项目匹配PC端和移动端---一套组件
（@media）， 根据屏幕宽度动态调整组件的样式，从而实现一套代码适配 PC 和移动端。只写一套组件同时适配 PC 和移动端，通过。弹性布局 Flexbox 、Grid。没有Vue3项目，创建一个项目。
2025-03-17 14:30:20
252
原创 取余运算符（%）、 除法运算符（/）和 取整方法
JavaScript 中的一个内置函数，用于将一个。/ 与 % 结合使用 将秒数转换为分钟 秒。它常用于处理浮点数，将其转换为整数。a: 被除数 b: 除数。a: 被除数 b: 除数。，返回最接近给定数字的整数。
2025-03-14 16:35:54
456
原创 Vue3+Pinia 实现主题切换
将主题内容放在 global.css 文件中，并使用 CSS 变量和 data-theme 属性来定义主题样式，使用 Pinia 进行全局状态管理，使用pinia-plugin-persistedstate 插件本地持久化，最终实现主题切换。：使用 Pinia管理主题切换，通过修改 document.documentElement 的 data-theme 属性来切换主题，将主题持久化。在根组件中初始化主题 ：App.vue 中，使用 Pinia来管理主题切换。的，刷新页面后内存状态会被重置。
2025-03-14 15:35:00
431
原创 Vue3中 ref 与 reactive区别
返回值: reactive 直接返回一个响应式代理对象，（如 string、number、boolean 等），但它也。用途: reactive 用于创建一个。，访问或修改数据需要通过 .value 进行。用途: ref 通常用于创建一个。返回值: ref 返回一个带有。或需要明确访问 .value 的场景。使用场景: 适合处理。
2025-03-13 16:47:51
410
原创 CSS隐藏元素的方法
元素占据空间：元素会被移出屏幕，但仍会占据文档流中的空间（除非使用 position: absolute;适用场景：当需要隐藏元素但仍希望它能够交互或触发事件时使用，常用于隐藏表单标签或屏幕阅读器内容。元素占据空间：元素仍然占据文档流中的空间，但高度为 0。元素占据空间：元素仍然占据文档流中的空间。元素占据空间：元素仍然占据文档流中的空间。无法交互：元素及其子元素无法被点击或交互。无法交互：元素及其子元素无法被点击或交互。元素占据空间：元素仍然占据文档流中的空间。无法交互：元素及其子元素无法被点击或交互。
2025-03-12 15:06:34
428
原创 js中 字符串、数组 和 对象 截取数据方法总结
作用: 在字符串的开头或结尾填充指定字符，直到字符串达到指定长度。作用: 返回一个新数组，包含从开始到结束（不包括结束）的元素。作用: 返回字符串中指定位置的字符的 Unicode 编码。返回值: 匹配结果的数组，如果没有匹配则返回 null。作用: 删除或替换数组中的元素，并返回被删除的元素。作用: 创建一个新数组，包含通过测试函数的所有元素。作用: 提取字符串的一部分，并返回一个新的字符串。作用: 提取字符串的一部分，并返回一个新的字符串。作用: 返回一个包含对象所有可枚举属性值的数组。
2025-03-04 13:32:00
949
原创 数组随机排序
核心思想：从数组的末尾开始，逐个随机选择一个元素并与当前元素交换，直到整个数组被打乱。（也称为 Knuth 洗牌算法）是一种高效且均匀的随机打乱数组的算法。：简单，但并不是完全均匀，可能会导致某些排列出现的概率更高。
2025-03-04 12:46:28
116
原创 vue项目启动时报错：error:0308010C:digital envelope routines::unsupported
此错误与 Node.js 的加密模块有关，特别是在使用 OpenSSL 3.0 及以上版本时。Vue 项目在启动时可能会依赖一些旧的加密算法，而这些算法在 OpenSSL 3.0 中默认被禁用，导致。降级 Node.js 到 16.x 或更早的版本，这些版本默认使用 OpenSSL 1.1.x，不会出现这个问题。方法2：降级 Node.js 版本。在终端中运行以下命令，然后启动项目。（来管理 Node.js 版本）切换到 Node.js 16.x。安装 Node.js 16.x。（仅对当前终端会话有效）
2025-02-21 12:56:25
496
原创 vue 项目使用vue-watermark组件给页面添加满屏水印
专为 Vue 设计的水印组件，可添加文本或图片水印。创建一个水印组件 WatermarkIndex.vue。在页面中引入 水印组件。
2025-02-12 12:57:12
420
原创 配置@别名路径，把@/ 解析为 src/
经过以上配置，可以用@/home 替换 ./home , 但输入 @/ 时没有给出路径下 文件名提示。craco.config.js ，内容如下。提示：找不到模块‘path’，需安装。包文件中配置启动命令和打包命令。项目根目录下创建文件。
2025-02-05 13:12:32
552
2
原创 zustand 切片模式使用，persist 中间件持久化状态
安装 npm i zustand创建切片目录：创建切片 channelStore.js创建切片numStore.js。
2025-01-16 14:54:11
691
原创 react-quill报错Listener added for a ‘DOMNodeInserted‘ mutation event.Support for this event type has..
中 quill ==》 dist ==》 quill.js 文件中 修改代码。4、启动项目 npm run start。
2025-01-10 13:24:43
981
1
原创 flex布局、rem布局、vw、vh
盒子设置属性display:flex；开启弹性盒子布局，弹性盒子布局由 容器 和 项目组成；弹性盒子有两个轴：主轴 和 交叉轴；属性： flex-direction 定义主轴方向 值： row, row-reverse, column, column-reverse justify-content 定义项目在主轴上的对齐方式 值：flex-start, flex-end, center, space-between,space-around,space-evenly
2024-08-09 15:14:27
555
原创 双飞翼（圣杯）布局，bfc
bfc区域内的盒子 的左外边缘margin-left 会触碰bfc区域的左边缘border-left。垂直布局的盒子 相邻的两个盒子之间的距离用margin设置，margin 会重叠。BFC：格式化上下文 是独立渲染的一个区域 bfc内部盒子的布局不会影响区域外元素的布局。左右固定，中间自适应（左右固定宽高，进行浮动，中间 overflow: hidden）浮动盒子不会和bfc区域产生交集 ，而是紧贴bfc区域。计算bfc区域的高度 自动检测浮动盒子的高度。子绝父相 父盒子设置左右padding值。
2024-08-08 11:25:34
227
原创 字符串切割split，提取url中的参数
let arr = str.split(',') // ['aa占比:17.48%','aa计费占比:0.00%']console.log(obj) //{aa占比: '17.48%', aa计费占比: '0.00%'}console.log(Object.keys(obj)) // ['aa占比', 'aa计费占比']let str = "aa占比:17.48%,aa计费占比:0.00%"
2024-08-05 17:09:18
245
原创 VueRouter 相关信息
VueRouter 是Vue.js官方路由插件，与Vue.js深度集成，用于构建单页面应用。构建的单页面是基于路由和组件，路由设定访问路径，将路径与组件进行映射。VueRouter有两中模式 ：hash 和 history ，默认是hash模式。原理：更新视图不会重新请求页面hash: url中有# ，#和#后面的都是hash，发送http请求后，不会在http中显示#及#后面的window.location.hash读取hash 不会重加载页面。
2024-08-02 17:51:05
987
原创 keep-alive 是vue内置组件 缓存组件内部状态 避免重新渲染
离开被缓存的A组件 进入被缓存的B组件，会触发A组件的 deactivated ，则第一次进入被缓存的B组件 会触发beforeCreate ==>created ==>beforeMount ==>A组件的deactivated ==>mounted ==>activated。第一次进入被缓存的组件A 会触发beforeCreate ==>created ==>beforeMount ==>mounted ==>activated。可以缓存组件，也可以缓存路由。
2024-08-02 11:21:58
483
原创 vue2 封装插槽组件
允许你在组件中定义多个插槽，并为它们命名。：如果没有提供具名插槽，插入的内容会放入默认插槽。安装 element-ui。main.js 导入。
2024-07-31 11:58:25
394
原创 vue 双向数据绑定
Vue 3 通过Proxy和Reflect实现了更为高效和灵活的响应式数据系统。使用ref和reactive创建响应式数据，并结合effect函数进行依赖收集和触发更新，从而实现了双向数据绑定。相比于 Vue 2，Vue 3 的响应式系统在性能和功能上都有了显著提升。
2024-07-30 11:36:06
270
原创 apply call bind的区别
参数传递call使用参数列表，apply使用参数数组，bind不立即执行函数，而是返回一个新函数。返回值call和apply执行函数并返回函数的返回值，bind返回一个新的函数。使用场景call和apply通常用于立即调用函数并需要动态传递参数的场景，而bind用于创建一个预设了this值的新函数，可能稍后调用。
2024-07-29 17:36:38
917
原创 字典项匹配值
el-select v-model="form.ispId" placeholder="请选择运营商" clearable @clear="handleClear" ><el-form-item label="运营商">// 根据 ispId 获取名称。
2024-07-29 16:55:39
226
原创 首屏性能优化
压缩和优化资源：使用工具如 Terser 压缩 JavaScript，使用 vue-cli-plugin-compression 或类似工具压缩静态资源，优化图片大小。优化 CSS 和 JavaScript 执行：尽量减少 CSS 和 JavaScript 的阻塞时间，将非关键 CSS 和 JavaScript 延迟加载或异步加载。预加载和预取：使用 <link rel="preload"> 和 <link rel="prefetch"> 标签来提前加载或预取关键资源。
2024-07-29 14:38:18
324
原创 $nextTick
Vue 更新DOM是异步执行的，修改数据后，视图不会立即更新，会等同一事件循环中的所有数据都变化后再统一更新视图，如果想修改数据 立即就能对修改后的视图进行操作 可以使用$nextTick。获取最新DOM状态：在数据变化后，可使用$nextTick能确认DOM已经更新，然后再进行相关操作。执行延迟操作：所有的DOM更新 和 计算完成后，再进行一些操作，可以用$nextTick。操作DOM元素：数据变化后，立即对修改后的DOM元素进行操作。// 等待 DOM 更新完成后执行操作。
2024-07-29 14:35:04
357
原创 switch 语句 每个case 后应有 break 语句，执行完代码块跳出switch 语句
这将导致所谓的“fall through”，即当匹配到一个。上面代码执行结果 2 default，代码块，即使它们没有明确的匹配。时，代码会继续执行所有后续的。，执行完相应的代码块后就会跳出。语句，这样一旦匹配到一个。
2024-07-26 17:21:22
505
原创 类型“RouteRecordName”上不存在属性“includes”。 类型“symbol”上不存在属性“includes”
类型“RouteRecordName”上不存在属性“includes”。 类型“symbol”上不存在属性“includes”
2024-07-09 14:57:49
295
转载 元素隐式具有 “any“ 类型，因为类型为 “string“ 的表达式不能用于索引类型 “{}“。 在类型 “{}“ 上找不到具有类型为 “string“ 的参数的索引签名
将一个字符串作为索引访问一个类型为 "{}" 的对象时引发的。这是因为 "{}" 表示空对象类型，它没有定义任何属性，因此无法用字符串作为索引进行访问。tempForm: {} as {[key: string]: any} // 将对象的类型更改为具有字符串索引签名的类型。将对象的类型更改为具有字符串索引签名的类型。是字符串索引签名，表示可以使用字符串作为索引访问此类型的对象。id 是字符串，作为tempForm 对象的索引 引起的。
2024-07-09 14:33:13
537
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人