原博主鏈接

<!--* @Description:會動的詞云* @Author: Vergil* @Date: 2021-08-25 14:17:45* @LastEditTime: 2021-08-25 17:08:15* @LastEditors: Vergil --> <template><div class="wordCloud" ref="wordCloud"></div> </template> <script> export default {name: 'word-cloud',data () {return {hotWord: ['萬事如意', '事事如意 ', '萬事亨通', '一帆風順', '萬事大吉', '吉祥如意', '步步高升', '步步登高', '三羊開泰', '得心應手', '財源廣進', '陶未媲美','闔家安康', '龍馬精神', '錦繡前程', '吉祥如意', '生龍活虎', '神采奕奕', '五谷豐登', '馬到成功', '飛黃騰達', ' 步步高升', '福祿壽禧'],color: ['#a18cd1', '#fad0c4', '#ff8177','#fecfef', '#fda085', '#f5576c','#fe9a8b', '#30cfd0', '#38f9d7'],wordArr: [],timer: null,resetTime: 10,ContainerSize: ''}},mounted () {this.init()},methods: {init () {this.dealSpan()this.initWordPos()this.render()},dealSpan () {const wordArr = []this.hotWord.forEach((value) => {// 根據詞云數量生成span數量設置字體顏色和大小const spanDom = document.createElement('span')spanDom.style.position = 'relative'spanDom.style.display = 'inline-block'spanDom.style.color = this.randomColor()spanDom.style.fontSize = this.randomNumber(15, 30) + 'px'spanDom.innerHTML = valuespanDom.local = {position: {// 位置x: 0,y: 0},direction: {// 方向 正數往右 負數往左x: 1,y: 1},velocity: {// 每次位移初速度x: -0.5 + Math.random(),y: -0.5 + Math.random()}}this.$refs.wordCloud.appendChild(spanDom)wordArr.push(spanDom)})this.wordArr = wordArr},randomColor () {// 獲取隨機顏色var colorIndex = Math.floor(this.color.length * Math.random())return this.color[colorIndex]},randomNumber (lowerInteger, upperInteger) {// 獲得一個包含最小值和最大值之間的隨機數。const choices = upperInteger - lowerInteger + 1return Math.floor(Math.random() * choices + lowerInteger)},render () {if (this.resetTime < 100) {this.resetTime = this.resetTime + 1this.timer = requestAnimationFrame(this.render.bind(this))// setInterval(() => {// console.log(1)// this.render.bind(this)// }, 10)this.resetTime = 0}this.wordFly()},wordFly () {this.wordArr.forEach((value) => {// 設置運動方向 大于邊界或者小于邊界的時候換方向if (value.local.realPos.minx + value.local.position.x < this.ContainerSize.leftPos.x || value.local.realPos.maxx + value.local.position.x > this.ContainerSize.rightPos.x) {value.local.direction.x = -value.local.direction.x}if (value.local.realPos.miny + value.local.position.y < this.ContainerSize.leftPos.y || value.local.realPos.maxy + value.local.position.y > this.ContainerSize.rightPos.y) {value.local.direction.y = -value.local.direction.y}value.local.position.x += value.local.velocity.x * value.local.direction.xvalue.local.position.y += value.local.velocity.y * value.local.direction.y// 給每個詞云加動畫過渡value.style.transform = 'translateX(' + value.local.position.x + 'px) translateY(' + value.local.position.y + 'px)'})},initWordPos () {// 計算每個詞的真實位置和容器的位置this.wordArr.forEach((value) => {value.local.realPos = {minx: value.offsetLeft,maxx: value.offsetLeft + value.offsetWidth,miny: value.offsetTop,maxy: value.offsetTop + value.offsetHeight}})this.ContainerSize = this.getContainerSize()},getContainerSize () {// 判斷容器大小控制詞云位置const el = this.$refs.wordCloudreturn {leftPos: {// 容器左側的位置和頂部位置x: el.offsetLeft,y: el.offsetTop},rightPos: {// 容器右側的位置和底部位置x: el.offsetLeft + el.offsetWidth,y: el.offsetTop + el.offsetHeight}}}},destroyed () {// 組件銷毀，關閉定時執行cancelAnimationFrame(this.timer)} } </script> <style lang="less" scoped> .wordCloud {width: 100%;// height: 100%;height: 400px; } </style>

總結

以上是生活随笔為你收集整理的在vue项目中操作元素ref案例；的全部內容，希望文章能夠幫你解決所遇到的問題。

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