溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue怎么實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度

發(fā)布時(shí)間：2022-08-15 16:22:15 來(lái)源：億速云 閱讀：382 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“vue怎么實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue怎么實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度”吧!

vue動(dòng)態(tài)設(shè)置元素的高度

1. 添加樣式綁定

<div class="container" :>
</div>

2. 添加屬性計(jì)算

computed: {
    // 滾動(dòng)區(qū)高度 
    scrollerHeight: function() {
      return (window.innerHeight - 50) + 'px'; //自定義高度需求
    }
  }

獲取元素高度總是不準(zhǔn)確的問(wèn)題

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

后端代碼很容易就寫好，但是前端是真的難搞，遇到一個(gè)很嚴(yán)重的問(wèn)題：

當(dāng)發(fā)送一條消息或者是收到一條消息，消息展示界面不能滑到最下面，展示最新消息，于是，經(jīng)過(guò)一段時(shí)間的修改，發(fā)送新消息時(shí)，滾動(dòng)條雖然能下滑，但是滑不到最底部，于是我添加了一個(gè)按鈕，使用按鈕，將滾動(dòng)條滑到最底部是可行的。又使用debug調(diào)試，發(fā)現(xiàn)：vue會(huì)先執(zhí)行你的其它方法，再渲染頁(yè)面，導(dǎo)致總是只能滑到上一條消息展示的高度。

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

解決辦法

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

this.$nextTick(()=>{ 
     this.goBottom(); // 滾動(dòng)條滑到底部的方法
   })

補(bǔ)充：使用vue獲取一個(gè)指定的元素的高度，可以使用vue的ref

當(dāng)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");
                       //連接打開(kāi)事件
                       websocket.onopen = function() {
                           console.log("Socket 已打開(kāi)");
                           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ā)生了錯(cuò)誤事件
                       websocket.onerror = function() {
                           alert("Socket發(fā)生了錯(cuò)誤");
                       }
                       //窗口關(guān)閉時(shí)，關(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>

到此，相信大家對(duì)“vue怎么實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手