element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
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 走马灯高度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： qgraphicsview鼠标移动图片_
- 下一篇： python脚本调度程序_Windows