1.安裝?vue-wordcloud在項目里面，通過npm安裝下載

npm install vue-wordcloud --save

2.組件傳參

props:['val','myColors','width', 'height'],

<template><div class="hello"><div id="app"><wordcloud:data="val"ref="word"nameKey="name"valueKey="value":fontSize='[10, 20]':color="myColors":showTooltip="true":wordClick="wordClickHandler"></wordcloud></div></div></template> <script> import wordcloud from 'vue-wordcloud' export default {name: 'wordCloud',props:['val','myColors','width', 'height'],components: {wordcloud},mounted() {console.log(this.$refs.word)},methods: {wordClickHandler(name, value, vm) {console.log('wordClickHandler', name, value, vm);}},data() {return {}} } </script> <style lang="less" >body{overflow: hidden;}#app{position: relative;}.hello{position: relative;}.wordCloud{height: 200px !important;} </style>

?

總結

以上是生活随笔為你收集整理的词云-vue-wordcloud组件封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。