自定义走马灯的左右按钮
参数 | 说明 | 类型 | 可选值 | 默认值 | |
---|---|---|---|---|---|
height | 走马灯的高度 | string | — | — | |
arrow | 切换箭头的显示时机 | string | always/hover/never | hover | |
trigger | 指示器的触发方式 | string | click | — | |
autoplay | 是否自动切换 | boolean | — | true |
<el-carousel trigger="click" arrow="never" :autoplay="false">
以上,关闭走马灯默认的自动切换,并且隐藏默认的左右按钮切换箭头。
这里的左右切换按钮,使用的是图片,,(随便找的网图凑合看看)。
<template> <div> //这里将div盒子的height写成10px就可以让左按钮和走马灯div保持在同一行(我之前试过el-row的写法,不好使才这样写的) <div style="height:10px"> //src如果不加require显示加载失败 //el-image这种原生组件的点击事件需要加native <el-image :src="require('./img/left.jpg')" @click.native="imageClick('left')" class="left-img"></el-image> </div> //这里的height为10px,使走马灯和右按钮在同一行 <div style="width:70%;margin-left:80px;height: 10px;"> <el-carousel trigger="click" arrow="never" :autoplay="false" ref="cardShow"> <el-carousel-item v-for="(item,index) in arrayText" :key="index"> <el-row> <el-col :span="7" v-for="(itemCld,indexCld) in arrayText[index].children" :key="indexCld"> <el-card class="project-card"> </el-card> </el-col> </el-row> </el-carousel-item> </el-carousel> </div> <div> <el-image :src="require('./img/right.jpg')" @click.native="imageClick('right')" class="right-img"></el-image> </div> </div> </template> <script> export default { methods: { imageClick (val) { if (val == 'right') { //点击右按钮切换至下一页走马灯 this.$refs.cardShow.next() } else { //点击左按钮切换至上一页走马灯 this.$refs.cardShow.prev() } } } } </script> <style scoped lang="less"> .project-card { width: 200px; height: 120px; margin: 60px 100px; border: 2px solid rgb(231, 119, 149); border-radius: 4px; } /deep/ .el-carousel__button { background-color: rgba(0, 0, 0, 0.2); width: 10px; height: 10px; border-radius: 50%; } /deep/ .is-active .el-carousel__button { background-color: rgba(239, 122, 167, 0.885); } .left-img{ width:30px; height:60px; margin: 100px 0 0 90px; } .right-img{ width:30px; height:60px; margin: 80px 1000px; } </style>
原文地址:https://blog.csdn.net/wulikunbing/article/details/128220570
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_19521.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。