位置: 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)

  • 详解利用微博推广和赚钱的10种方法(微博推广怎么推)

    详解利用微博推广和赚钱的10种方法(微博推广怎么推)

  • 网易云相册停运了吗(网易云相册登录入口)

    网易云相册停运了吗(网易云相册登录入口)

  • 如何格式化(如何格式化内存卡)

    如何格式化(如何格式化内存卡)

  • 苹果小白点打开了不显示(苹果小白点打开速度慢)

    苹果小白点打开了不显示(苹果小白点打开速度慢)

  • 微信为什么看不了动态(微信为什么看不到别人的评论和点赞了)

    微信为什么看不了动态(微信为什么看不到别人的评论和点赞了)

  • excel另存为没有dbf(excel另存为没有桌面选项)

    excel另存为没有dbf(excel另存为没有桌面选项)

  • 视频帧数越高越清晰吗(视频帧数越高越好还是越低越好)

    视频帧数越高越清晰吗(视频帧数越高越好还是越低越好)

  • 戴尔台式机重装系统按哪个键(神舟笔记本重装系统)

    戴尔台式机重装系统按哪个键(神舟笔记本重装系统)

  • 怎么清除电脑上所有的内容(怎么清除电脑上微信的数据)

    怎么清除电脑上所有的内容(怎么清除电脑上微信的数据)

  • 公众号白名单什么意思(公众号白名单什么时候可以转载)

    公众号白名单什么意思(公众号白名单什么时候可以转载)

  • 快剪辑卡住了怎么办(快剪辑突然卡住了)

    快剪辑卡住了怎么办(快剪辑突然卡住了)

  • 硬盘c5c6警告怎么修复(硬盘c5警告修复教程)

    硬盘c5c6警告怎么修复(硬盘c5警告修复教程)

  • 华为怎么看电池健康(华为怎么看电池损耗程度)

    华为怎么看电池健康(华为怎么看电池损耗程度)

  • 苹果没发票能保修吗(苹果没发票能保价吗)

    苹果没发票能保修吗(苹果没发票能保价吗)

  • 苹果机日历怎么设置节日(苹果手机日历怎么用更有效率)

    苹果机日历怎么设置节日(苹果手机日历怎么用更有效率)

  • vivoy93支不支持快充(vivoy93支不支持双电信)

    vivoy93支不支持快充(vivoy93支不支持双电信)

  • 华为p30有无线充电吗(华为p50e可以无线充电吗)

    华为p30有无线充电吗(华为p50e可以无线充电吗)

  • 神州战神bios无法识别u盘的原因分析及解决方法图文教程(神州战神笔记本怎么进入不了bios)

    神州战神bios无法识别u盘的原因分析及解决方法图文教程(神州战神笔记本怎么进入不了bios)

  • 此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情(已解决)(此 google 帐号尚未与设备关联)

    此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情(已解决)(此 google 帐号尚未与设备关联)

  • PPSAP.exe是什么进程?PPSAP.exe会是病毒吗?PPSAP.exe程序文件及常见问题介绍(pps是啥文件)

    PPSAP.exe是什么进程?PPSAP.exe会是病毒吗?PPSAP.exe程序文件及常见问题介绍(pps是啥文件)

  • BertTokenizer的使用方法(超详细)(bert multihead)

    BertTokenizer的使用方法(超详细)(bert multihead)

  • 契税的具体适用税率是多少
  • 跨年增值税专用发票没有认证,需要开红字信息表吗
  • 中央空调折旧年限是多久
  • 所得税筹划的意义
  • 企业合并股份比例
  • 免税进口的自用设备再销售时该怎么征税
  • 房地产企业土地使用税
  • 个人所得税补交税
  • 商贸公司可以用加工厂的商标委托加工生产吗
  • 递延所得税如何申报
  • 下个月的发票可以报销上个月的费用吗
  • 同一控制下企业合并会产生商誉吗
  • 土建税率是多少
  • 消费型增值税计算公式
  • 固定资产折旧在资产负债表属于什么
  • 记账凭证的科目不会填
  • 未缴少缴税款追征期
  • 电脑添加小工具
  • 开增值税发票折扣额怎么开出来的?
  • 怎样清理ie
  • 如何pingip地址
  • 约定分摊和平均分摊有什么区别
  • php 用户和密码
  • ue4安装插件
  • bigfile是什么意思
  • php中??
  • win10磁盘碎片整理打不开
  • 包装物押金收入是否计入销售额
  • 最小的洗衣机是多少
  • laravel create
  • 民营企业的工业项目建设-经营-转让是什么模式
  • vue前端代码实例
  • 表关联查询语句
  • php构造函数重载
  • 同业代付的好处
  • 产品补发原来的要退吗
  • 收到利息收入计入什么科目
  • pycharm操作界面
  • 进项发票无法取消怎么办
  • 上年度会计凭证怎么填写
  • 企业单方面调整员工的工作岗位
  • sqlserver 比较时间
  • 织梦如何使用
  • 兼职人员的个税怎么计算
  • 金税盘电子发票下载失败
  • 冲减去年管理费怎么做分录
  • 小规模纳税人专票开1%还是3%
  • 营业外支出什么科目借贷方向
  • 完税凭证是什么样子
  • 高新技术企业研发费用归集
  • 民间非盈利组织会计制度核算的基础
  • 年金终值计算公式是
  • 一年的系统服务费多少钱
  • 公司购轿车会计分录怎么做
  • 公司收到赔偿款要交增值税吗
  • 营业收入怎么确定
  • 成本发票怎么入账
  • 投资方持有的能够对被投资单位实施
  • 出口转内销进项税额怎么进附表二
  • 成本核算方法有哪几种
  • sqlserver执行计划走偏
  • windows自带软件有哪些
  • linux中,什么命令可以控制口令的存活时间?
  • win1020h2镜像
  • linux 744
  • js给表格添加一行
  • nodejs webp
  • jquery实现购物车功能(删除商品,增加和减少商品)
  • unity连接
  • vue music
  • ugui scrollview
  • JavaScript中的方法名不区分大小写
  • javascript基础笔记
  • android 图片视频轮播框架
  • js判断浏览器内核和版本
  • python内置数据结构有哪些
  • javascript教程
  • substrate框架原理
  • 税务解除非正常户罚款多少
  • 贵州省税务网上缴费平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设