开发速查

主题

前端开发实战技巧 ​

整理自项目经验，覆盖效率、美观、布局、全局 API、图表、uniApp、ElementUI、表单验证等。

一、效率 ​

  1. 复杂大量表单/审核状态：工具类建 mock 数据（审批中/通过/不通过）永久保持。
  2. 引入个人原子化样式表 base.js。
  3. 输入（文本/多行/数字）、下拉、区划、上传（图片/视频/PDF）均 copy 标准代码。
  4. 自动拉取（身份证算生日/年龄）走默认方法，尤其「年龄」「月龄」。
  5. 常用正则：整数 ^-?\d+$，正整数不含 0 ^[1-9]\d*$。
  6. VS Code 正则替换：\d+-\d+-\d+ 匹配 1-1-1 格式。

二、美观 ​

  1. 上送条件一行默认 label-width=150，第一个覆写 100；多行套 row，label-width 默认 100，用 span 撑开。
  2. 多个日期之间加间隙；box 注意底部 padding；超长特殊项调到右/底部。
  3. 详情不混用禁用与编辑（涉及文本域加样式处理换行）；顶部返回；可点击项加手形；列表尽量不换行。

三、布局样式 ​

  1. 左侧固定右侧换行：外层 flex，左侧定宽，右侧 flex:1（或左侧 flex-shrink:0）。
  2. Chrome 120+ / Safari 17.2+ / Firefox 117+ 已原生支持 CSS 嵌套（无需 sass/less 预处理器）。
  3. 下载附件图片/pdf 默认直接预览：用 fileUrl 发 get 转二进制（见托育附件预览组件）。
  4. 遮挡后样式不生效：pointer-events: none 让被遮挡内部元素有效。
  5. 全屏/非全屏 100% 铺满：监听 resize 取 innerHeight，:class 动态加载（人口检测数据地图）。
  6. 背景简写：background: #f5f5f5 url('bg.png') no-repeat；no-repeat 需覆写（默认 repeat）；默认 size auto；position 默认 0% 0%。
  7. <pre> 原样显示多空格；textarea 换行存 \n\n；富文本存标签模板。
  8. <br/> 用法：html5 自闭合，</br> 语法不对但能生效，xhtml 严格用 <br/>。

四、原生 / 全局 ​

  1. ''.split(',') 会生成 ['']，需先判空（可选链 ?. 拦不住 null/undefined 以外的空串）。
  2. 可选链 ?.：null/undefined 短路。
  3. 空值合并 ??：左侧 null/undefined 返右侧，比 || 友好（0/''/NaN/false 不误判）。
  4. 逻辑空赋值 ??=：仅空值赋值。
  5. number 处理：input number 需处理 --*、+-*、-+*、.5、位数限制。
  6. type=number 时 @mousewheel.native.prevent 屏蔽滚轮。
  7. iOS 兼容：时间 yyyy-MM-dd HH:mm:ss 用 - 连 iOS 可能报错，replace 成 / 或直用 /。
  8. form.validate() 的 catch 与 axios 的 catch 互不干扰。
  9. 提交中断允许继续（多证孩次查重）：方法拆两段，用 confirm 处理继续/关闭。
  10. 缓存清不掉：window.location.reload()。
  11. label-position="top" 让 label 与值不在一行（elm/uniUI 支持，vant2 不支持）。
  12. 深拷贝 structuredClone（浏览器自带）。

五、Echarts / 地图 / 定位 / 富文本 ​

  • echarts-map 驾驶舱：value 用 areaCode 锁死，visualMap.pieces 建 value-color 映射；拥挤标签单独 rich padding；tooltip 用模板，label 只用 rich。
  • echarts 默认值：tooltip.confine:true（饼图超出）、series.minAngle:5、avoidLabelOverlap:false。
  • 高德容器可百分比（高度必须 vh）；各实例干扰时文件内单独引地图配置隔离。
  • uniApp 地图：安卓/iOS 高德，web/H5/小程序腾讯（内置 key）；打点优先 marker-iconPath；H5 必须它；气泡 label/callout 不支持单独 padding；cover-view 包裹，真机 bug 用 inline-block + line-height:1。
  • uniApp 定位：web 需配 AK（腾讯 ak 微信内/普通浏览器均无法定位；高德 ak 普通浏览器可，微信内不可）。
  • 富文本：quill 不支持 v-model，vue-quill-editor 是封装版；项目用自封装 quill 支持 v-model+图片上传。quill 默认不支持 table/合并单元格/video/数学公式/拖拽/协作。word 粘贴进 quill 保存即可；emoji 原样显示；小程序用 <rich-text :nodes>。

六、uniApp / 小程序 ​

  1. 基础组件无边框（如 textarea），微信风格 label 整体下有 border。
  2. textarea auto-height 设 padding 有 bug（初始半截），用 uni-easyinput；显示数字用手写 absolotely。
  3. 渐变用背景图或渐变色；底部滚动用背景图会穿透。
  4. 推荐 rpx 而非 upx（动态 style 不支持 upx，原生控件 upx 可能不生效）。
  5. 自定义头部标题 fixed + 绝对定位，top 用 navBarHeight 当 rpx。
  6. 闪动（null/undefined）：除三元/或，用 v-if 也好，注意数值 0/金额。
  7. 单时间区间搜索 @change 拿到的不是最新 v-model，需手动赋值或 setTimeout。
  8. echarts 组件用 qiun-data-charts，建议直接引入完整组件（不在 app/H5 用整理版）。

七、Element-UI ​

  1. el-form inline 列表建议 true 不用 el-col；新增/编建议 false 用 el-col（11-22）避免右侧太近；数组项/证件/区间用 inline+el-row。
  2. this.$alert（确定）/this.$confirm（确定+取消）/this.$prompt（含输入）；确定进 then，取消/X 进 catch；confirm 可自定义 textarea 弹框限长度。
  3. el-upload auto-upload=false 延时 this.$refs.upload.submit()；多文件循环拼 FormData 一次传（托育在园宝贝上传）。
  4. el-date-picker type='date' 且 value-format 带时分秒时不传会报错（date 不带时分秒，datetime 带）。
  5. el-select multiple 上一步/下一步有残留，需 :key=uuid 强刷 DOM。
  6. 上一步下一步用 v-if（v-show 导致验证不过），中间 v-else-if。

八、表单验证 ​

  1. trigger：输入类（输入/日期）blur；下拉/区划 change；自动拉取（生日/年龄/性别）change；不确定都 change。
  2. 必填加行内（身份证/手机/座机/信用代码有 rules 特殊处理）；开始截至/小于当前处理；长期用 isLongTerm=2099-12-31。
  3. 多选项写在一个 form；不推荐核酸/应急那种多 form 的 promise.all。
  4. 多选项关联验证：validator 自定义参数（startDate/idx 通过 rule 取）。
  5. 时间禁用 picker-options 注意临界点（今天）；要大于当前且带时分秒只能处理成大于今天 0 点。
  6. 一个按钮多操作（托育首次登录）：所有验证拦截完再调接口；this.$refs['form'].validate 内 return 不返外层，需 Promise 包裹或定义 flag 下一行 return。

九、争议澄清 ​

  1. AI 会话/报告（巴盟档案）：先掉接口组提问词→前端 push 会话 list（含用户图+基础话术）→点击生成提问→流式（responseType:'arraybuffer', response_mode:'streaming', enableChunked:true）→底部固定关闭按钮；注意 json 解析换行分割。
  2. 屏幕适配：px-rem + 最小根字体 12（反算临界点 1440，小于出滚动条）；baseSize * Math.min(scale, 2) > 12。document.documentElement.clientWidth/body.clientWidth/window.innerWidth 宽度同（body 无 margin），高度细微差；screen 不受浏览器缩放影响受屏幕缩放影响。scale 会导致小屏被缩，设最小跟字体 1 实测不生效（浏览器最小 12）。
  3. 图像裁剪：object-fit fill/cover/contain/none/scale-down；加到 el-image 不起效（渲染是 div，需给内层）。uniApp image object-fit 不生效（默认 scaleToFill），可用 widthFix 不设高度。背景 background-size cover/contain 类似。
  4. favicon.ico 动态加载：public/index.html 无法传参，需在 app.js 获取节点覆写图片路径。
  5. iconFont：每次生成/下载是瞬态快照；改 FontClass/Symbol 影响 font-class/svg 引入，改 Unicode 影响 unicode 引入；删除/改名需代码+数据检查。
  6. CryptoJS（浏览器/Node）vs Crypto（Node 内置）。

十、其他补充 ​

  • opacity: 85% 错误（webpack 把 sass 的 % 搞成 1%），官网推荐 0.85 小数。
  • .at()：arr.at(-1) 等价 arr[arr.length-1]。
  • width: auto 覆盖公共样式设置很神奇。
  • 小程序按钮防重：仅 if(this.btnDisabled) return 不可靠（返回成功到页面返回间可点）；弹框延时重置，页面仅失败/非 200 重置，200 不处理（缓存页 onShow 重置）；pc 弹框同；二次 confirm 无需管。
  • switch bug（一点就过不等职返回）：用 disabled + 原生处理。
  • map 返回新数组不改原结构；但引用类型 item 改属性会影响原数组元素（不推荐不写 return）。
  • 模拟 401：小程序先连生产登录→切回测试即可。
  • 成都托育隐藏状态：onShow 状态不可靠，第一个鉴权接口（查宝贝）才是事实登录；成功后重置 onShow 状态；401 时 request 处理但 500/fail 非 200 需把登录标记改未登录（勿用接口返回更新 onShow）。
  • build:cd 加 --report 分析包体积。
  • 小程序体积优化：用运行模式不上传发行模式；最有效压缩图片。

© 2026 开发速查