vue 實現動態設置元素的高度
vue動態設置元素的高度
1. 添加樣式綁定
<div class="container" :style="{height: scrollerHeight}"> </div>
2. 添加屬性計算
computed: { // 滾動區高度 scrollerHeight: function() { return (window.innerHeight - 50) + 'px'; //自定義高度需求 } }
獲取元素高度總是不準確的問題
今天老大沒安排活幹,也不想劃水,於是打算用一個websocket寫一個簡易的聊天系統。
後端代碼很容易就寫好,但是前端是真的難搞,遇到一個很嚴重的問題:
當發送一條消息或者是收到一條消息,消息展示界面不能滑到最下面,展示最新消息,於是,經過一段時間的修改,發送新消息時,滾動條雖然能下滑,但是滑不到最底部,於是我添加瞭一個按鈕,使用按鈕,將滾動條滑到最底部是可行的。又使用debug調試,發現:vue會先執行你的其它方法,再渲染頁面,導致總是隻能滑到上一條消息展示的高度。
於是我再百度,發現:重置數據後,獲取dom元素高時,dom元素還未渲染完畢,(可能這就是為什麼隻能滑到上一條消息展示的地方)
解決辦法
this.$nextTick()
函數 :在下次DOM更新循環結束之後執行延遲回調
this.$nextTick(()=>{ this.goBottom(); // 滾動條滑到底部的方法 })
補充:使用vue獲取一個指定的元素的高度,可以使用vue的ref
當ref加在普通的元素上,使用this.ref.name獲取到的是dom元素
下面是聊天的html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微聊</title> <script src="../static/js/vue.js"></script> <style> .cheet-box{ width: 592px; height: 160px; } .box{ /*margin: 0 auto;*/ /*overflow:auto;*/ overflow-y: auto; overflow-x: hidden; font-family: "微軟雅黑 Light"; width: 600px; height: 300px; background-color: #ecece9; border: none; box-shadow: aliceblue; margin-bottom: 20px; padding: 50px; } .to,.me{ word-wrap:break-word; display: block; width: 50%; padding: 26px; border-radius: 10px; background-color: #fff; margin: 5px 0 10px 0; } .system-log{ padding: 5px 0; color: darkgrey; text-align: center; } .to{ float: left; } .me{ float: right; } </style> </head> <body onbeforeunload="checkLeave()"> <div id="app"> <div class="box" id="box" ref="getHeight"> <div v-for="item in messageArray"> <!-- <div class="system-log">連接成功...</div>--> <div class="to" v-if="item.username != message.username" v-text="item.text"> </div> <div class="me" v-else v-text="item.text"> aaaaaa </div> </div> </div> <div> <input type="text" v-model="message.username"> </div> <div> <textarea type="text" v-model="message.text" class="cheet-box"></textarea> <input @click="sendMessage()" type="button" value="發送"/> <input @click="goBottom()" type="button" value="底部"/> </div> </div> <script> function checkLeave(){ sessionStorage.setItem('key','hello'); localStorage.setItem('2','3') } var websocket ; var vm = new Vue({ el:'#app', created(){ this.initWebSocket(); }, data:{ message:{ username:'', text:'', }, messageArray:[ ], }, methods:{ initWebSocket(){ if (typeof (WebSocket)=="undefined"){ alert('瀏覽器不支持WebSocket') }else { console.log('瀏覽器支持websocket') websocket = new WebSocket("ws://localhost:8080/ws/asset"); //連接打開事件 websocket.onopen = function() { console.log("Socket 已打開"); var obj = { text:'', username: '', log:'連接成功!' } websocket.send(JSON.stringify(obj)); }; //收到消息事件 websocket.onmessage = function(msg) { vm.pushArray(msg.data) }; //連接關閉事件 websocket.onclose = function() { console.log("Socket已關閉"); }; //發生瞭錯誤事件 websocket.onerror = function() { alert("Socket發生瞭錯誤"); } //窗口關閉時,關閉連接 window.unload=function() { websocket.close(); }; } }, sendMessage(){ websocket.send(JSON.stringify(this.message)); this.message.text = '' }, pushArray(msg){ let message = JSON.parse(msg); console.log(message) if (message.username!='' && message.text!=''){ this.messageArray.push(message) this.$nextTick(()=>{ this.goBottom(); }) } }, goBottom(){ let box = document.getElementById('box'); box.getBoundingClientRect().height box.scrollTo(0,box.scrollHeight-box.clientHeight) } } }) </script> </body> </html>
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- nodejs結合Socket.IO實現websocket即時通訊
- Node.js用Socket.IO做聊天軟件的實現示例
- vue實現簡易選項卡功能
- JSONP跨域模擬百度搜索
- Vue實現簡單的發表評論功能