vue 实现动态设置元素的高度

目录
  • 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iview table高度动态设置方法

    在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别的终端如1368*768的机器上都显示不全,下面就把我的和其他机器上效果图做个对比,如图所示: 一.我的机器 二.别人的机器 三.解决办法 原因就是因为表格高度是固定的,在大分辨率下的屏幕可以显示,小分辨率的屏幕就显示不完全,所以我们需要动态的去设置表格的高度,设置方法如下: 1.iview table的写法: <Table highlight-row bord

  • vue中设置height:100%无效的问题及解决方法

    在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效. App.vue文件 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • vue 实现动态设置元素的高度

    目录 vue动态设置元素的高度 获取元素高度总是不准确的问题 解决办法 vue动态设置元素的高度 1. 添加样式绑定 <div class="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 computed: {     // 滚动区高度      scrollerHeight: function() {       return (window.innerHeig

  • vue.js动态设置VueComponent高度遇到的问题及解决

    目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list">     <div ref="abc">{{data.id}}</div> &

  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp

  • vue+vue-meta-info动态设置meta标签教程

    vue+vue-meta-info动态设置meta标签教程

    目录 vue-meta-info官方介绍 vue-meta-info使用 在写移动端项目的时候,通常都会设置meta禁止用户缩放. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 最近的需求中,个别页面允许用户缩放,就需要给不同的页面设置不同的meta

  • vue中动态设置meta标签和title标签的方法

    vue中动态设置meta标签和title标签的方法

    因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t

  • vue中如何动态设置css样式的hover

    目录 vue动态设置css样式的hover vue使用hover.css动画 vue动态设置css样式的hover 1.定义不同的颜色数组 colorList: ['#4cb352', '#5bc2d3', '#ffc23f', 'pink', '#872822'],//课件标题颜色 2.html数据遍历-自定义element-走马灯高度+定义css变量-yf-border-color  <div             v-for="(item, index) in listData&q

  • VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html <!-- 监听ref距离顶部高度 --> <div ref="pronbit"> <div>今日热门</div> <div>今日热销</div> </div> .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, methods: { handleScrollx() { cons

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • Vue 动态设置路由参数的案例分析

    在vue中 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例: <template> <div> <button @click="goht">后退<button> <br/> <button @click="goqj">前进<button>

随机推荐