按钮变色应通过data中的iscopied布尔值控制class切换，复制成功后设true并1.5秒后重置，失败时设'error'触发错误样式，避免直接操作style或原生dom，确保状态可追踪、可还原且跨平台兼容。
点击复制后按钮变色的常见错误现象
直接在 @click 里改 button 的 class 或 style，但颜色一闪就恢复——这是因为 Vue 的响应式更新没触发重绘，或你用了原生 <button></button> 而没绑定状态；更常见的是，复制成功后没清掉临时高亮状态，导致后续点击失效。
用 data 状态 + v-bind:class 控制按钮颜色
最稳的方式是靠一个布尔值控制样式，而不是手动操作 DOM 或硬写内联样式。关键不是“变色”，而是“状态可追踪、可还原”。
- 在
data中定义isCopied: false - 点击时调用
navigator.clipboard.writeText()，成功后设this.isCopied = true - 用
setTimeout在 1.5 秒后重置为false（不能用 0.15s，太短，用户来不及感知） - 模板中用
:class="{ 'copied': isCopied }"绑定类名，CSS 里写.copied { background-color: #4CAF50; }
注意：微信小程序基础库低于 2.27.0 不支持 navigator.clipboard，得降级用 uni.setClipboardData，它回调无失败细节，建议加 catch 后统一设 isCopied = false。
避免用 :style 写内联颜色的坑
有人喜欢直接 :style="{ backgroundColor: isCopied ? '#4CAF50' : '#007AFF' }"，这看似简单，但容易出问题：
- 如果按钮本身有 class 定义了
background-color，内联样式会覆盖，但 H5 下可能因 CSS 优先级混乱导致闪烁 - App 端（尤其是 nvue）对动态
:style渲染不敏感，改了也不刷新背景 - 无法配合 transition 实现平滑变色，
transition: background-color .2s在某些平台无效
推荐统一走 class 切换，把颜色和过渡都写死在 CSS 里，更可控。
复制失败时的颜色反馈不能省略
只处理“成功变色”是半截功能。用户长按复制、系统拒绝授权、剪贴板被其他应用占用，都会导致失败——这时按钮应短暂显示红色或灰色，并提示文字。
- 用
try/catch包住复制逻辑，失败时设isCopied = 'error'，再用 class 区分状态 - CSS 中写
.copied-error { background-color: #f44336; }，比纯靠颜色变化更可靠 - 别依赖
uni.showToast代替视觉反馈——它消失太快，用户可能根本没看到
真正难的不是让按钮变色，而是让每次复制都有确定的状态出口：成功、失败、进行中。颜色只是这个状态的表层映射，别把它当成独立逻辑去维护。
