Ant Design Vue 走马灯(Carousel)组件自定义箭头的实现
引用组件import {Carousel, Icon} from ‘antd’;<div class="modal_box"><!-- 上一页的图标 --><a-icon type="left" style="font-size: 50px" @click="handlePrev" /><!-- 走马灯 --><!-- 一定要注意这里指定的 r
·
引用组件import {Carousel, Icon} from ‘antd’;
<div class="modal_box">
<!-- 上一页的图标 -->
<a-icon type="left" style="font-size: 50px" @click="handlePrev" />
<!-- 走马灯 -->
<!-- 一定要注意这里指定的 ref -->
<a-carousel autoplay ref="img">
<div><h2>1</h2></div>
<div><h2>2</h2></div>
<div><h2>3</h2></div>
<div><h2>4</h2></div>
</a-carousel>
<!-- 下一页图标 -->
<a-icon
type="right"
style="font-size: 50px"
@click="handleNext"
/>
</div>
方法调用
methods: {
handlePrev() {
// 通过上边指定的ref 来操作
this.$refs.img.prev();
},
handleNext() {
this.$refs.img.next();
}
}
样式,一定要给轮播图一个宽度,否则轮播图的宽度溢出,无法使组件保持水平
.modal_box {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.ant-carousel {
width: 75%;
}
效果图如下(有些潦草)
有懂得大佬讲讲官方文档写的走马灯自定义箭头怎么用,实在弄不明白
更多推荐
已为社区贡献1条内容
所有评论(0)