溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了Vue的項目使用Element ui走馬燈無法實現怎么辦，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
1.在vue項目中引入element ui
http://element.eleme.io/#/zh-CN/component/carousel
引入后，HTML部分
<el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h4><img :src="item" alt=""> </h4> </el-carousel-item> </el-carousel>
JS部分
<script>
export default {
data(){
return {
imgList:[
require('../../assets/img/images/a1.png'),
require('../../assets/img/images/a2.png'),
require('../../assets/img/images/a3.png'),
require('../../assets/img/images/a4.png'),
require('../../assets/img/images/a5.png')
]
}
},
components: {
}
}
</script>用webpack搭建的項目不能直接使用絕對路徑，要用require，如果不使用這個，必須是線上圖片。http類型的
補充知識：基于vue 使用element UI框架 實現走馬燈 圖片高度自適應
走馬燈代碼結構走一遍 （imgList數組在data中聲明,此為本地數據）
data() {
return{
// 圖片需要引入, 否則無法顯示
imgList: [
{id: 0, idView: require('../assets/images/banner3.jpg')},
{id: 1, name: '詳情', idView: require('../assets/images/banner2.jpg')},
{id: 2, name: '推薦', idView: require('../assets/images/banner1.jpg')}
]
}
}<template> <el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight"> <el-carousel-item v-for="item in imgList" :key="item.id"> <el-row> <el-col :span="24"><img ref="imgHeight" :src="item.idView" class="banner_img"/></el-col> </el-row> </el-carousel-item> </el-carousel> </template>
element UI 官網地址戳這里
http://element-cn.eleme.io/#/zh-CN/component/carousel
Carousel 中有一個height參數 如果給固定值620px，那么它會出現如圖效果， 圖片的寬高隨可視窗口的改變等比放大或縮小，可視窗口縮小，圖片的寬度和高度縮小， 輪播圖的固定高度不變, so...如圖所示 如果圖片給height: 100%; 屬性,圖片會拉伸；好吧，那就換一個auto，則如圖所示
所以，要想圖片正常顯示，又不會出現空白條的辦法，就是動態改變輪播圖的高度跟圖片高度相等即可。
首先獲取圖片的高度，通過ref來獲取DOM元素
監聽窗口發生改變時，獲取img的高度，給輪播圖height屬性添加屬性值
that.imgHeight = '620px'
window.onresize = function temp() {
// 通過點語法獲取img的height屬性值
that.imgHeight = `${that.$refs.imgHeight['0'].height}px`
}以上就是關于Vue的項目使用Element ui走馬燈無法實現怎么辦的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
