vue卡片式点击切换图片组件使用详解 vue卡片式点击切换图片组件使

本文实例为大家分享了vue卡片式点击切换图片组件，供大家参考，具体内容如下
因为公司业务的问题，最近在写vue项目，有了一个卡片图片的点击的需求，自己又不想写动画效果，就偷个懒，采用vue是以数据驱动的原理，写了一个不太完整的vue组件，为了简单，就直接上代码吧
全部代码

未进行props传参设置，以后完善（简单最好嘛）

.cardBanner{ padding: 10px 30px; background-color: #fff; border: 1px solid #ccc; position: relative; }.cardBanner ul{ display: flex; overflow: scroll; /*设置滚动条*/}.cardBanner ul::-webkit-scrollbar{/*隐藏滚动条*/ display: none; }.cardBanner ul>li{ //高能部分，flex不太好解释 width: 31.33333%; flex-shrink: 0; padding-left: 3%; text-align: center; }.cardBanner ul>li:first-child{ padding-left: 0; }.cardBanner ul>li a{ display: block; width: 100%; height: 100%; }.cardBanner ul>li img{ width: 100%; height: 170px; border-radius: 5px; }.cardBanner ul>li p{ margin: 0; }[class^='arrow']{ font-size: 30px; transform: scaleX(.7); color: #ddd; }.arrow-left{ position: absolute; left: 5px; top: 50%; margin-top: -17px; }.arrow-right{ position: absolute; right: 5px; top: 50%; margin-top: -17px; }