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

docs/docs/zh-CN/components/button.md

@@ -199,6 +199,32 @@ export default {
 
 :::
 
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <lay-button-container>
+      <lay-button type="default" :loading="loading">加载</lay-button>
+      <lay-switch v-model="loading"></lay-switch>
+  </lay-button-container>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const loading = ref(true)
+
+    return {
+      loading
+    }
+  }
+}
+</script>
+
+:::
+
 | Name   | Description | Accepted Values                          |
 | ------ | ------ | --------------------------------------------- |
 | type   | 主题   | `primary` `normal` `warm` `danger` `disabled` |

docs/docs/zh-CN/components/carousel.md

@@ -1,11 +1,11 @@
 ::: demo
 
 <template>
-  <lay-carousel>
+  <lay-carousel v-model="active">
-    <lay-carousel-item>条目一</lay-carousel-item>
+    <lay-carousel-item id="1">条目一</lay-carousel-item>
-    <lay-carousel-item>条目二</lay-carousel-item>
+    <lay-carousel-item id="2">条目二</lay-carousel-item>
-    <lay-carousel-item>条目三</lay-carousel-item>
+    <lay-carousel-item id="3">条目三</lay-carousel-item>
-    <lay-carousel-item>条目四</lay-carousel-item>
+    <lay-carousel-item id="4">条目四</lay-carousel-item>
   </lay-carousel>
 </template>
 
@@ -15,7 +15,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const active = ref("1")
+
     return {
+      active
     }
   }
 }

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<{
+const props =
-  type?: string
+  defineProps<{
-  size?: string
+    type?: string
-  fluid?: boolean
+    size?: string
-  radius?: boolean
+    fluid?: boolean
-  border?: string
+    radius?: boolean
-  disabled?: 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>
+      <slot></slot>
-      <div> </div>
-      <div> </div>
-      <div> </div>
-      <div class="layui-this"></div>
     </div>
     <div class="layui-carousel-ind">
       <ul>
-        <li class=""></li>
+        <li
-        <li class=""></li>
+          v-for="ss in slots"
-        <li class=""></li>
+          :key="ss"
-        <li class=""></li>
+          :class="[ss.props.id === modelValue ? 'layui-this' : '']"
-        <li class="layui-this"></li>
+          @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="sub" @click="prev"></button
-    ><button class="layui-icon layui-carousel-arrow" lay-type="add"></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,
+    width?: string
-    height: 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">
+  <li :class="[active === id ? 'layui-this' : '']">
-        <slot></slot>
+    <slot></slot>
-    </li>
+  </li>
 </template>
-<script setup name="LayCarousel" lang="ts">
+<script setup name="LayCarouselItem" lang="ts">
-import { withDefaults, defineProps } from 'vue'
+import { defineProps, inject } from 'vue'
+
+const props =
+  defineProps<{
+    id: string
+  }>()
+
+const active = inject('active')
 
 </script>