|
1 2 3 |
<span class="token comment">// 元素上加上ref</span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>['hover-tips','btn-1']<span class="token punctuation">"</span></span> <span class="token attr-name">:data-msg</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tooltipRef<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>span<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>slot<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>slot<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>span<span class="token punctuation">></span></span> |
在mounted写 因为我是html标签可以不用加el, 如果是element封装的一定要加el，这是问题的关键。
this.$refs.tooltipRef.offsetWidth
this.$refs.tooltipRef.$el.offsetWidth
tooltipRef.value.$el.offsetWidth
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
作者：梦想的旅途
链接：https://www.jianshu.com/p/1f323ecca7d3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
