Vue random colors

A Vue.js random color directive

Version: 1.0.2 Updated: 01/28/2020

By: acidbeast License: MIT

Logo

vue-random-colors

Vue 2.x directive for apply random colors to CSS properties of element. By default directive use 216 web safe colors. More info at https://websafecolors.info Colors could be re-defined by user, see options section below.

Install

$ npm i --save vue-random-colors

And then

import Vue from 'vue'
import VueRandomColor from 'vue-random-color'

Vue.use(VueRandomColor)

Usage

Basic example

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

Options

  • property (string) - CSS property to apply color. { background | border | color }. By default: background.
  • event (string) - Event which evoke color change. By default: mouseover.
  • default (string) - Default color which apply in case of mouseout or mouseleave. By default: 'ffffff'
  • colors (array) - List of colors defined by user.
  • transition (number) - Speed of CSS property transition.

Example

  <div v-random-color="{
    colors: [ 'aaaaaa', 'cccccc', 'eeeeee' ],
    event: 'click',
    property: 'border',
    default: 'ff0000',
    transition: 0.5
  }">
  ...
  </div>

Demo

Come soon

License

MIT

Categories: Vue js