Element UI 走馬燈高度自適應(yīng)
Element UI走馬燈中，通過(guò)屬性height來(lái)設(shè)置高度，但是設(shè)置就是死的，不能自適應(yīng)。要自適應(yīng)需要監(jiān)控窗口寬度的變化。
網(wǎng)上別人分享的太復(fù)雜了，這兒有簡(jiǎn)單的方法實(shí)現(xiàn)高度自適應(yīng)。
首先，確定圖片的最大高度
我的圖片最大高度為270px，屏幕寬度超過(guò)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() {
// 通過(guò)捕獲系統(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自行引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="lib/element-ui.css">
<link rel="stylesheet" type="text/css" href="lib/css/index.css" />
</head>
<body>
<div id="app">
<header>Header</header>
<el-container>
<el-main>
<el-row :gutter="10">
<el-col :md="24">
<el-carousel :type="cancard" indicator-position="outside" :height="hdgd">
<el-carousel-item v-for="item in img" :key="item">
<img :src="'img/'+item+'.jpeg'" width="100%">
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="lib/element-ui.js"></script>
<script src="lib/template.js"></script>
<script>
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() {
// 通過(guò)捕獲系統(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)
}
}
});
</script>
</html>
版權(quán)聲明：
作者：applek
鏈接：http://www.51viplawyer.com/elementuizmdzst.html
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END
