uni-app结合Vue（动态获取dom元素宽、高）

忘是亡心i 2023-01-01 03:59 354阅读 0赞

**html代码**

<template>
        <view class="home_page">
    		<view class="body" ref="body">
    			<u-button type="primary" @click="goMy">去我的页面</u-button>
    			<u-button type="success" @click="goLoginOut">退出登陆</u-button>
    		</view>
    		<view class="test" :style="styleVar"></view>
        </view>
    </template>

**js代码**

<script>
    export default {
        data() {
            return {
    			styleVar: {}
            }
        },
        methods: {
    		getStyle() {
    	　　    let info = uni.createSelectorQuery().select(".body")
    	　　　  	console.log('info', info)  // 获取元素
    	　　　  info.boundingClientRect((data) => { //data - 各种参数
    				console.log('data--------->', data)
    	　　　  		console.log('data.width', data.width) // 获取元素宽度
    	　　　  		console.log('data.height', data.height) // 获取元素宽度
    				this.styleVar = {
    					height: data.height + 'px'
    				}
    	　　    }).exec()
    		}
        },
    	mounted() {
    		this.$nextTick(function(){
    			// 如果不在mounted里面调用，必须得放到this.$nextTick()里面去执行，不然会报错
    			this.getStyle()
    		})
    	}
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app结合Vue（动态获取dom元素宽、高）

html代码 <template> <view class="home_page"> <view class="body" ref="bo

忘是亡心i/ 2023年01月01日 03:59/ 0 赞/ 355 阅读

相关 Flutter页面绘制完成获取元素宽高

final GlobalKey _containerKey = GlobalKey(); @override void ini

我就是我/ 2022年12月24日 03:53/ 0 赞/ 257 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 314 阅读

相关【VUE】获取iframe中的img元素，并设置宽高

iframe <iframe id="preview" @load="deliverToken" :src="imgrc" frameborder="0"></i

太过爱你忘了你带给我的痛/ 2022年09月04日 11:53/ 0 赞/ 513 阅读

相关 jQuery 获取元素尺寸（宽和高）

在前面几篇文章中，介绍的都是和DOM相关的jQuery方法，本篇文章依旧继续讲和DOM相关的方法。用jQuery获取一相元素的大小并不难，如下： $(window

╰+攻爆jí腚メ/ 2022年05月14日 13:23/ 0 赞/ 368 阅读

相关小程序获取元素宽高

小程序本身是不支持DOM和BOM操作的，但有时候还是需要获取一下宽高的，查了一下，发现真的可以获取到。感谢大佬3秒钟！小程序的API有个WXML，这次用到wx.create

柔情只为你懂/ 2022年05月12日 10:48/ 0 赞/ 363 阅读

相关获取元素宽高

获取元素宽高值 1.内联样式. element.style读取的只是元素内联样式,即写在元素的 style 属性上的样式,支持读写. var elebox = do

曾经终败给现在/ 2021年10月23日 14:56/ 0 赞/ 381 阅读

相关 Javascript原生获取dom元素宽、高

获取网页窗体方法网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHe

淩亂°似流年/ 2021年09月17日 07:54/ 0 赞/ 498 阅读

相关微信小程序——获取到px转化为rpx（根据设备宽高动态设置元素宽高）

在项目中需要给一个view标签动态的设置高度首先，先通过调用wx.getSystemInfo获取设备信息可以获取的信息如下图 ![watermark_type_Zm

超、凢脫俗/ 2021年09月17日 07:52/ 0 赞/ 1198 阅读

相关 jq 获取元素宽高的方法补充

1、$对象.width/height("npx/n%"); 等同于$.css('width','npx'); 既可设置，也可获取,无单位，内容区域 2、.c

本是古典何须时尚/ 2021年07月24日 16:47/ 0 赞/ 401 阅读