Element UI走馬燈中，通過屬性height來設置高度，但是設置就是死的，不能自適應。要自適應需要監控窗口寬度的變化。

網上別人分享的太復雜了，這兒有簡單的方法實現高度自適應。

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

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

首先計算圖片高度和網站寬度的百分比，例如，內容區域最大寬度為1180px，圖片高度為270px，270/1180約0.22

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

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

VUE添加mounted事件：

mounted() {

let that = this;

window.onresize = function windowResize() {

// 通過捕獲系統的onresize事件觸發我們需要執行的事件

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: {},

mounted() {

let that = this;

window.onresize = function windowResize() {

// 通過捕獲系統的onresize事件觸發我們需要執行的事件

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)

}

}

});

總結

以上是生活随笔為你收集整理的element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。