color-js--使用/实例

原文网址：color-js--使用/实例IT利刃出鞘的博客-CSDN博客

简介

说明

        支持RGB, HSV 和 HSL（他们也都支持alpha）。支持CSS字符串表达式的转换。

        这个项目作者已经不再维护了，最新的更新时间是：2018年10月26日。

        此库比较小众，从npm下载量来看，每周5000左右。而color.js​​​​​​​是12,000,000左右。

官网

npm仓库网址
github网址

实例

需求：输入颜色后，渐变展示。

安装依赖

npm i color-js

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/compA',
      name: 'compA',
      component: CompA
    }
  ]
})

components/CompA.vue

<template>
  <div class="compA">
    <input v-model="colorQuery" @keyup.enter="updateColor" placeholder="Enter a color">
    <button @click="updateColor">Update</button>
    <p>Preview:</p>
    <span :style="{ backgroundColor: tweenedCSSColor }" style="display: inline-block;width: 50px;height: 50px;"></span>
    <p>{{ tweenedCSSColor }}</p>
  </div>
</template>

<script>
import TWEEN from "@tweenjs/tween.js";
import Color from "color-js"

export default {
  data() {
    return {
      colorQuery: '',
      color: {
        red: 0,
        green: 0,
        blue: 0,
        alpha: 1
      },
      tweenedColor: {}
    }
  },

  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }
      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()
      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
}
</script>

<style scoped>
</style>

测试

访问：http://localhost:8080/#/compA

其他网址

状态过渡 - 状态动画与侦听器 - 《Vue.js v2.x 官方教程》 - 书栈网 · BookStack