Vue中无需数组实现带颜色、百分比、角度输入的手动线性渐变生成

DevOps 小满

2026-9-26

核心问题排查

原有代码的主要错误点如下：

String.concat() 方法仅返回新拼接的字符串，不会修改原字符串，未赋值导致拼接操作不生效
onChange、onPercentage 方法互相覆盖 primaryColor 值，无法同时保存色值和对应百分比
渐变字符串拼接缺少逗号、空格、% 单位等语法必填字符
计算属性直接绑定 v-model 未配置 setter，无法正常响应更新

修改方案

1. data 部分调整

新增专门存储颜色段的字符串变量，删掉冗余变量：

data() {
  return {
    degree: 0,
    // 存储所有拼接完成的颜色段
    colorStr: '',
    // 绑定当前选中的色值
    gradientColor: '',
    // 绑定当前输入的百分比
    percentage: 0,
  };
},

2. methods 部分调整

移除冗余的onChange、onPercentage方法，修改addColor逻辑：

methods: {
  addColor() {
    // 已有颜色的话先加逗号分隔
    const splitStr = this.colorStr ? ', ' : ''
    // 拼接当前色值和百分比
    const currentItem = `${this.gradientColor} ${this.percentage}%`
    // 赋值更新拼接后的字符串
    this.colorStr += splitStr + currentItem
    // 清空输入项方便下一次添加
    this.gradientColor = ''
    this.percentage = 0
  }
}

3. computed 部分调整

给gradient计算属性增加setter适配v-model，补全渐变语法格式：

computed: {
  gradient: {
    get() {
      if (!this.colorStr) return ''
      return `linear-gradient(${this.degree}deg, ${this.colorStr})`
    },
    set(val) {
      // 如需支持手动修改渐变输入框，可在此处编写解析逻辑，无需该功能可留空
    }
  }
}

4. 模板部分调整

移除颜色选择器、百分比输入框的冗余@change事件：

<!-- 百分比输入框 -->
<input
  style="border:1px solid black"
  v-model="percentage"
  type="number"
>
<!-- 颜色选择器 -->
<input
  v-model="gradientColor"
  type="color"
>