# @blackywkl/vuewordcloud

> word cloud make by vue

Latest version **1.1.4** (published 2019-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blackywkl/vuewordcloud
pnpm add @blackywkl/vuewordcloud
yarn add @blackywkl/vuewordcloud
bun add @blackywkl/vuewordcloud
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2019-12-02 |
| First published | 2017-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 39.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | blackywkl |
| Maintainers | blackywkl |
| Keywords | wordcloud, vue |

## Links

- npm: https://www.npmjs.com/package/@blackywkl/vuewordcloud
- Repository: https://github.com/freedomlang/VueWordCloud
- Homepage: https://github.com/freedomlang/VueWordCloud#readme
- Issues: https://github.com/freedomlang/VueWordCloud/issues
- npm.io page: https://npm.io/package/@blackywkl/vuewordcloud

## Recent versions

- 1.1.4 (latest) — 2019-12-02
- 1.1.3 — 2019-11-29
- 1.1.2 — 2019-11-28
- 1.1.1 — 2019-11-28
- 1.1.0 — 2019-11-28
- 1.0.3 — 2019-01-01
- 1.0.2 — 2018-09-12
- 1.0.1 — 2017-10-14
- 1.0.0 — 2017-10-07

## README

# wordcloud for Vue

A wordcloud component for Vue.



### Install

```javascript
npm install @blackywkl/vuewordcloud
```



### Example
[![Edit @blackywkl/vuewordcloud](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3xz78r9r66)

```
<template>
	<div id="app">
      <wordcloud v-bind:texts="texts"></wordcloud>
  </div>
</template>

<script>
import Wordcloud from '@blackywkl/vuewordcloud';

export default {
  	name: 'app',
  	components: {
    	Wordcloud
  	},
  	data() {
    	return {
      		defaultWords: [{
          		text: 'Cat',
          		size: 26
        	}, {
          		text: 'fish',
          		size: 19
        	}, {
          		text: 'things',
          		size: 18
        	}, {
          		text: 'look',
          		size: 16
        	}, {
          		text: 'two',
          		size: 15
        	}, {
        	    text: 'fun',
        	    size: 9
        	}, {
        	    text: 'know',
        	    size: 9
        	}, {
        	    text: 'good',
        	    size: 9
        	}, {
        	    text: 'play',
        	    size: 6
        	}]
    	}
  	}
}
</script>
```

### Props

| name      | meaning                               | type    | default value |
| --------- | ------------------------------------- | ------- | ------------- |
| texts     | array contain each text               | Array   | []            |
| width     | width(px) for entire component            | Number  | 400           |
| height    | height(px) for entire component           | Number  | 400           |
| mouseStop | stop the word when the mouse is hover | Boolean | false         |

#### properties for each item in texts

| name       | meaning                  | type   | default value    |
| ---------- | ------------------------ | ------ | ---------------- |
| text       | word to show             | String | test             |
| size       | font size for the word   | Number | random           |
| fontFamily | font family for the word | String | Microsoft YaHei  |
| color      | color for the word       | String | rgb(200,200,200) |


### Todos

- [ ] Add github page
- [x] Add online demo(codesandbox)
- [ ] Add test
- [x] Add callback for click
- [ ] Add attribute to avoid collision
- [ ] Add attribute to controll speed

## License

MIT.

---
_Source: https://npm.io/package/@blackywkl/vuewordcloud · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._