vue计算动态元素宽度
2023-09-11 14:15:07 时间
问题描述
需求要一个列表,列表中所有元素不能换行,每一个元素包括一个table。
分析问题
可以使用一个ul然后让li浮动,这样的结果是当li过长会换行,为了不让li换行可以动态计算所有长度之和作为ul的长度
问题解决
<div class="father">
<ul class="clearfix" ref="ulRef" :style="{ width: ulWidth }">
<template v-for="un in uList">
<un-li :key="un.id"></un-li>
</template>
</ul>
</div>
initWidth() {
this.$nextTick(() => {
let len = this.$refs.ulRef.children.length
let allWidth = len
while(--len > -1) {
let liWidth = this.$refs.ulRef.children[len].offsetWidth
allWidth += liWidth
}
this.ulWidth = allWidth + 'px'
})
}
备注
vue获取元素高度/宽度的方法
// target element
<div ref="dRef"></div>
- 获取高度值 (内容高 + padding + 边框)
let height= this.$refs.dRef.offsetHeight // 100
let width= this.$refs.dRef.offsetWidth// 100
- 获取元素样式值 (存在单位)
let height = window.getComputedStyle(this.$refs.dRef).height; // 100px
let width= window.getComputedStyle(this.$refs.dRef).width; // 100px
- 获取元素内联样式值(非内联样式无法获取)
let height = this.$refs.dRef.style.height; // 100px
let width= this.$refs.dRef.style.width; // 100px
相关文章
- Vue的computed(计算属性)使用实例之TodoList
- 一套Vue的单页模板:N3-admin
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- [Vue] Get up and running with vue-router
- vue.js3:在css中使用变量(vue@3.2.6)
- vue-router 的原理
- Vue Error-报错信息:Syntax Error: Assigning to rvalue.
- vue父组件通过$refs调用子组件方法时报undefined的问题
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 你知道,什么时候用Vue计算属性吗?
- vue 选中添加样式变色
- 前端框架Vue------>第一天学习(3)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 204:vue+openlayers 学习Attribution各种API,示例展示自定义版权信息
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例
- Vue中计算属性computed与method的区别
- Vue自定义指令实现图片懒加载
- 基于Java+SpringBoot+Vue前后端分离商城系统设计与实现
- Vue.js 计算属性
- vue实现点击改变颜色
- Vue:第一个vue-cli项目