代码之家 › 专栏 › 技术社区 › Johan

计算指令中的元素高度

vue.js javascript

Johan · 技术社区 · 6 年前

为什么 nextTick 在下面的例子中需要计算元素高度?据我所知, 下一步 用于在修改反应性数据后等待DOM更新,但以下情况除外:

Vue.directive('test', {
    bind: function(el) {
    console.log($(el).css('height'))
    Vue.nextTick(() => {
        console.log($(el).css('height'))
    })
  }
});

var demo = new Vue({
    el: '#demo'
})

<div id="demo">
  <div v-test>
    lorem
    lorem
  </div>
</div>

http://jsfiddle.net/LPfpS/463/

1 回复 | 直到 6 年前

Ankit Kumar Ojha 6 年前

你用错钩子了。

钩子函数 一个指令定义对象可以提供几个钩子功能(全部可选):

bind:当指令第一次绑定到元素。在这里你可以做一次性的安装工作。

inserted:当绑定元素插入到其父节点(这只保证父节点存在,而不是必须在文件中)。

Vue.directive('test', {
    inserted: function(el) {
    console.log($(el).css('height'))

  }
});

var demo = new Vue({
    el: '#demo'
})

见 Fiddle

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前