Question

我正在考虑将几种颜色绑定到微调器组件上，此刻我遇到了一些麻烦，我的大脑有点模糊。

这是组件本身，绑定到计算值。

<fingerprint-spinner :animation-duration="1500" :size="95" :color="this.magicRoundabout" />

这是计算值

        magicRoundabout() {
            let colours = ['red', 'blue', 'green']
            return colours.forEach((item) => {
                setTimeout(() => {
                return item
            }, 1000)
            })

        },

我正在寻找使颜色循环变化以创建漂亮的多色效果的方法。

或者，如果有一种方法可以向“ color”属性添加渐变，那就太好了！我自己在测试时遇到了麻烦，并且没有从我的劳动中获得任何成果。

Answer 1

您无需使用this在视图中调用您的计算变量。

我将以其他方式引发该函数，以便它每隔特定时间生成一个随机数，并且该数字是您情况下数组的索引，生成介于0和1之间的数字，并且此返回值直接返回颜色。

Answer 2

您正在同时执行3个setTimeout，因为您的循环forEach将在微秒内循环通过该数组，因此您只会得到最后的颜色green。。这是实现该目标的一种方法（运行下面的代码段）：

Vue.component('coloredComp', {
  props: ['color'],
  template: "<div id='box' :style='{backgroundColor : color}'></div>"
})

new Vue({
  el: '#app',
  data() {
    return {
      color: 'red'
    }
  },
  mounted() {
      let colors = ['yellow', 'red', 'green', 'blue']
      let i = 0;
      var int = setInterval(() =>{
        this.color = colors[i];
        i++;
        i == colors.length ? i=0 : '';
      }, 1000)
  }
})

#box {
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <colored-comp :color="color"></colored-comp>
</div>

Answer 3

感谢Dadboz，使这项工作得以成功！

是否也可以在其中添加过渡？我通过在数组中添加类似于“ linear-gradient（红色，蓝色）”的东西来处理渐变，但是没有成功。

试图实现颜色之间的平滑过渡，而不是诱发癫痫发作。

在Vue中套用单车颜色

3 个答案: