perf(carousel): 初步完成 carousel 轮播组件

src/module/carousel/index.vue

@@ -14,20 +14,31 @@
         <li
           v-for="ss in slots"
           :key="ss"
-          :class="[ss.props.id === modelValue ? 'layui-this' : '']"
+          :class="[ss.props.id === active ? 'layui-this' : '']"
           @click.stop="change(ss.props.id)"
         ></li>
       </ul>
     </div>
-    <button class="layui-icon layui-carousel-arrow" lay-type="sub" @click="prev"></button
-    ><button class="layui-icon layui-carousel-arrow" lay-type="add" @click="next"></button>
+    <button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="sub"
+      @click="prev"
+    >
+      </button
+    ><button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="add"
+      @click="next"
+    >
+      
+    </button>
   </div>
 </template>
 <script setup name="LayCarousel" lang="ts">
 import { withDefaults, defineProps, provide, useSlots, ref } from 'vue'
 
 const slot = useSlots() as any
-const slots = slot.default && slot.default()
+const slots = slot.default && (slot.default() as any[])
 
 const props = withDefaults(
   defineProps<{
@@ -43,7 +54,7 @@ const props = withDefaults(
 
 const active = ref(props.modelValue)
 
-const emit = defineEmits(['update:modelValue','change','close'])
+const emit = defineEmits(['update:modelValue', 'change', 'close'])
 
 const change = function (id: any) {
   emit('update:modelValue', id)
@@ -53,11 +64,27 @@ const change = function (id: any) {
 
 provide('active', active)
 
-const prev = function() {
-    console.log("上一页")
+const prev = function () {
+  for(var i = 0; i< slots.length; i++) {
+    if(slots[i].props.id === active.value) {
+      if(i === 0) {
+        return false;
+      }
+      active.value = slots[i - 1].props.id
+      break;
+    }
+  }
 }
 
-const next = function() {
-    console.log("下一页")
+const next = function () {
+  for(var i = 0; i< slots.length; i++) {
+    if(slots[i].props.id === active.value) {
+      if(i === slots.length - 1) {
+        return false;
+      }
+      active.value = slots[i + 1].props.id
+      break;
+    }
+  }
 }
 </script>