【ElementUI】el-carousel走马灯修改指示器样式、高度随着图片大小而更改

最新推荐文章于 2024-08-01 16:57:14 发布

宾果的救星

最新推荐文章于 2024-08-01 16:57:14 发布

阅读量1.1w

点赞数 14

分类专栏： # Element 文章标签： elementui

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/113005241

版权

Element 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

本文介绍了如何使用ElementUI库中的el-carousel组件，通过监听图片加载事件动态调整轮播图高度，实现轮播图随图片大小自适应。同时，详细展示了如何修改默认指示器样式，以满足UI设计需求，包括位置、尺寸和颜色的调整。此外，还提供了代码示例和生命周期钩子函数的使用方法。

摘要由CSDN通过智能技术生成

转载请注明：【ElementUI】走马灯 el-carousel_joanmelon的博客-CSDN博客

carousel 的高度随着图片大小而更改

@load="imgLoad" 第一次加载页面跟踪图片高度

<el-carousel :height="imgHeight">
    <el-carousel-item v-for="item in imgList" :key="item">
        <img ref="imgHeight" :src="item.src" @load="imgLoad">
    </el-carousel-item>
</el-carousel>

data: {
    imgHeight: '',
},
mounted() {
    this.imgLoad()
    window.onresize = () => {
        this.imgLoad()
    }
},
methods:{
　　imgLoad(){
　　　　this.$nextTick(()=>{
　　　　　　this.imgHeight = this.$refs.imgHeight['0'].height +'px'
　　　　}）
　　　}

}　　　　
destroyed() {
     window.onresize = null;
}

修改指示器样式

UI设计师经常会修改轮播图的指示器，并不会按照文档的样式来，今天遇到的就是常用的样式。

走马灯默认样式：

我们期望的样式：

设置样式的时候，一定要添加scoped

<style lang="less" scoped>
    /deep/.el-carousel__indicators--horizontal {
        position: absolute;
        left: auto;
        right: 10px;
        bottom: 10px;
        text-align: right;

        .el-carousel__indicator--horizontal button {
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            opacity: 0.5;
        }

        .el-carousel__indicator--horizontal.is-active button {
            width: 24px;
            height: 8px;
            background: #ffffff;
            opacity: 0.5;
            border-radius: 10px;
        }
    }
</style>