b553c4e519
- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api（与服务名一致） - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率） - DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配） - 用户管理: 新增创建时间/修改时间列，状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标，颜色统一 - PC 二维码: canvas 渲染，含编号文字，支持右键下载 - H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch） - H5: 详情页加返回导航条 - H5: 扫码支持摄像头（jsQR）+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障） - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件，补充缺失规范章节
3.0 KiB
3.0 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Select Element iOS Bug - Always Include Disabled Placeholder Option | HIGH | On iOS, users cannot select the first option if v-model initial value doesn't match any option | capability |
|
Select Element iOS Bug - Always Include Disabled Placeholder Option
Impact: HIGH - When a <select> element's v-model initial value doesn't match any option, iOS renders it as "unselected" and users CANNOT select the first item. iOS doesn't fire a change event when selecting an already-visually-selected option, leaving users stuck.
This is a platform-specific bug that only manifests on iOS Safari. Desktop browsers and Android handle this gracefully, making it easy to miss during development. The fix is simple: always include a disabled placeholder option.
Task Checklist
- Always add a disabled placeholder option with empty value to select elements
- Ensure v-model initial value is empty string to match the placeholder
- Test select inputs on iOS devices or simulators
- Consider this for any user-facing forms, especially on mobile-first apps
Problem - iOS users cannot select first option:
<script setup>
import { ref } from 'vue'
// Initial value is empty string, doesn't match any option
const selected = ref('')
</script>
<template>
<!-- PROBLEM: On iOS, "Apple" appears selected but user cannot actually select it -->
<!-- Tapping "Apple" does nothing because iOS doesn't fire change event -->
<select v-model="selected">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
<!-- selected remains '' even though "Apple" appears highlighted -->
</template>
Solution - Add disabled placeholder option:
<script setup>
import { ref } from 'vue'
const selected = ref('') // Matches the placeholder option
</script>
<template>
<!-- CORRECT: Disabled placeholder ensures user must actively select -->
<select v-model="selected">
<option disabled value="">Please select a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</template>
<!-- Variant with required attribute for form validation -->
<select v-model="selected" required>
<option disabled value="">-- Select an option --</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
<!-- If you MUST have a pre-selected default, set the initial value to match -->
<script setup>
import { ref } from 'vue'
// Set initial value to match an actual option
const country = ref('us') // Pre-selects "United States"
</script>
<template>
<select v-model="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
</template>