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>
相关推荐
二十一_11 分钟前
炸了!Claude Code 51万行源码全部泄露,我已经拿到了完整代码
前端·langchain·claude
RePeaT16 分钟前
npm 依赖版本号中 `^` 和 `~` 到底有什么区别?
前端·javascript·npm
DanCheOo18 分钟前
多模型适配:一套代码接 6 家 AI 厂商
前端·ai编程
米丘19 分钟前
Node.js 事件循环
前端·javascript·node.js
Forever7_20 分钟前
紧急!Axios 被投毒,3亿项目受到影响!教你怎么自查!
前端·axios
zzialx12320 分钟前
HarmonyOS:照片添加多样式的水印信息
前端
前端冒菜师25 分钟前
记一次AI全栈开发的过程
前端·ai编程
Giant10032 分钟前
深度玩转 Cursor Rules:让 AI 生成的代码 100% 符合团队规范
前端·面试
代码煮茶35 分钟前
Vue3 组件通信实战 | 8 种组件通信方式全解析
前端·vue.js
kyriewen35 分钟前
自定义事件:让代码之间也能“悄悄对话”
前端·javascript·面试