首页 > 其他分享 >Vue的$nextTick完成后获取渲染后的dom数据

Vue的$nextTick完成后获取渲染后的dom数据

时间:2023-03-28 14:45:35浏览次数:44  
标签:nextTick el Vue return dom 获取

问题是这样滴:

  需要在div的内容更新后获取div的高度,如果在更新值后马上获取,则高度还是之前的,需要在$nextTick中获取,但是呢这个高度需要返回给上层函数用做比较,所以就想$nextTick返回后在处理,搜索后发现$nextTick是处理异步的一个回调函数,它返回的是一个promise对象。

解决方法如下!!!

async getHeight() {

try {
  let el = this.$refs.info
   if(el) {
      await this.$nextTick()
    return el.offsetHeight
  }
  return false
 } catch(e) {}
}

 

标签:nextTick,el,Vue,return,dom,获取
From: https://www.cnblogs.com/yy-blog/p/17265013.html

相关文章

  • 第四篇 html5 - 新特性【 Dom操作类 + 自定义标签属性 】
    html5新增Dom操作类1、classList当前元素的所有样式列表2、add()添加类3、remove()删除类4、toggle()有就移出,没有就添加5、contains()是否包含某个类,包......
  • vue全家桶进阶之路19:webpack资源打包工具
    Vue.js是一个前端开发框架,它可以帮助我们快速构建单页应用和复杂的交互界面。而Webpack则是一个前端资源打包工具,它可以将多个JavaScript、CSS、HTML、图片等资源打包......
  • webstorm运行Vue项目环境配置(如何从0配置运行一个写好的vue项目)
     1.在Node官网上下载zip安装包。网址:https://nodejs.org/dist/v16.14.0/(需要哪个版本就把/v后的版本号改成哪个版本)  2.下载完成后解压至需要的文件夹下。  3......
  • vue3 中 pinia 的 state 修改模版绑定的 state 数据没更新?
    解决方案:给state增加 computedimport{useLayerStore}from"@/stores/";constlayer=useLayerStore();constlayerList=computed(()=>layer.layerList);......
  • 超全、超简单Vue微信公众号授权登录指南
    <template> <divid="app"> <h1>微信授权登陆</h1> <div> <div> <span>手机号</span>&nbsp;&nbsp; <inputtype="number":value="account"placeholder="......
  • vue2实现路由懒加载
    以下内容仅供学习使用安装@babel/plugin-syntax-dynamic-import插件。1.1使用npm安装:npminstall--save-dev@babel/plugin-syntax-dynamic-import1.2使用yarn安装......
  • Vue中watch和computed的区别和应用场景
    watch中的函数是不需要调用的,computed内部的函数调用的时候不需要加()。Watch是属性监听,监听属性的变化;computed是计算属性,通过属性计算而得来的属性。watch需要在数据变化......
  • VUE实现购物车界面
    以下是一个用Vue.js实现购物车的简单示例:在Vue组件中定义购物车数据:data(){return{cart:[],total:0}}在商品列表或详情页中添加“加入购物......
  • 记录优化vue项目首屏加载慢的过程
    一背景当项目部署在外网时,前端首屏加载的平均时间是10S,通过开发者工具查看加载的包,例如chunk-libs.xxx.js的有2.9MB,因为包太大导致加载慢,严重影响了用户体验。所以解决......
  • DOM与SAX的区别
    DOM与SAX的区别 (2011-05-0818:48)DOM是复杂对象处理的首选,比如当XML比较复杂的时候,或者当你需要随机处理文档中数据的时候。SAX从文档的开始通过每一节点移动,以......