使用颜色，百分比和度数输入在vue中生成手动线性渐变

Question

我正在尝试根据颜色、度数和百分比创建手动线性渐变 input.User 可以根据需要添加任意多的颜色。我想要做的是用户将选择 degree.Then 用户将 select 颜色和 percentage.When 用户单击 addButton 它将与字符串连接，这样用户将连接颜色和百分比他们想要多少，最终价值将是这样的：

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

这是我的模板，其中有颜色选择器、百分比和度数 input.onclick 添加按钮它将在 最终渐变 输入框中生成值

<template>
      <VContainer class="mx-5 fluid align-self-start">
          <div class="d-flex">
            <label>
              Final gradient
            </label>
            <VTextField
              v-model="gradient"
              filled
              flat
              autofocus
              @blur="$v.gradient.$touch()"
            >
            </VTextField>
          </div>
          <div class="d-flex">
            <label>
              Percentage
            </label>
            <input
              style="border:1px solid black"
              v-model="percentage"
              type="number"
              @change="onPercentage()"
            >
          </div>
          <div class="d-flex">
            <label>
              Degree
            </label>
            <input
              style="border:1px solid black"
              v-model="degree"
              type="number"
            >
          </div>
  
          <input
            v-model="gradientColor"
            type="color"
            @change="onChange()"
          >
          <div class="container">
            <div class="button-group">
              <div>
                <VBtn
                  @click="addColor"
                  class="d-flex mx-auto mt-6"
                  width="137px"
                  height="40px"
                  color="primary"
                >
                  addColor
                </VBtn>
                <button
                  @click="addColor"
                />
              </div>
            </div>
          </div>
     </VContainer>
    
    </template>

这是我的数据值：

data() {
    return {
      degree: 0,
      coloring: ' ',
      gradientColor: ' ',
      primaryColor: ' ',
      percentage: 0,
  
    };
  },

在计算梯度中生成最终输出

computed: {
    gradient() {
      let colors = 'linear-gradient(';
      colors += `${(this.degree)}deg`;
      colors += this.gradientColor + this.percentage;
      colors += ')';
      return colors;
    },
    primary() {
      let colors = ' ';
      colors += this.primaryColor;
      return colors;
    },
}

这里是所有 method.onClick addColor 百分比和颜色值将被连接起来

methods: {
 onChange(val:string) {
      this.primaryColor = `${(val)}`;
    },
    onPercentage(val:string) {
      this.primaryColor = `${(val)}`;
    },
    addColor() {
      this.gradientColor.concat(this.primaryColor);
      this.primaryColor = '';
    },
}

我不想为 this.I 使用数组希望将值添加到单个变量中 string.But 不知何故我无法做到 it.How 我可以做到吗工作？

Answer 1

首先，您可以在此处使用 template literal，这会大大缩短您的代码。

computed: {
gradient() {
  let colors = 'linear-gradient(';
  colors += `${(this.degree)}deg`;
  colors += this.gradientColor + this.percentage;
  colors += ')';
  return colors;
},

我认为使用数组来存储选定的颜色和百分比值在这里效果很好，因为您可以使用 .join(', ' 将数组字符串化并添加逗号（仅在需要的地方） ).

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

至于不使用数组解决这个问题就比较麻烦了。您必须通过搜索其索引然后将其替换为空白来删除最后一个逗号。内置字符串方法 lastIndexOf(',') 在这里会派上用场。

这是使其与数组一起工作的代码。注释掉的是使它只使用字符串减去最后一个逗号删除的代码。我相信你可以自己弄清楚

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>

PS：我删除了@change 方法，因为您已经使用 v-model 将它们绑定到 degree 和 selectedColor。

使用颜色，百分比和度数输入在vue中生成手动线性渐变

generating manual linear gradient in vue with the color ,percentage and degree input

javascript

string

gradient

linear-gradients

vue.js