sog-tag-cloud
Setup
npm i sog-tag-cloud
import SogTagCloud from 'sog-tag-cloud';
Vue.use(SogTagCloud)
Usage
参数名 |
描述 |
tags |
标签数组 |
options |
配置项 |
Options |
默认值 |
描述 |
width |
600 |
标签云宽度:100 |
height |
600 |
标签云高度:100 |
radius |
200 |
标签云半径:200 |
opacity |
300 |
标签透明度:300 注:数值越小透明度越高 |
fontSize |
600 |
标签大小:600 注:数值越大字体越小[300-600] |
The instance
<template>
<div id="app">
<SogTagCloud :tags="tags" :options="options" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
tags: [
{ name: "民族舞" },
{ name: "书法" },
{ name: "象棋" },
{ name: "围棋" },
{ name: "太极" },
],
options: {
width: 600,
height: 600,
radius: 200, // 球体半径
opacity: 300, // 数值越小透明度越高
fontSize: 600, // 数值越大字体越小[300-600]
},
};
},
};
</script>
GitHub
See Code.