VueWordCloud
Generates a cloud out of the words.
demo
setup
npm
npm i vuewordcloud
ES module
Register the component globally.
;; Vue;
or
Register the component in the scope of another component.
; components: VueWordCloudname: VueWordCloud ;
browser
The component is globally available as VueWordCloud
. If Vue is detected, the component will be registered automatically.
usage
Pass custom renderer for the words.
{{ text }}
properties
property | type | default | description |
---|---|---|---|
animation-duration |
Number |
1000 |
The duration of the animation. |
animation-easing |
String |
'ease' |
The easing of the animation. |
animation-overlap |
Number |
1 |
The overlap of the animation. Set the value to 1 to animate words all at once. Set the value to 0 to animate words one by one. The value 5 has the same effect as the value 1/5 . |
color |
[String, Function] |
'Black' |
The default color for each word. |
create-canvas |
Function |
* | Creates a new Canvas instance. |
create-worker |
Function |
* | Creates a new Worker instance. |
enter-animation |
[Object, String] |
* | The enter animation. |
font-family |
[String, Function] |
'serif' |
The default font family for each word. |
font-size-ratio |
Number |
0 |
The font size ratio between the words. For example, if the value is 5 , then the largest word will be 5 times larger than the smallest one. The value 5 has the same effect as the value 1/5 . |
font-style |
[String, Function] |
'normal' |
The default font style for each word. |
font-variant |
[String, Function] |
'normal' |
The default font variant for each word. |
font-weight |
[String, Function] |
'normal' |
The default font weight for each word. |
leave-animation |
[Object, String] |
* | The leave animation. |
load-font |
Function |
* | Loads the font. |
rotation-unit |
[String, Function] |
'turn' |
The default rotation unit for each word. Possible values are 'turn' , 'deg' and 'rad' . |
rotation |
[Number, Function] |
0 |
The default rotation for each word. |
spacing |
Number |
0 |
The spacing between the words. The value is relative to the font size. |
text |
[String, Function] |
'' |
The default text for each word. |
weight |
[Number, Function] |
1 |
The default weight for each word. |
words |
Array |
[] |
The words to place into the cloud. A value of the array could be either an object, an array or a string. If the value is an object, it will be resolved to {text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight, color} .If the value is an array, it will be resolved to [text, weight] .If the value is a string, it will be resolved to text . |
let enterAnimation = opacity: 0;let leaveAnimation = opacity: 0;
Make more complex animations.
let enterAnimation = opacity: 0 transform: 'scale3d(0.3,0.3,0.3)';
Use classes for CSS animations.
let enterAnimation = 'animated bounceIn';let leaveAnimation = 'animated hinge';
let { return document;};
let { return documentfonts;};
Provide custom loadFont
function to support older browsers.
; let { return family style weight;};
let { return URL;};
events
event | description |
---|---|
update:progress |
The current progress of the cloud words computation. |