-
效果圖：
tutieshi_640x430_6s.gif air-bubble-cloud插件npm地址：https://www.npmjs.com/package/air-bubble-cloud
air-bubble-cloud氣泡詞云都许，通過(guò)原生js編輯姥芥，能夠自定義修改氣泡大小樣式戒劫，可以對(duì)dom進(jìn)行編輯凿菩。插件上手簡(jiǎn)單床绪，修改容易客情。
*air-bubble-cloud的使用文檔
- 氣泡詞云，通過(guò)傳入數(shù)據(jù)癞己，自動(dòng)生成動(dòng)態(tài)移動(dòng)的氣泡詞云
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";
//注冊(cè)使用插件
Vue.use(AirBubbleCloud);
use in component(在組建中使用氣泡詞云組件)
<AirBubbleCloud />
組件配置項(xiàng)介紹
- 屬性
| 屬性名 | 說(shuō)明 | 數(shù)據(jù)類型 | 默認(rèn)值 |
|---|---|---|---|
| baseSize | 最大的氣泡直徑 | number | 100 |
| baseFont | 最大的字體大小 | number | 20 |
| boxWidth | 外面盒子的寬度 | number | 300 |
| boxHeight | 外面盒子的高度 | number | 200 |
| data | 詞云參數(shù) | array | 表二介紹 |
- data數(shù)據(jù)參數(shù)
| 屬性名 | 說(shuō)明 |
|---|---|
| name | 標(biāo)題 |
| value | 數(shù)據(jù) |
| textStyle | 氣泡樣式 |
- textStyle氣泡樣式
| 屬性名 | 說(shuō)明 |
|---|---|
| color | 文字顏色 |
| background | 氣泡背景顏色 |
| backgroundImage | 氣泡背景顏色（可設(shè)置漸變顏色） |
- 對(duì)外暴露的事件方法
| 方法名 | 說(shuō)明 |
|---|---|
| click | 點(diǎn)擊事件膀斋，參數(shù) item,index |
