修复 src 结构

src/component/carousel/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "LayCarousel", Component);
+};
+
+export default Component as IDefineComponent;

src/component/carousel/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="layui-carousel"
+    :lay-anim="anim"
+    :lay-indicator="indicator"
+    :lay-arrow="arrow"
+    :style="{ width: width, height: height }"
+  >
+    <div carousel-item>
+      <slot></slot>
+    </div>
+    <div class="layui-carousel-ind">
+      <ul>
+        <li
+          v-for="ss in slots"
+          :key="ss"
+          :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"
+    >
+      {{ anim === "updown" ? "" : "" }}</button
+    ><button
+      class="layui-icon layui-carousel-arrow"
+      lay-type="add"
+      @click="next"
+    >
+      {{ anim === "updown" ? "" : "" }}
+    </button>
+  </div>
+</template>
+<script setup name="LayCarousel" lang="ts">
+import {
+  withDefaults,
+  defineProps,
+  provide,
+  useSlots,
+  ref,
+  computed,
+} from "vue";
+
+const slot = useSlots() as any;
+const slots = slot.default && (slot.default() as any[]);
+
+const props = withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+    modelValue: string;
+    anim?: string;
+    arrow?: string;
+    indicator?: string;
+  }>(),
+  {
+    width: "100%",
+    height: "280px",
+    anim: "default",
+    arrow: "hover",
+    indicator: "inside",
+  }
+);
+
+const active = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const change = function (id: any) {
+  emit("change", id);
+  active.value = id;
+};
+
+provide("active", active);
+
+const prev = function () {
+  for (var i = 0; i < slots.length; i++) {
+    if (slots[i].props.id === active.value) {
+      if (i === 0) {
+        active.value = slots[slots.length - 1].props.id;
+      }
+      active.value = slots[i - 1].props.id;
+      break;
+    }
+  }
+};
+
+const next = function () {
+  for (var i = 0; i < slots.length; i++) {
+    if (slots[i].props.id === active.value) {
+      if (i === slots.length - 1) {
+        active.value = slots[0].props.id;
+      }
+      active.value = slots[i + 1].props.id;
+      break;
+    }
+  }
+};
+</script>