shayloyuki

Radium 行内样式在 React18 中不生效

摘要：问题 React17 升级到 18 之后，行内样式借助 Radium 包实现 hover 和媒体查询，无法生效。 npm i radium -S 下载 Radium 依赖包 App.js import Radium from 'radium' const styleObj = { width: 1 阅读全文

posted @ 2024-04-05 12:35 shayloyuki 阅读(48) 评论(0) 推荐(0)

webpack 搭建 react

摘要：前言除了用 react 官方脚手架搭建 react 项目，也可用 webpack 搭建。记录 npm i webpack webpack-cli -D 报错解决：右键以管理员身份打开 vscode，再打开文件夹。 git add ./ 显示 The file will have its ori 阅读全文

posted @ 2024-04-05 12:13 shayloyuki 阅读(37) 评论(0) 推荐(0)

给表单项添加必填星号

摘要：问题表单校验是否必填，会给表单使用 rules 属性，传入校验规则，如下所示： <el-form :model="form" :rules="rules" > </el-form> 如果是必填的，则在校验规则中添加 required: true，如下所示。 data() { return { ru 阅读全文

posted @ 2024-02-29 17:03 shayloyuki 阅读(669) 评论(0) 推荐(0)

刷新后记忆上一次的查询参数、页面位置

摘要：需求目前页面缓存机制是 keep-alive，即点击之前页签，页面不刷新。这会导致：数据不是最新的，即在页签 A 操作数据后，点击之前打开的页签 B，页签 B 的数据仍然是旧的。需求：再次点击页签 B 时，根据之前的查询参数（包括页码）、树节点、屏幕高度（下文统称为“查询数据”）刷新页面，即实现阅读全文

posted @ 2024-02-18 14:58 shayloyuki 阅读(325) 评论(0) 推荐(0)

bug记录：输入框延迟、卡顿

摘要：问题场景离开本页签时（即点击其他页签时），存储查询数据。导致 bug：首次打开页签，或者点击浏览器按钮刷新时后，页面上的输入框输入后，会出现无法输入、延迟显示、输入卡顿。代码如下： /* initDataMixin.js */ beforeRouteLeave(to, from, next) { 阅读全文

posted @ 2024-02-18 10:33 shayloyuki 阅读(50) 评论(0) 推荐(0)

post请求传参：params, data, raw

摘要：问题场景收到一个 post 请求的接口，既有 query 查询参数，又有 body 请求体，请求体还是 raw 格式的，如下图所示：解决阅读全文

posted @ 2024-02-06 11:18 shayloyuki 阅读(354) 评论(0) 推荐(0)

数据量大导致接口请求超时

摘要：问题场景某个接口因数据量过大导致请求超时，报错 Network Error。解决办法 webpack 默认2分钟后请求超时，更改 vue.config.js 配置如下： // 修改 webpack 默认2分钟的超时 proxyTimeout: 10 * 60 * 1000, onProxyReq 阅读全文

posted @ 2024-02-05 11:07 shayloyuki 阅读(536) 评论(0) 推荐(0)

el-color-picker 样式修改：去掉确定按钮，失去焦点生效

摘要：分析 el-color-picker 样式如下：操作：隐藏确定按钮；点击组件外区域时，实现确定功能。解决隐藏确定按钮添加自定义类名 popper-class="my-color-picker"，然后添加如下全局样式： <style lang="scss"> // 隐藏确定按钮 .my-c 阅读全文

posted @ 2024-01-31 13:53 shayloyuki 阅读(2227) 评论(1) 推荐(0)

正则校验：不能输入中文

摘要：需求表单项校验要求：满足某条件时，必填；不能输入中文。代码 data() { var validateRelateTable = (rule, value, callback) => { if (this.form.type !== 0 && !value) { callback(new E 阅读全文

posted @ 2024-01-31 13:28 shayloyuki 阅读(1123) 评论(0) 推荐(0)

若依页面刷新 $tabs.refreshPage()

摘要：前言若依封装了 $tab 对象，其中有个刷新页签的方法。看了下 refreshPage() 的源码，发现是用 router.replace() 替换当前位置的。但是当前路由地址前加了 /redirect前缀，不知这个有什么作用。查看相关源码，发现：如果不加该前缀，控制台会报错如下：定义了阅读全文

posted @ 2024-01-18 14:30 shayloyuki 阅读(3814) 评论(0) 推荐(0)