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>
相关推荐
月弦笙音9 分钟前
【浏览器】这几点必须懂
前端
SuperEugene10 分钟前
弹窗与抽屉组件封装:如何做一个全局可控的 Dialog 服务
前端·javascript·vue.js
UrbanJazzerati11 分钟前
事件传播机制详解(附直观比喻和代码示例)
前端
青青家的小灰灰11 分钟前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
北冥有鱼12 分钟前
JSON或代码对比的工具-vue
vue.js
SuperEugene13 分钟前
组合式函数 、 Hooks(Vue2 mixin 、 Vue3 composables)的实战封装
前端·javascript·vue.js
乡村中医15 分钟前
AI Chat实现第一步,流式输出,教你如何实现打字流
前端
程序员阿峰16 分钟前
这5个CSS新特性已经强到离谱,攻城狮直呼内行
前端
阿星AI工作室23 分钟前
给openclaw龙虾造了间像素办公室!实时看它写代码、摸鱼、修bug、写日报,太可爱了吧!
前端·人工智能·设计模式
Kayshen26 分钟前
我用纯前端逆向了 Figma 的二进制文件格式,实现了 .fig 文件的完整解析和导入
前端·agent·ai编程