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 走马灯高度自适应的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。