escX / vue-colorful-background

make a colorful background with vue directive

vue-colorful-background

Make a colorful background with vue directive

Live demo and usage

Install

npm install vue-colorful-background

Usage

// es6 import
import VueColorfulBackground from 'vue-colorful-background'

// 或者通过<script>引入
<script src="path/to/vue-colorful-background.js"></script>

// main.js
Vue.use(VueColorfulBackground)

<div v-colorful="options"></div>

<script>
// ...
data () {
  return {
    options: {

    }
  }
}
</script>

Options

Name	Type	Default	Description
duration	String	2s	背景色过渡的耗时，其值与css属性transition-duration一致
timing	String	ease-in	背景色渐变速度曲线，其值与css属性transition-timing-function一致
colors	Array	[...]	背景色，默认提供250种颜色，颜色引用自http://nipponcolors.com/
delay	Number	2000	背景色切换间隔

Modifiers

v-colorful默认按照colors数组中的顺序切换背景色，使用.random修饰符可以使背景色随机切换

<div v-colorful.random></div>