-
效果圖：
tutieshi_640x430_6s.gif air-bubble-cloud插件npm地址：https://www.npmjs.com/package/air-bubble-cloud
air-bubble-cloud氣泡詞云，通過原生js編輯，能夠自定義修改氣泡大小樣式，可以對dom進行編輯。插件上手簡單，修改容易。
*air-bubble-cloud的使用文檔
- 氣泡詞云，通過傳入數(shù)據(jù)，自動生成動態(tài)移動的氣泡詞云
Project setup(下載安裝插件)
npm i air-bubble-cloud --save
或者
yarn add air-bubble-cloud --save
main.js import(在main.js文件中全局引入組件和相關(guān)樣式)
//引入插件和css樣式
import AirBubbleCloud from 'air-bubble-cloud';
import "air-bubble-cloud/air-bubble-cloud.css";
//注冊使用插件
Vue.use(AirBubbleCloud);
use in component(在組建中使用氣泡詞云組件)
<AirBubbleCloud />
組件配置項介紹
- 屬性
| 屬性名 | 說明 | 數(shù)據(jù)類型 | 默認值 |
|---|---|---|---|
| baseSize | 最大的氣泡直徑 | number | 100 |
| baseFont | 最大的字體大小 | number | 20 |
| boxWidth | 外面盒子的寬度 | number | 300 |
| boxHeight | 外面盒子的高度 | number | 200 |
| data | 詞云參數(shù) | array | 表二介紹 |
- data數(shù)據(jù)參數(shù)
| 屬性名 | 說明 |
|---|---|
| name | 標題 |
| value | 數(shù)據(jù) |
| textStyle | 氣泡樣式 |
- textStyle氣泡樣式
| 屬性名 | 說明 |
|---|---|
| color | 文字顏色 |
| background | 氣泡背景顏色 |
| backgroundImage | 氣泡背景顏色（可設(shè)置漸變顏色） |
- 對外暴露的事件方法
| 方法名 | 說明 |
|---|---|
| click | 點擊事件，參數(shù) item,index |
