vue下的elementui轮播图自适应高度问题

 更新时间:2022年09月20日 11:14:20   作者:白日有梦  
这篇文章主要介绍了vue下的elementui轮播图自适应高度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

elementui轮播图自适应高度

翻了下api 没有找到对应的属性,所以这里用自定义方法来实现

<el-carousel :interval="5000" arrow="never" :height="autoHeight">
     <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <a :href="banner.extra.tourl" rel="external nofollow" >
            <img :src="banner.imgurl" :title="banner.title" class="max-img">
        </a>
     </el-carousel-item>
  </el-carousel>

我们取的banner 是在750像素下高度为145px

 getAutoHeight(){
     let _w = document.documentElement.clientWidth || document.body.clientWidth; ; 
     this.autoHeight = _w * 145 / 375 + 'px';
  }

elementui轮播图自适应的最简单实现

相信用过element ui组件库的人肯定都有用到轮播图,关于大小官方只提供了一个height属性,字符串类型,也就是说可以使用vh、vw等自适应单位。

我看到网上大部分人都是通过js监听浏览器宽高、图片大小去设置一个值,千篇一律…… 今天我来给大家分享一个更加简单快捷的方法:

 <div class="slide_pc">
         <el-carousel trigger="click" height="37vw" @change="loadAnimate"  :interval="5000" arrow="hover">
            <el-carousel-item v-for="(item,index) in imgurl" :key="index">
              <figure>
                <img :src="item" style="width:100%;height: auto;"/>
              </figure>
            </el-carousel-item>
          </el-carousel>
          <!-- <slider-show :slides="sliders" :inv="invTime"></slider-show> -->
    </div>

我给它的单位是vw,然后图片标签加上以下样式就可以了:

width: 100%; height: auto;

效果如下

拉伸一下

vw的值各位可以根据自己的情况去调整。这个做法不能说百分之百精确,但我觉得已经能够满足需求了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 图片裁剪上传组件的实现

    vue 图片裁剪上传组件的实现

    这篇文章主要介绍了vue 图片裁剪上传组件的实现,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vuejs+vue-router打包+Nginx配置的实例

    Vuejs+vue-router打包+Nginx配置的实例

    今天小编就为大家分享一篇Vuejs+vue-router打包+Nginx配置的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3的7种种组件通信详情

    Vue3的7种种组件通信详情

    Vue3兼容大部分Vue2的特性,用Vue2代码开发Vue3都可以,性能上面打包大小减少 41%,初次渲染快 55%,更新快 133%,内存使用减少 54%,本篇文章主要介绍Vue3的7种种组件通信,需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • Vue如何从1.0迁移到2.0

    Vue如何从1.0迁移到2.0

    这篇文章主要介绍了Vue如何从1.0迁移到2.0的相关资料,需要的朋友可以参考下
    2017-10-10
  • 一篇文章教你简单使用Vue的watch侦听器

    一篇文章教你简单使用Vue的watch侦听器

    这篇文章主要为大家介绍了Vue watch侦听器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 解决vant的Toast组件时提示not defined的问题

    解决vant的Toast组件时提示not defined的问题

    这篇文章主要介绍了解决vant的Toast组件时提示not defined的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue-resource:jsonp请求百度搜索的接口示例

    vue-resource:jsonp请求百度搜索的接口示例

    今天小编就为大家分享一篇vue-resource:jsonp请求百度搜索的接口示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2.x与vue3.x中自定义指令详解(最新推荐)

    vue2.x与vue3.x中自定义指令详解(最新推荐)

    vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作,比如防抖、节流、懒加载、输入框自动聚焦等等,使用起来非常方便,比如vue自带的v-text、v-html、v-show、v-if等等,这篇文章主要介绍了vue2.x与vue3.x中自定义指令详解,需要的朋友可以参考下
    2022-12-12
  • Vue3初始化如何调用函数

    Vue3初始化如何调用函数

    这篇文章主要介绍了Vue3初始化如何调用函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中Axios的封装与接口管理详解

    Vue中Axios的封装与接口管理详解

    在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论