element跑马灯/轮播图,第一页隐藏左边按钮,最后一页隐藏右边按钮(vue 开箱即用)

图示:


第一步:

复制代码
 <el-carousel :class="changeIndex==0?'leftBtnNone':changeIndex==imgDataList.length-1? 'rightBtnNone':''"   height="546px" :autoplay="false"  @change="changeNext">
			<el-carousel-item v-for="(item,index) in imgDataList" :key="index">
                                       //内容
                   
                </el-carousel-item>
</el-carousel>

第二步:

复制代码
data() {
        return {
            imgDataList: [],
            changeIndex:'   '
        }
    },

第三步

复制代码
methods:{
		changeNext(e){
            this.changeIndex=e
        },

}

第四步

复制代码
<style scoped>
/deep/.leftBtnNone {
    .el-carousel__arrow--left {
        display: none !important;
    }
}
/deep/.rightBtnNone {
    .el-carousel__arrow--right {
        display: none !important;
    }
}
</style>
相关推荐
海石17 小时前
微信小程序开发01:XR-FRAME的快速上手
前端·增强现实·trae
叶梅树20 小时前
DocsJS npmjs 自动化发布复盘(Trusted Publisher)
前端·npm
喵叔哟20 小时前
9. 【Blazor全栈开发实战指南】--Blazor调用JavaScript
开发语言·javascript·udp
我命由我1234520 小时前
Element Plus - Form 的 resetField 方法观察记录
开发语言·前端·javascript·vue.js·html·html5·js
清空mega20 小时前
《Vue3 项目结构详解:components、views、assets、router、stores 到底该怎么理解?》
前端·javascript·vue.js
雨雨雨雨雨别下啦21 小时前
Vue——小白也能学!Day6
前端·javascript·vue.js
XPoet21 小时前
AI 编程工程化:Hook——AI 每次操作前后的自动检查站
前端·后端·ai编程
難釋懷1 天前
RedisTemplate配置读写分离
前端·bootstrap·html
冰暮流星1 天前
javascript如何实现删除数组里面的重复元素
开发语言·前端·javascript
网络点点滴1 天前
透传属性$attrs
前端·javascript·vue.js