javascript - 使用颜色、百分比和度数输入在 vue 中手动创建径向网格

Question

我正在尝试根据颜色、度数和百分比输入创建手动渐变（线性、径向）生成器。用户可以添加任意数量的颜色。我想要做的是用户将选择度数。然后用户将选择颜色和百分比。当用户单击 addButton 时，它将与字符串连接，这样用户将根据需要连接颜色和百分比。渐变类型（线性，渐变）将从下拉列表中选择。到目前为止，我已经为线性渐变管理它。这是沙盒链接：

https://codesandbox.io/s/xenodochial-phoebe-h6gcv?file=/src/App.vue

我想为线性和径向渐变工作。就线性渐变而言，预期的输出是我迄今为止设法做到的。：

linear-gradient(0deg, #0359b5ff 0%, #f6ce01ff 50%, #f6ce01ff 100%) 

就径向梯度而言，预期输出可以是这样的：

radial-gradient(83.04% 112.24% at 51.12% 24.23%,#E0713A 0%, #BA5A3C 17%, #80373F 45%, #561E41 70%, #3C0E43 89%, #320843 100%)

或这个

radial-gradient(#E0713A 0%, #BA5A3C 17%, #80373F 45%, #561E41 70%, #3C0E43 89%, #320843 100%)

但我无法实现它。这是数据值：

 data() {
    return {
      degree: 0,
      gradientColor: "",
      selectedColor: "#000",
      percentage: 0,
      colors: [],
      // colors: "",
    };
  },

这是计算值：

computed: {
    gradient() {
      return `linear-gradient(${this.degree}deg, ${this.colors.join(", ")})`;
      // return `linear-gradient(${this.degree}deg, ${this.colors} )`;
    },
  },

这是方法：

  methods: {
    addColor() {
      this.colors.push(this.selectedColor + " " + this.percentage + "%");
      //  this.colors += `${this.selectedColor}  ${this.percentage}% ,`;
    },
  },

这是模板：

<template>
  <div class="mx-5 fluid align-self-start">
    <div class="d-flex">
      <label> Final gradient </label>
      <input
        style="width: 100%"
        v-model="gradient"
        @blur="$v.gradient.$touch()"
      />
    </div>
    <div class="d-flex">
      <label> Percentage </label>
      <input
        style="border: 1px solid black"
        v-model="percentage"
        type="number"
      />
    </div>
    <div class="d-flex">
      <label> Degree </label>
      <input style="border: 1px solid black" v-model="degree" type="number" />
    </div>

    <input v-model="selectedColor" type="color" />
    <div class="container">
      <div class="button-group">
        <div>
          <button
            @click="addColor"
            class="d-flex mx-auto mt-6"
            width="137px"
            height="40px"
            color="primary"
          >
            addColor
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

我想根据下拉梯度值为线性和径向梯度工作。但我无法生成径向梯度预期输出。我该怎么做？

标签： javascriptvue.jslinear-gradientsradial-gradients