Question

您好我正在尝试创建一个Vue应用程序，该应用程序采用一种关键颜色并根据关键颜色创建调色板。 2种颜色更浅，2种颜色更深。我有一个输入字段，您输入十六进制代码，然后它将生成其他4种颜色。我使用库chroma.js生成更深/更亮的颜色，语法如下：

chroma('red').darken(.4)

这是输入字段

<input class="w-100 pv3 pl4 input-reset ba b--black-20" @keyup="getColor(colorValue)" v-model="colorValue" placeholder="0AD674" >

这是我的for循环

<li v-for="item in items">
  {{ item.colorProperty }}
  {{ item.intensity }}
  {{ colorValue }}
</li>

我的数据在Vue实例中。

data () {
    return {
      colorValue: '4e35e1',
      items: [
            {
              intensity: 3,
              colorProperty: 'darken'
            },
            {
              intensity: 1,
              colorProperty: 'darken'
            },
            {
              intensity: 0,
              colorProperty: ''
            },
            {
              intensity: 1,
              colorProperty: 'brighten'
            },
            {
              intensity: 3,
              colorProperty: 'brighten'
            }
          ],
    }
}

所有这些都会产生类似

的内容

3 darken 4e35e1
1 darken 4e35e1
0 4e35e1
1 brighten 4e35e1
3 brighten 4e35e1

哪个很酷但理想情况我会使用数据值来提供Chroma.js语法，如

transformColor: function(value, property, intensity) {
   return chroma(value).property(intensity)
}

但显然这不起作用。实现这一目标的最佳途径是什么？

我意识到这是一个开放式的问题。但我有麻烦弄清楚我是否应该使用过滤器或组件或计算功能。我尝试了大多数事情，但没有一个能奏效。我来自jQuery背景，所以这种以数据为中心的新方法被证明难以理解。我很感激任何指针！

使用map()

解决

 computed: {
    colors() {
      return this.items.map((item) => {
        var colorHex = chroma(this.colorValue)[item.colorProperty](item.intensity).toString();
        var colorName = _.kebabCase(namer(colorHex).ntc[0].name);
        return {colorHex, colorName}
      });
    }
  }

Answer 1

使用map()

解决

computed: {
    colors() {
      return this.items.map((item) => {
        var colorHex = chroma(this.colorValue)[item.colorProperty](item.intensity).toString();
        var colorName = _.kebabCase(namer(colorHex).ntc[0].name);
        return {colorHex, colorName}
      });
    }
  }

VueJS通过节点插件返回循环数据值

1 个答案: