Vue如何獲取元素高度總是不準確的問題

更新時間：2023年10月21日 10:50:29 作者：神仙劉

這篇文章主要介紹了Vue如何獲取元素高度總是不準確的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue獲取元素高度總是不準確

今天老大沒安排活干，也不想劃水，于是打算用一個websocket寫一個簡易的聊天系統(tǒng)。

后端代碼很容易就寫好，但是前端是真的難搞，遇到一個很嚴重的問題：

當發(fā)送一條消息或者是收到一條消息，消息展示界面不能滑到最下面，展示最新消息，于是，經(jīng)過一段時間的修改，發(fā)送新消息時，滾動條雖然能下滑，但是滑不到最底部，于是我添加了一個按鈕，使用按鈕，將滾動條滑到最底部是可行的。

又使用debug調(diào)試，發(fā)現(xiàn)：vue會先執(zhí)行你的其它方法，再渲染頁面，導致總是只能滑到上一條消息展示的高度。

于是我再百度，發(fā)現(xiàn)：重置數(shù)據(jù)后，獲取dom元素高時，dom元素還未渲染完畢，（可能這就是為什么只能滑到上一條消息展示的地方）

解決辦法

this.$nextTick()函數(shù) ：在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)

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="發(fā)送"/>
            <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)
                       };
                           //連接關(guān)閉事件
                       websocket.onclose = function() {
                           console.log("Socket已關(guān)閉");
                       };
                       //發(fā)生了錯誤事件
                       websocket.onerror = function() {
                           alert("Socket發(fā)生了錯誤");
                       }

                       //窗口關(guān)閉時，關(guān)閉連接
                       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>