脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js+elementUI实现点击左右箭头切换头像功能

vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

 更新时间：2019年09月05日 09:46:32   作者：克克业业  
这篇文章主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

1.效果图如下

在这里插入图片描述

2.vue代码如下

<el-carousel type="card" arrow="always" :loop="false" :initial-index="1"
       indicator-position="none" :autoplay="false">
 <el-carousel-item v-for="(items, index) in item.userInfo1" :key="index">
  <div class="div2">
   <div>
    <div style="position: absolute;" v-show="item.state===0 || item.state===1">
     <img @click="deleteImg(items,item)" src="../../assets/delete.png"
        class="deleteStyle">
    </div>
    <img :src="items.b_img.url" class="headImgStyle">
   </div>
   <div class="nickname">
    {{items.b_nickname}}
   </div>
  </div>
 </el-carousel-item>
</el-carousel>

3.修改的样式

 .el-carousel__item.el-carousel__item--card.is-in-stage {
  text-align: center;
 }
/*修改高度*/
 .el-carousel__container {
  height: 100px;
 }
 .van-collapse-item__content {
  padding: 14px 0;
 }
/*左右箭头的样式*/
 button.el-carousel__arrow.el-carousel__arrow--left, button.el-carousel__arrow.el-carousel__arrow--right {
  font-size: 12px;
  height: 20px;
  width: 20px;
  background: #A099F0;
 }

总结

以上所述是小编给大家介绍的vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 如何在vue3+ts项目中使用query和params传参

    如何在vue3+ts项目中使用query和params传参

    Vue3中的路由传参有两种方式:query和params,下面这篇文章主要给大家介绍了关于如何在vue3+ts项目中使用query和params传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue3之Suspense加载异步数据的使用

    vue3之Suspense加载异步数据的使用

    本文主要介绍了vue3之Suspense加载异步数据的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue-electron使用serialport时问题解决方案

    vue-electron使用serialport时问题解决方案

    这篇文章主要介绍了vue-electron使用serialport时问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 如何实现echarts markline标签名显示自己想要的

    如何实现echarts markline标签名显示自己想要的

    这篇文章主要介绍了实现echarts markline标签名显示自己想要的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中 router.beforeEach() 的用法示例代码

    vue中 router.beforeEach() 的用法示例代码

    导航守卫主要是通过跳转或取消的方式守卫导航,本文通过示例代码讲解vue中 router.beforeEach() 的用法,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • Vue组件封装上传图片和视频的示例代码

    Vue组件封装上传图片和视频的示例代码

    这篇文章主要介绍了Vue封装上传图片和视频的组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-07-07
  • vue-router命名路由和编程式路由传参讲解

    vue-router命名路由和编程式路由传参讲解

    今天小编就为大家分享一篇关于vue-router命名路由和编程式路由传参讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue实现拖放排序功能的实例代码

    Vue实现拖放排序功能的实例代码

    本文通过实例代码给大家介绍了Vue中实现拖放排序功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue 中使用 this 更新数据的一次问题记录

    vue 中使用 this 更新数据的一次问题记录

    这篇文章主要介绍了vue 中使用 this 更新数据的一次大坑 ,我在 vue 实例中声明了一个数组属性如 books: []，在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新，感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • Vue+jsPlumb实现连线效果(支持滑动连线和点击连线)

    Vue+jsPlumb实现连线效果(支持滑动连线和点击连线)

    jsPlumb 是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。本文将利用jsPlumb实现连线效果，同时支持滑动连线和点击连线，感兴趣的可以了解一下
    2023-01-01

最新评论