如何动态设置vue组件的宽度和高度?

最新推荐文章于 2024-05-30 14:06:31 发布
最新推荐文章于 2024-05-30 14:06:31 发布
阅读量6.3k 收藏 2
点赞数
分类专栏： vue css 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bydfguifd/article/details/128607532
版权
vue 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏
  1. 在组件最外层加上div
  2. 给div加上属性:style=“{ height: toggleHeight ? toggleHeight : ‘2000px’, width: toggleWidth ? toggleWidth : ‘1188px’ }”
  3. 使用js修改toggleHeight 和 toggleWidth 的值 实现动态修改宽高

例 在父组件中动态修改子组件的宽度
auditInformation子组件中
在这里插入图片描述
index父组件中


 1. 使用this.$refs.mainTable.$el.offsetWidth 获取mainTable组件的宽度
 2. 使用this.$refs.auditInformation.toggleWidth = width + 'px' 修改auditInformation组件的宽度 使auditInformation组件和mainTable组件宽度相同
 3. 显示auditInformation组件

在这里插入图片描述

bygsn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态设置div的高度 动态设置元素高度
冰冰酱
03-23 1864
【代码】vue 动态设置div的高度 动态设置元素高度。
#vue#获取浏览器视窗，动态修改div高度（附源码）
ZHENGCHUNJUN的博客
07-23 1828
#vue#根据视窗，动态修改div高度（附源码）
【Vue】Table组件动态最大高度
最新发布
qq_40205510的博客
05-30 495
分别表示页面顶部、底部和页脚的高度，以及可能存在的其他元素高度。在实际项目中，这些值可能需要根据实际情况进行调整。在使用Vue框架开发项目时，经常会遇到需要调整组件尺寸以适应不同屏幕大小或窗口尺寸的需求。获取当前窗口的内部高度，然后减去表格上方、下方和页脚的高度，得到表格的最大高度。事件监听器，以便在窗口大小发生变化时重新计算表格的最大高度。组件，其最大高度会根据窗口大小的变化而动态调整。组件动态设置最大高度，以实现响应式布局。变量，并在组件挂载时添加一个。首先，我们需要在模板中为。
vue设置组件高度100%
weixin_44563906的博客
06-26 1万+
#方法1（成功） 设置单位为100vh。 #方法2：我试了一下，没成功(可能要在App.vue设置)。 给div设置高度100%时，div的高度会等同于其父元素的高度。而上面代码中id为app的div（即为vue挂载的div）的父节点是是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body...
动态设置宽度vue
xumengxia的博客
04-18 2144
import { reactive, toRefs, computed, watch, onMounted } from 'vue'; import { useStore } from 'vuex'; interface DataType { screenWidth: string; changeWidth: () => void; timer: boolean; changeResultSheBei: () => void; sheBeiResult: any; } c.
vue使用‘:style‘控制动态width样式!
TangMonk的博客
08-11 961
【代码】vue使用‘:style‘控制动态width样式!
Vue 自定义组件用法指南
motongxue的博客
05-19 525
abbrlink: 2831271034 categories: MyTech 前端 VUE tags: Vue 前端 自定义组件 1.树组件的用法 1.1.示例 <v-tree url="/item/category/list" :isEdit="true" @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete" .
vue项目动态获取窗口以及元素宽高
文龙刚的博客
11-18 7510
vue项目动态获取窗口以及元素宽高
vue中实现拖动调整左右两侧div的宽度
weixin_48398799的博客
05-08 1万+
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 一、HTML代码 <templete> <div class="box" ref="box"> <div class="left"> <!--左侧div内容--> </div> <div class="resize" title="收缩侧边栏"> ⋮ </div> <div class="m.
vue 动态的设置页面的高和宽，适配浏览器的缩放比
yuqingyongqing的博客
12-09 2156
1 获取网页的缩放比 2.在主盒子中引用
python绝对方向角度值_重学前端：相对定位VS绝对定位VS固定定位
weixin_39575502的博客
12-10 918
position 是CSS中非常重要的属性，顾名思义，他是用来指定一个元素在页面上的位置，搞懂了position的属性值对布局的理解会更加透彻。position一共有5个值，分别是：staticrelativefixedabsolutestickystatic 是 position 的默认值，如果元素没有指定position，那么他的值就是默认的static定位。他会按照正常的文档流从上到下，从左...
Arco design pro vue - 全局组件大小控制
狗狗狗亮的博客
09-07 1751
Arco design pro vue 全局配置
vue div自适应高度
莫逸雪的博客
06-07 7230
div高度自适应利用flex布局或者监听其他盒子高度
vue div盒子宽高随另一个盒子自适应
细节怪的博客
09-13 2167
两个盒子的高度不固定，且右侧盒子高度随左侧盒子高度变化。
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸
热门推荐
guoxuhan的博客
02-01 3万+
需求： 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置； 2. 页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸； 需要注意的点： window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。 解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。 (以调节class为myD
vue实现拖拽边框改变元素宽度
weixin_42936768的博客
10-09 1334
如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。如果没有设置position，元素找不到。建立一个父子节点，父级元素必须是定位元素，设置样式如下。：设置鼠标捕获(之后的事件捕获会作用在当前元素上)代表距离当前元素最近的。
vue中如何动态设置元素的高度
mm
06-03 1万+
1. 添加样式绑定 <div class="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 computed: { // 滚动区高度 scrollerHeight: function() { return (window.innerHeight - 50) + 'px'; //自定义高度需求 } } ...
vue--is特性（限制元素&动态组件）
大小都是愁的成长之路
04-09 5086
概述：像 &lt;ul&gt;、&lt;ol&gt;、&lt;table&gt;、&lt;select&gt; 里只允许包含指定的元素，像 &lt;option&gt; 这样的元素只能出现在某些特定元素的内部；当模板标签使用在这些有限制性的元素中时，载入前组件还未解析，当前元素发现非指定元素会有排斥反应eg1：问题：table不识别custom标签，排斥解决：is特性，扩展原生HTML元素，cus...
vue在子组件中定义一个div，然后定义两个接收父组件的参数：宽度和高度，在父组件引入子组件去动态设置子组件宽度和高度参数让子组件中的div元素发生变化。
07-28
在Vue中，你可以使用插槽（slot）和props来实现父组件向子组件传递参数，并动态设置子组件中的div元素的宽度和高度。 首先，在子组件中定义一个div元素，并使用props接收父组件传递的宽度和高度参数。可以像这样定义子组件： ```html <template> <div :style="{ width: width, height: height }"> <!-- 子组件的内容 --> </div> </template> <script> export default { props: { width: { type: String, required: true }, height: { type: String, required: true } } } </script> ``` 然后，在父组件中引入子组件，并通过v-bind指令将父组件的宽度和高度参数传递给子组件。可以像这样引入子组件： ```html <template> <div> <!-- 父组件的内容 --> <child-component :width="parentWidth" :height="parentHeight"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentWidth: '200px', parentHeight: '300px' } } } </script> ``` 在上面的例子中，父组件通过v-bind指令将parentWidth和parentHeight传递给子组件的width和height props。子组件接收到这些props后，将会动态设置div元素的宽度和高度，从而实现子组件中的div元素的变化。 请注意，父组件中的宽度和高度参数可以是动态的，你可以根据需要在父组件中进行修改。同时，你也可以根据具体需求在子组件中添加其他的样式或逻辑。 希望这个例子能够帮助你理解如何在Vue中动态设置子组件中的div元素的宽度和高度参数。 #### 引用[.reference_title] - *1* *2* *3* [uniapp 子组件 props拿不到数据_Vue 组件通信 12 种解决方案](https://blog.csdn.net/weixin_39638929/article/details/110124842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值