Element UI 走马灯高度自适应

最新推荐文章于 2024-07-12 10:00:20 发布

applek_Case

最新推荐文章于 2024-07-12 10:00:20 发布

阅读量6k

点赞数 2

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/applek_Case/article/details/99697972

版权

本文介绍了如何在Element UI的走马灯组件中实现高度自适应，避免固定高度设置。通过监听窗口宽度变化，计算图片高度与网站宽度的百分比，设置走马灯高度为宽度的0.22倍，从而达到高度动态调整的效果。提供了一个简洁的VUE实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element UI走马灯中，通过属性height来设置高度，但是设置就是死的，不能自适应。要自适应需要监控窗口宽度的变化。

网上别人分享的太复杂了，这儿有简单的方法实现高度自适应。

首先，确定图片的最大高度

我的图片最大高度为270px，屏幕宽度超过container的宽度，这个值就不能再变化了。

首先计算图片高度和网站宽度的百分比，例如，内容区域最大宽度为1180px，图片高度为270px，270/1180约0.22

那么，只要宽度被改变，高度就变化为宽度的0.22倍即可

data中声明hdgd属性，作为高度变量

VUE添加mounted事件：

mounted() {
        let that = this;
        window.onresize = function windowResize() {
          // 通过捕获系统的onresize事件触发我们需要执行的事件
          var w = window.innerWidth
          var h = 270
          if (w > 1180) {
            h = 270
          } else {
            h = 0.22 * w
          }
          that.hdgd = h + 'px'
          console.l