uni-app 中 input[type="color"] 在微信小程序和H5有效，App端不渲染需降级；推荐 canvas 色盘或 uni.showActionSheet 预设色值，并统一处理颜色格式与事件监听。
uni-app 里用 input[type="color"] 最快但有兼容性陷阱
真机上能用，但只在微信小程序（iOS/Android）和 H5 有效；App 端（iOS/Android）完全不渲染，直接 fallback 成文本框。不是 bug，是 uni-app 编译器对原生 color input 的支持限制。
实操建议：
- 先加
type="color"并设默认值：<input type="color" v-model="color" /> - H5 和微信小程序可直接用；App 端必须降级处理，比如监听
focus事件后手动弹出自定义色盘 - 别依赖
change事件——微信小程序中它不触发，改用input或blur
手写一个轻量色盘组件，用 canvas + touchmove 实现取色
核心思路：画 HSV 色环（或 RGB 网格），把触摸坐标映射为色值。比引入第三方库更可控，体积小，适配所有平台。
关键点：
- 用
uni.createCanvasContext绘制渐变色盘，避免 DOM 操作导致跨端异常 - 在
touchmove中调用canvas.getContext('2d').getImageData()取像素色值（注意：App 端需开启canvas的useSingleCanvas配置） - 别用
event.detail.x/y—— 小程序里它返回的是屏幕坐标，得用event.touches[0].clientX/clientY再减去 canvas 偏移 - 颜色格式统一转成
#RRGGBB，避免 H5 返回rgb(255,0,0)、小程序返回rgba(255,0,0,1)导致逻辑断裂
uni.showActionSheet 配合预设色值列表最稳妥
如果业务只要常用色（比如品牌色、主题色），这是最稳的方案：无兼容问题、交互明确、代码少。
示例写法：
uni.showActionSheet({
itemList: ['红色', '蓝色', '绿色', '#FF6B35', '#4ECDC4', '#44B38A'],
success: (res) => {
const preset = ['#FF0000', '#0000FF', '#008000', '#FF6B35', '#4ECDC4', '#44B38A']
this.color = preset[res.tapIndex]
}
})
注意：
-
itemList不能直接放十六进制字符串（如"#FF6B35"），某些低版本微信会截断或报错，建议用中文名 + 映射数组 - App 端的
showActionSheet不支持图标，别指望加 color preview 小方块 - 想高亮当前选中色？得自己封装
uni.showModal+ 自定义 view，不能依赖系统弹窗
监听颜色变化时，v-model 不可靠，优先用 @input + watch
uni-app 的 v-model 在 color input 上行为不一致：H5 触发及时，小程序可能延迟一帧，App 端甚至不更新绑定值。
正确做法：
- 去掉
v-model，改用:value+@input显式控制 - 对颜色值做防抖校验：
if (/^#[0-9A-Fa-f]{6}$/.test(val)) this.color = val - 需要响应式联动（比如改颜色立刻刷新背景）？用
watch监听color，别信@change的时机 - 用户粘贴颜色值（如
#fff）时，自动补全为#FFFFFF——小程序输入框不触发input事件，得靠@blur补漏
