vue3 Carousel 走马灯轮播图 element Plus 自定义图片翻页

最新推荐文章于 2024-07-27 17:10:43 发布

好多吃的啊

最新推荐文章于 2024-07-27 17:10:43 发布

阅读量1.3k

点赞数 1

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_50080847/article/details/129236497

版权

vue3 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章介绍了如何在ElementPlus中自定义走马灯组件的用法，强调了通过ref获取并调用DOM方法的关键点，特别是解决通过ref调用方法时遇到的错误，如`cardShow.previsnotafunction`，并提供了正确的调用方式`cardShow._value.next()`。

摘要由CSDN通过智能技术生成

文章目录

element plus 用法这里不说了下面直接到走马灯自定义用法

element plus 用法这里不说了下面直接到走马灯自定义用法

<img src="../../../../assets/images/left_01.png" alt="" class="left_img shou" @click="arrowClick('left')">
   <div class="swiperitem">
     <el-carousel height="82px" indicator-position="none" arrow="never" @prev="prev" :autoplay="false" ref="cardShow"  @setActiveItem="setActiveItem">
       <el-carousel-item v-for="item in arr" :key="item">
         <!-- <h3 class="small justify-center" text="2xl" style="background-color: pink;height: 80px;">{{ item }}</h3> -->
         <div class="row_between" style="width: 100%;">
           <div class="itembox col_center shou" v-for="(items,index) in 4">
             <text class="swtitle">{{ item }}彩色多普勒彩色多普勒彩色多普勒彩色多普勒</text>
             <div class="swdate">2022-03-12 12:30:06</div>
           </div>  
         </div>
       </el-carousel-item>
     </el-carousel>

   </div>
 <img src="../../../../assets/images/left_01.png" alt="" class="right_img shou" @click="arrowClick('right')">

<script setup>
import { ref } from 'vue'
let arr = ref([1,2,3,4])
let cardShow = ref(null)
console.log('reff', cardShow)
let arrowClick = (val) => {
      if(val === 'right') {
        cardShow._value.next()
      } else {
        cardShow._value.prev()
      }
    }

</script>

在这里插入图片描述
思路：
通过 ref 获取到dom 上的方法。然后调用方法

遇到的坑：
通过 ref 获取到 dom 了。但是就是无法使用方法，报类似这样的错：Uncaught TypeError: cardShow.prev is not a function
然后通过排查到dom 上信息发现在 _value 上才有dom 方法。所以出现了 cardShow._value.next() 这个用法。友友们切记注意啊！！