Element UI 走马灯高度自适应

最新推荐文章于 2024-04-29 17:45:34 发布

原创最新推荐文章于 2024-04-29 17:45:34 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

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.log(that.hdgd)
        }
      }

完整代码：

图片和vue以及element自行引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="lib/element-ui.css">
    <link rel="stylesheet" type="text/css" href="lib/css/index.css" />
  </head>
  <body>
    <div id="app">
      <header>Header</header>
      <el-container>
        <el-main>
          <el-row :gutter="10">
            <el-col :md="24">
              <el-carousel :type="cancard" indicator-position="outside" :height="hdgd">
                <el-carousel-item v-for="item in img" :key="item">
                  <img :src="'img/'+item+'.jpeg'" width="100%">
                </el-carousel-item>
              </el-carousel>
            </el-col>
            
          </el-row>
        </el-main>

      </el-container>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="lib/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="lib/element-ui.js"></script>
  <script src="lib/template.js"></script>
  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        show: true,
        hdgd: '270px',
        img: ['lb01', 'lb02', 'lb03']
      },
      computed: {
        cancard: () => {
          return ""
        }
      },
      methods: {},
      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.log(that.hdgd)
        }
      }
    });
  </script>
</html>

来源：https://www.lovestu.com/elementuizmdzst.html

您可能感兴趣的与本文相关的镜像