vue3 Carousel 走马灯 轮播图 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() 这个用法。友友们切记注意啊！！