Vue获取分发内容的宽度
2017-11-15 21:43
183 查看
Vue在需要获取分发内容的宽度(内容不换行的情况下)
子组件有默认的内容(即在父组件没有分发内容时也会有内容)例:
<span id="detial"> <slot>这里是子组件默认内容</slot> </span>
<father> <son>父组件分发到子组件的内容</son> </father>直接在子组件mounted函数中获取时获取不到detial正确的值:
document.getElementById("detial").offsetWidth此时的offsetWidth为父组件分发内容到子组件之前子组件渲染的内容的宽
若获取父组件分发内容到子组件渲染后的宽度值
this.$nextTick(function(){
document.getElementById("detial").offsetWidth;})
即在渲染完成之后再获取分发槽内容宽度,,此时是正确的宽度
相关文章推荐
- 常用js框架之vue.js(深入四:组件2,slot内容分发,编译作用域,动态切换组件)
- vue使用watch 观察路由变化,重新获取内容
- 三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
- 在vue中获取dom元素内容的方法
- Vuejs组件之slot内容分发实例详解
- vue内容分发与非vuex式组件通信
- vue slot内容分发
- 获取手机屏幕、屏幕内容的高度和宽度
- 获取字符串内容的宽度,label.text的宽度,以及textField.text的宽度问题
- Vuejs组件——slot内容分发
- Vue.js-----轻量高效的MVVM框架(使用slot分发内容)
- vue之slot内容分发
- vue 插槽分发内容
- vue——使用插槽分发内容
- Vue.js-----轻量高效的MVVM框架(使用slot分发内容)
- vue使用watch 观察路由变化,重新获取内容
- Android:轻松获取WebView的内容宽度
- Vue------第五天(关于组件的一些基础了解,包括组件的注册、Prop、自定义事件、使用插槽分发内容等)
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
- Vuejs组件——slot内容分发