位置: IT常识 - 正文

在Vue中获取DOM元素的实际宽高(在vue中获取dom元素)

编辑:rootadmin
在Vue中获取DOM元素的实际宽高

推荐整理分享在Vue中获取DOM元素的实际宽高(在vue中获取dom元素),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue获取dom元素的属性,vue中怎么获取dom,vue获取元素的方法,vue3.0 获取dom,vue获取元素的方法,在vue中获取dom元素,在vue中获取dom元素,在vue中获取dom元素,内容如对您有帮助,希望把文章链接给更多的朋友!

在Vue中获取DOM元素的实际宽高(在vue中获取dom元素)

最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下。

一、获取元素

在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中。

<template> <div class="box" ref="wrap"></div></template><script>export default { mounted() { // 获取 DOM 元素 this.$nextTick(()=>{ let $ele = this.$refs.wrap }) },}</script><style scoped> .box { width: 100%; height: 200px; background-color: pink; }</style>二、获取元素宽高使用 offsetWidth 、 offsetHeight 方法,返回 Number 类型的值,如:52。let $ele = this.$refs.wrap// 宽let width = $ele.offsetWidth// 高let height = $ele.offsetHeight使用 window 全局对象中的 getComputedStyle API,返回 String 类型的值,包含px单位,如: '100px'。let $ele = this.$refs.wrap// 宽let width = window.getComputedStyle($ele).width// 高let height = window.getComputedStyle($ele).height

欢迎访问:天问博客

本文链接地址:https://www.jiuchutong.com/zhishi/297422.html 转载请保留说明!

上一篇:前端将base64图片转换成file文件

下一篇:若依(RuoYi )权限管理设计(若依和pig)

  • 电脑设置ip地址怎么设置(电脑设置ip地址和dns怎么设置)

    电脑设置ip地址怎么设置(电脑设置ip地址和dns怎么设置)

  • 小红书通讯录好友在哪看(小红书通讯录好友推荐)

    小红书通讯录好友在哪看(小红书通讯录好友推荐)

  • 水印相机怎么显示时间地点(水印相机怎么显示位置和时间)

    水印相机怎么显示时间地点(水印相机怎么显示位置和时间)

  • 微信运动看不到对方了(微信运动看不到对方了怎么恢复?)

    微信运动看不到对方了(微信运动看不到对方了怎么恢复?)

  • iphone11夜间拍照怎么打开(iphone11夜间拍照模式为什么不清晰)

    iphone11夜间拍照怎么打开(iphone11夜间拍照模式为什么不清晰)

  • 打印机卷纸怎么解决(打印机卷纸怎么拿出来)

    打印机卷纸怎么解决(打印机卷纸怎么拿出来)

  • iphone11下面的横线没了(iphone11下面的横条不见了 锁屏打不开)

    iphone11下面的横线没了(iphone11下面的横条不见了 锁屏打不开)

  • 抖音显示已读是什么意思(抖音显示已读是苹果手机吗)

    抖音显示已读是什么意思(抖音显示已读是苹果手机吗)

  • ios微信把地区改任意文字(ios微信地区修改神器2020)

    ios微信把地区改任意文字(ios微信地区修改神器2020)

  • 华为p40是曲面屏还是直面屏(华为P40是曲面屏吗)

    华为p40是曲面屏还是直面屏(华为P40是曲面屏吗)

  • 打电话响了几声说正在通话中(打电话响了几声显示用户正忙是什么意思)

    打电话响了几声说正在通话中(打电话响了几声显示用户正忙是什么意思)

  • 电脑被远程控制的表现(电脑被远程控制了怎么解决)

    电脑被远程控制的表现(电脑被远程控制了怎么解决)

  • 小米手环支付宝付款可以离开手机使用吗(小米手环支付宝支付怎么用)

    小米手环支付宝付款可以离开手机使用吗(小米手环支付宝支付怎么用)

  • qq删除访问记录后对方还能看到吗(qq删除访问记录和隐身访问区别)

    qq删除访问记录后对方还能看到吗(qq删除访问记录和隐身访问区别)

  • qq音乐可以上传翻唱吗(qq音乐可以上传自己的音乐吗)

    qq音乐可以上传翻唱吗(qq音乐可以上传自己的音乐吗)

  • ps最大兼容是怎么回事(ps最大兼容怎么打开)

    ps最大兼容是怎么回事(ps最大兼容怎么打开)

  • 计算工具有哪些(计算工具有哪些四年级三种)

    计算工具有哪些(计算工具有哪些四年级三种)

  • 苹果power键是哪个键(苹果的power键)

    苹果power键是哪个键(苹果的power键)

  • 手机没话费能收到验证码吗(手机没话费能收到快递取件码吗)

    手机没话费能收到验证码吗(手机没话费能收到快递取件码吗)

  • 红米note8内存多大(红米note8存储规格)

    红米note8内存多大(红米note8存储规格)

  • airpods续航大概多久(airpods续航多久正常)

    airpods续航大概多久(airpods续航多久正常)

  • 手机卡怎么升级5g(手机卡怎么升级4g)

    手机卡怎么升级5g(手机卡怎么升级4g)

  • 用计算器怎么测试人的年龄(计算器怎么测手速)

    用计算器怎么测试人的年龄(计算器怎么测手速)

  • 荣耀10支持40w快充吗(荣耀支持40w快充的型号)

    荣耀10支持40w快充吗(荣耀支持40w快充的型号)

  • reno2和reno区别(oppo reno和reno2有什么区别)

    reno2和reno区别(oppo reno和reno2有什么区别)

  • idea算法的中文名是(idea语法)

    idea算法的中文名是(idea语法)

  • 微信里的文档怎样传到电脑(微信里的文档怎么保存到手机里)

    微信里的文档怎样传到电脑(微信里的文档怎么保存到手机里)

  • 个人所得缴税租房减免该怎么弄?
  • 错账更正方法有哪几种
  • 一般纳税人增值税优惠政策2023
  • 专票红冲要不要收回发票联
  • 国家电子产品投诉电话
  • 申报美元出口以欧元收汇
  • 出差补贴需要交税
  • 成本占收入比重分析
  • 企业所得税汇总纳税分配比例
  • 个人取得什么收入不交税
  • 增值税的简易计税是什么意思
  • 税收的构成要素包含哪些内容
  • 经营期间银行存在的问题
  • 总公司购固定资产分摊每家店面怎么来做账
  • 贷款和应收款项在活跃市场中没有报价
  • 企业发票税收编码是什么
  • 增值税发票是需要先对公转账吗
  • 纳税总额包括
  • 一般纳税人从小规模纳税人取得专用发票
  • 企业爱心捐赠可以抵相应的税吗
  • 企业股权设计咨询这个行业怎么样
  • 工业企业该怎样建账?
  • 科研项目经费怎么填
  • 农村的生产经营是什么
  • 成本无发票如何处理
  • 进口应税消费品所支付的金额不包括
  • 财务报表第一季度引用的期初数是第四季度还是年报
  • 非营利组织免税收入孳生的银行存款利息
  • 酒店试菜费用会计分录
  • 基本户往一般户转账用途怎么写
  • mac上如何切换apple id
  • won10搜索框
  • 爱荷华州的首府
  • 商贸企业销售
  • lsm.exe是什么程序
  • 编写二叉树
  • linux操作系统安装包
  • 直接计入所有者权益的交易或事项
  • 债权人将长期债务转为投资
  • 养老金领取怎么算他的领取金额
  • 供应商自身的品质问题
  • uniapp怎么开启路由拦截
  • 预付账款的会计编码是多少?
  • 偷税行为五年后被发现要接受行政处罚吗?
  • 浅谈php中类和对象的区别
  • 解决laravel 5.1报错:No supported encrypter found的办法
  • transformer中的参数
  • 一分钟玩转钉钉文档是什么东西
  • 员工预支款计入什么科目
  • wordpress删除修订版本
  • 收到增值税收入423300,款项已存入国库
  • 小企业如何计提折旧
  • 总公司签合同开票分公司做业务分公司如何确认收入?
  • 怎样增加资产负债率
  • 捆绑销售如何做会计处理合适?
  • 折旧后的剩余价值叫什么
  • 简易计税方法适用什么服务
  • 什么叫做差旅费
  • 建筑服务红字发票需要填写备注吗
  • 固定资产处置的会计科目
  • 服务性的行业有哪些
  • 收到的劳务发票怎么做账
  • 会计备注一般写什么
  • 修改mysql数据库字符集
  • windows安装orthofinder
  • 快速释放剪贴蒙版快捷键
  • 服务器时间和电脑时间
  • win7桌面怎么设置到d盘
  • 怎么操作win10系统
  • win8怎么打开系统设置
  • 新买的读卡器不读卡,提示放入驱动盘
  • win8怎么调出任务栏
  • vsftp命令
  • cocos creator截图
  • unity一运行就停止工作
  • node服务器部署
  • jQuery获取checkbox选中的值
  • 增值税纳税申报表附列资料(一)
  • 双方交换住房可以吗
  • 棚户区改造的回迁房能办房产证吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设