VueWordCloud标签云初实现

文章目录

VueWordCloud学习总结

本次小组官网的项目中自己要负责标签模块,想要实现一个标签云的效果,搜索了很多,发现vue有一个VueWordCloud库,之前看的github仓库一直是老版本的不支持Vue3,今天搜到了新版本更新至支持Vue3的版本,仓库链接附上:VueWordCloud

安装

bash 复制代码
npm i vuewordcloud

初使用

在组件中注册该组件

typescript 复制代码
import VueWordCloud from 'vuewordcloud';

简单使用

words:标签云展示的标签

color:不同的weight对应不同的颜色,根据weight来决定颜色

font-family:字体(官方文档中给了很多字体,详情可参考上方仓库链接)

html 复制代码
<vue-word-cloud
  style="height: 480px;width: 640px;"
  :words="[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]"
  :color="([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'"
  font-family="Roboto"
/>

项目中实现

由于每个标签对应的都有一个详情页,所以标签云不仅要展示标签,还需要进行路由跳转,用到了另一个渲染方式(单词传递自定义渲染)

为了展示时颜色更加好看,weight范围可以取小一点,多种颜色

html 复制代码
<vue-word-cloud :words="words"
   :color="([, weight]) => weight > 50 ? '#552af4' : weight > 47 ? '#412045' : weight > 45 ? '#5bc496' : weight > 42 ? '#f3cf77' : weight > 40 ? '#416af6' : weight > 38 ? '#eb7eb1' : weight > 35 ? '#ee8231' : weight > 32 ? '#552af4' : weight > 30 ? '#ae8af0' : weight > 25 ? '#579ce4' : '#ec5c6c'"
   font-family="微软雅黑,Microsoft YaHei" spacing="0.2">
   <template v-slot="{ text }">
       <div style="cursor: pointer;">
           <router-link active-class="active" :to="`/community/discussion/label/${text}`">
             {{ text }}</router-link>
       </div>
   </template>
</vue-word-cloud>

由于后端传来的words数组只有标签名,所以写了一个方法使每个标签都随机生成一个对应的数值,因为数值越小标签展示到页面上也就越小,为了防止标签过于小用户视觉体验不好,所以设置数值不会取太小的值

typescript 复制代码
function assignRandomNumbers(strArray: string[]): [string, number][] {
    return strArray.map(str => [str, Math.floor(Math.random() * (30 + 1)) + 20]); 
}

最终实现效果

官方仓库中还有很多的属性,可以设置更好看更高级的标签云,详情可看官方仓库

相关推荐
一只小风华~1 小时前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
FuckPatience2 小时前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
北城以北88883 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互
我总是词不达意3 小时前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui
北城以北88883 小时前
Vue-- Axios 交互(一)
前端·javascript·vue.js
前端开发爱好者4 小时前
Vite➕ 收费了!
前端·javascript·vue.js
羊羊小栈4 小时前
基于「多模态大模型 + BGE向量检索增强RAG」的新能源汽车故障诊断智能问答系统(vue+flask+AI算法)
vue.js·人工智能·算法·flask·汽车·毕业设计·大作业
麦麦大数据6 小时前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
临江仙4556 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问6 小时前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端