vue下的elementui輪播圖自適應(yīng)高度問題
更新時(shí)間：2022年09月20日 11:14:20 作者：白日有夢(mèng)
這篇文章主要介紹了vue下的elementui輪播圖自適應(yīng)高度問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
elementui輪播圖自適應(yīng)高度
翻了下api 沒有找到對(duì)應(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)的最簡(jiǎn)單實(shí)現(xiàn)
相信用過element ui組件庫(kù)的人肯定都有用到輪播圖，關(guān)于大小官方只提供了一個(gè)height屬性，字符串類型，也就是說可以使用vh、vw等自適應(yīng)單位。
我看到網(wǎng)上大部分人都是通過js監(jiān)聽瀏覽器寬高、圖片大小去設(shè)置一個(gè)值，千篇一律…… 今天我來給大家分享一個(gè)更加簡(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，然后圖片標(biāo)簽加上以下樣式就可以了：
width: 100%; height: auto;
效果如下
拉伸一下
vw的值各位可以根據(jù)自己的情況去調(diào)整。這個(gè)做法不能說百分之百精確，但我覺得已經(jīng)能夠滿足需求了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue?事件處理函數(shù)的綁定示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue監(jiān)聽鍵盤事件的快捷方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue組件添加事件@click.native操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題
這篇文章主要介紹了Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue實(shí)現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能,涉及vue.js表單事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果【推薦】
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果的思路詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
vue中實(shí)現(xiàn)代碼高亮與語(yǔ)法著色的方法介紹
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進(jìn)行代碼高亮與語(yǔ)法著色，Vue提供了多種方式來實(shí)現(xiàn)代碼高亮與語(yǔ)法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家介紹了vue封裝動(dòng)態(tài)表格方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04