當(dāng)前位置：首頁 >

element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应

發(fā)布時(shí)間：2025/3/21 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Element UI走馬燈中，通過屬性height來設(shè)置高度，但是設(shè)置就是死的，不能自適應(yīng)。要自適應(yīng)需要監(jiān)控窗口寬度的變化。

網(wǎng)上別人分享的太復(fù)雜了，這兒有簡單的方法實(shí)現(xiàn)高度自適應(yīng)。

首先，確定圖片的最大高度

我的圖片最大高度為270px，屏幕寬度超過container的寬度，這個(gè)值就不能再變化了。

首先計(jì)算圖片高度和網(wǎng)站寬度的百分比，例如，內(nèi)容區(qū)域最大寬度為1180px，圖片高度為270px，270/1180約0.22

那么，只要寬度被改變，高度就變化為寬度的0.22倍即可

data中聲明hdgd屬性，作為高度變量

VUE添加mounted事件：

mounted() {

let that = this;

window.onresize = function windowResize() {

// 通過捕獲系統(tǒng)的onresize事件觸發(fā)我們需要執(zhí)行的事件

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)

}

添加el-carousel，:height="hdgd"屬性

效果如下：

完整代碼：

圖片和vue以及element自行引入

Header

var vue = new Vue({

el: '#app',

data: {

show: true,

hdgd: '270px',

img: ['lb01', 'lb02', 'lb03']

computed: {

cancard: () => {

return ""

}

methods: {},