精华内容
下载资源
问答
  • 2021-12-07 16:46:18

     getTitleHeight() {

                this.$nextTick(function () {

                    this.contentHeight = document.getElementsByClassName("topColumn")[0].clientHeight;

                    console.log(this.contentHeight);        //元素高度

                })

            },

    更多相关内容
  • VUE3 获取元素高度

    千次阅读 2022-02-23 00:33:08
    import { ref, reactive, onMounted, watch } from 'vue' setup() { let clientHeight = ref('') //浏览器可视区域高度 const headerRef = ref(null) const tagsRef = ref(null) let slbHeight = r
    <v-header ref="headerRef" />
    <v-tags ref="tagsRef"></v-tags>
    
    import { ref, reactive, onMounted, watch } from 'vue'
    
    setup() {
    let clientHeight = ref('') //浏览器可视区域高度
    const headerRef = ref(null)
    
    const tagsRef = ref(null)
    let slbHeight = ref('')
    
    onMounted(() => {
    
    clientHeight.value = `${document.documentElement.clientHeight}` //获取浏览器可视区域高度
    
    let headerHeight = headerRef.value.$el.clientHeight
    
    let tagsHeight = tagsRef.value.$el.clientHeight
    
    slbHeight.value = clientHeight.value - headerHeight - tagsHeight
    
    window.onresize = function () {
    
    clientHeight.value = `${document.documentElement.clientHeight}` //获取浏览器可视区域高度
    
    let headerHeight = headerRef.value.$el.clientHeight
    
    let tagsHeight = tagsRef.value.$el.clientHeight
    
    slbHeight.value = clientHeight.value - headerHeight - tagsHeight
    
    }
    
    })
    
    
    
    return {
    
    clientHeight,
    
    slbHeight,
    
    headerRef,
    
    tagsRef,
    
    }
    
    展开全文
  • vue3 获取元素高度不准的方法

    千次阅读 2021-05-27 19:23:51
    html: :style="{height: `${ztreeHeight}px`}"> 555 ref="rightBox"> `共 ${total} 条`, }" @change="handleTableChange" > {{ status... 主要是动态数据请求回来之后获取元素高度, 谁有更好的想法代码贴给我奥!
    html:
    
    
    <transition name="slide-width">
        <a-col class="fixed-small" v-show="isShow" :style="{height: `${ztreeHeight}px`}">
             <div style="height: 500px; ">
                 555
             </div>
        </a-col>
    </transition>
    <a-col class="auto-small-full" :class="{ 'auto-small': isShow }" ref="rightBox">
        <a-table
            :size="state.tableSize"
            :loading="state.loading"
            :columns="dynamicColumns"
            :data-source="state.dataSource"
            :scroll="{ x: 1800 }"
            :pagination="{
            current: state.current,
            pageSize: state.pageSize,
            total: state.total,
            size: 'middle',
            showTotal: total => `共 ${total} 条`,
        }"
            @change="handleTableChange"
        >
            <template #statusOther="{ text }">
                <a-tag :color="statusMap[text].status">
                    {{ statusMap[text].text }}
                </a-tag>
            </template>
            <template #action="{ text, record }">
                <a :title="text" @click="detailFuns(record)">查看详情</a>
            </template>
        </a-table>
    </a-col>
    
    
    
    const rightBox = ref();
    let ztreeHeight = ref<number>(0);
    
    onMounted(() => {
        watch(
            () => state.dataSource,
            () => {
                nextTick(()=>{
                   $(document).ready(()=>{
                       ztreeHeight.value = rightBox.value.$el.scrollHeight;
                   })
                })
    
            },
        );
    });
    
    主要是动态数据请求回来之后获取元素的高度, 谁有更好的想法代码贴给我奥!
    
    
    展开全文
  • 主要介绍了VUE实时监听元素距离顶部高度的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0]....补充知识:vue 获取 指定元素的高度宽度等(使用vue中的 ref 获取到的是 dom 元素高度或者宽度) 使用 vue 的时候,想要
  • 今天老大没安排活干,也不想划水,于是打算用一个websocket写一个简易的...又使用debug调试,发现:vue会先执行你的其它方法,再渲染页面,导致总是只能滑到上一条消息展示的高度。 于是我再百度,发现:重置数据后,获

    今天老大没安排活干,也不想划水,于是打算用一个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>
    
    
    展开全文
  • Vue获取元素高度

    2022-01-09 15:21:34
    // 当前区域 <div ref="element">...// 获取元素样式值 (存在单位) let height = window.getComputedStyle(this.$refs.element).height; // 100px //获取元素内联样式值(非内联样式无法获取) let height...
  • vue获取某个元素高度

    千次阅读 2021-04-07 16:53:32
    vue获取某个元素高度 <template> <div class="wrap"> <!-- 定义ref属性 --> <div class="header" ref="header"> <!-- 内容 --> </div> <!-- 根据需求设置 --> ...
  • vue获取元素高度的方法

    千次阅读 2020-08-03 15:33:06
    vue获取元素高度 <div ref="getHeight" class="block"/> .block { width: 100px; height: 100px; background: blueviolet; border: 2px solid pink; padding: 10px; margin: 5px; } 获取高度值...
  • vue 获取动态元素高度

    千次阅读 2020-12-19 18:26:11
    2017.10.25凌晨坑死了~因为要在页面中搞一个区域用来scroll列表,所以必须要获取scroll-wrap的高度,于是想...在vue2.0里,如何获取dom元素的样式(样式是动态变化的)nextTick试过,querySelector试过但就是this.$re...
  • VUE获取元素高度的方法

    千次阅读 2021-04-02 17:13:38
    VUE获取元素高度的方法
  • vue获取dom元素高度的方法

    千次阅读 2020-01-02 11:50:40
    本文转载自:...获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerH...
  • vue 获取元素高度

    2021-05-12 13:56:25
    <...//获取元素样式值,element 为元素ref="element" var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px //获取元素内联样式值 var heightStyle =this.$refs.elem.
  • 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,...
  • vue中动态获取元素高度
  • vue获取元素高度,设置元素高度

    千次阅读 2020-11-04 15:08:01
    获取滚动记录 this.scrollTop = this.$refs["scroll"].pageYOffset || this.$refs["scroll"].scrollTop || this.$refs["scroll"].scrollTop; 设置滚动距离 // this.$nextTick(re => {
  • 获取屏幕高度 ...// 获取元素高度 let imgHeight = this.$refs['bread_crumb'].offsetHeight 元素滚动scrollTop window.addEventListener("scroll",this.handleScroll, true); handleScroll(e) {
  • Vue.js 获取元素高度的方法【记录】

    千次阅读 2020-06-15 13:40:49
    Vue.js获取下面div的height: <div ref="element"></div> 1、获取高度值:(内容高+padding+边框) let height= this.$refs.element.offsetHeight;...3获取元素内联样式值:(非内联样式无法获取)
  • vue 获取dom高度

    2022-05-24 01:36:12
    vue
  • 使用 vue 的时候,想要获得一个指定的元素高度时,可以使用 vue 中的ref 。 当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></...
  • vue获取元素高度

    2021-04-30 17:02:54
    this.$refs.elementHeight.offsetHight这样返回undefined this.$refs['element'].offsetHeight 这样...如果元素要渲染的话放在this.$nextTick获取 this.$nextTick(()=>{ this.$refs['element'].offsetHeight })
  • VUE获取元素高度

    万次阅读 2019-03-01 16:36:13
    Vue获取元素高度. // 当前区域 &lt;div ref="elememt"&gt;&lt;/div&gt; // 获取高度值 (内容高+padding+边框) let height= this.$refs.elememt.offsetHeight; ...
  • vue3获取组件元素节点宽度

    千次阅读 2022-03-10 11:10:39
    我的需求是让组件的高度随着他的宽度变化,该组件的宽度是由父元素决定的,所以他的高度我就在当前组件中决定。 然后在Dom中设置动态style

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,611
精华内容 4,244
关键字:

vue3获取元素高度