vue下的elementui輪播圖自適應(yīng)高度問題

更新時間：2022年09月20日 11:14:20 作者：白日有夢

這篇文章主要介紹了vue下的elementui輪播圖自適應(yīng)高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

elementui輪播圖自適應(yīng)高度

翻了下api 沒有找到對應(yīng)的屬性，所以這里用自定義方法來實(shí)現(xiàn)

<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>

我們?nèi)〉腷anner 是在750像素下高度為145px

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

elementui輪播圖自適應(yīng)的最簡單實(shí)現(xiàn)

相信用過element ui組件庫的人肯定都有用到輪播圖，關(guān)于大小官方只提供了一個height屬性，字符串類型，也就是說可以使用vh、vw等自適應(yīng)單位。

我看到網(wǎng)上大部分人都是通過js監(jiān)聽瀏覽器寬高、圖片大小去設(shè)置一個值，千篇一律…… 今天我來給大家分享一個更加簡單快捷的方法：

 <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，然后圖片標(biāo)簽加上以下樣式就可以了：

width: 100%; height: auto;

效果如下

拉伸一下

vw的值各位可以根據(jù)自己的情況去調(diào)整。這個做法不能說百分之百精確，但我覺得已經(jīng)能夠滿足需求了。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue移動端時彈出側(cè)邊抽屜菜單效果
這篇文章主要介紹了vue移動端時彈出側(cè)邊抽屜菜單,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
基于element-ui表格的二次封裝實(shí)現(xiàn)
本文主要介紹了基于element-ui表格的二次封裝實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue: WebStorm設(shè)置快速編譯運(yùn)行的方法
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運(yùn)行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
這篇文章主要介紹了Vue中使用this.$set()實(shí)現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
Vue密碼登陸加密RSA實(shí)現(xiàn)方案
這篇文章主要介紹了Vue密碼登陸加密RSA實(shí)現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實(shí)例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-08-08
vue3+vite2實(shí)現(xiàn)動態(tài)綁定圖片的優(yōu)雅解決方案
這篇文章主要為大家詳細(xì)介紹了vue3+vite2實(shí)現(xiàn)動態(tài)綁定圖片的優(yōu)雅解決方案,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-08-08
一文搞懂Vue3中watchEffect偵聽器的使用
今天我們來學(xué)習(xí)一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個相對來說比較簡單，用的不是很多，當(dāng)然了，根據(jù)自己的項目情況自行決定使用，希望對大家有所幫助
2022-07-07
vue-router 組件復(fù)用問題詳解
本篇文章主要介紹了vue-router 組件復(fù)用問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01