perf(button): 新增 loading 属性, 支持加载状态

src/module/button/index.vue

@@ -10,19 +10,31 @@
       disabled ? 'layui-btn-disabled' : '',
     ]"
   >
-    <slot />
+    <i
+      v-if="loading"
+      class="
+        layui-icon
+        layui-icon-loading-1
+        layui-anim
+        layui-anim-rotate
+        layui-anim-loop
+      "
+    ></i>
+    <slot v-else />
   </button>
 </template>
 
 <script setup name="LayButton" lang="ts">
 import { defineProps } from 'vue'
 
-const props = defineProps<{
-  type?: string
-  size?: string
-  fluid?: boolean
-  radius?: boolean
-  border?: string
-  disabled?: boolean
-}>()
+const props =
+  defineProps<{
+    type?: string
+    size?: string
+    fluid?: boolean
+    radius?: boolean
+    border?: string
+    disabled?: boolean
+    loading?: boolean
+  }>()
 </script>

src/module/carousel/index.vue

@@ -4,39 +4,60 @@
     lay-anim
     lay-indicator="inside"
     lay-arrow="always"
-    :style="{width:width,height:height}"
+    :style="{ width: width, height: height }"
   >
     <div carousel-item>
-      <div> </div>
-      <div> </div>
-      <div> </div>
-      <div> </div>
-      <div class="layui-this"></div>
+      <slot></slot>
     </div>
     <div class="layui-carousel-ind">
       <ul>
-        <li class=""></li>
-        <li class=""></li>
-        <li class=""></li>
-        <li class=""></li>
-        <li class="layui-this"></li>
+        <li
+          v-for="ss in slots"
+          :key="ss"
+          :class="[ss.props.id === modelValue ? 'layui-this' : '']"
+          @click.stop="change(ss.props.id)"
+        ></li>
       </ul>
     </div>
-    <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button
-    ><button class="layui-icon layui-carousel-arrow" lay-type="add"></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 } from 'vue'
+import { withDefaults, defineProps, provide, useSlots, ref } from 'vue'
+
+const slot = useSlots() as any
+const slots = slot.default && slot.default()
 
 const props = withDefaults(
   defineProps<{
-    width: string,
-    height: string
+    width?: string
+    height?: string
+    modelValue: string
   }>(),
   {
     width: '100%',
-    height: '280px'
+    height: '280px',
   }
 )
+
+const active = ref(props.modelValue)
+
+const emit = defineEmits(['update:modelValue','change','close'])
+
+const change = function (id: any) {
+  emit('update:modelValue', id)
+  emit('change', id)
+  active.value = id
+}
+
+provide('active', active)
+
+const prev = function() {
+    console.log("上一页")
+}
+
+const next = function() {
+    console.log("下一页")
+}
 </script>

src/module/carouselItem/index.vue

@@ -1,9 +1,16 @@
 <template>
-    <li class="layui-this">
-        <slot></slot>
-    </li>
+  <li :class="[active === id ? 'layui-this' : '']">
+    <slot></slot>
+  </li>
 </template>
-<script setup name="LayCarousel" lang="ts">
-import { withDefaults, defineProps } from 'vue'
+<script setup name="LayCarouselItem" lang="ts">
+import { defineProps, inject } from 'vue'
+
+const props =
+  defineProps<{
+    id: string
+  }>()
+
+const active = inject('active')
 
 </script>