vue下的elementui輪播圖自適應高度問題
更新時間：2022年09月20日 11:14:20 作者：白日有夢
這篇文章主要介紹了vue下的elementui輪播圖自適應高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
elementui輪播圖自適應高度
翻了下api 沒有找到對應的屬性，所以這里用自定義方法來實現(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輪播圖自適應的最簡單實現(xiàn)
相信用過element ui組件庫的人肯定都有用到輪播圖，關(guān)于大小官方只提供了一個height屬性，字符串類型，也就是說可以使用vh、vw等自適應單位。
我看到網(wǎng)上大部分人都是通過js監(jiān)聽瀏覽器寬高、圖片大小去設置一個值，千篇一律…… 今天我來給大家分享一個更加簡單快捷的方法：
<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的值各位可以根據(jù)自己的情況去調(diào)整。這個做法不能說百分之百精確，但我覺得已經(jīng)能夠滿足需求了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue移動端時彈出側(cè)邊抽屜菜單,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
本文主要介紹了基于element-ui表格的二次封裝實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
今天小編就為大家分享一篇vue: WebStorm設置快速編譯運行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
這篇文章主要介紹了Vue中使用this.$set()實現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue+Element實現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了Vue密碼登陸加密RSA實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
vue3+vite2實現(xiàn)動態(tài)綁定圖片的優(yōu)雅解決方案
這篇文章主要為大家詳細介紹了vue3+vite2實現(xiàn)動態(tài)綁定圖片的優(yōu)雅解決方案,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08
今天我們來學習一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個相對來說比較簡單，用的不是很多，當然了，根據(jù)自己的項目情況自行決定使用，希望對大家有所幫助2022-07-07
本篇文章主要介紹了vue-router 組件復用問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01