feat: 加强 carousel 组件

package/component/src/component/button/index.vue

@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
   loading: false,
   disabled: false,
   nativeType: "button",
-  borderStyle: "soild"
+  borderStyle: "soild",
 });
 
 const emit = defineEmits(["click"]);
@@ -47,10 +47,10 @@ const onClick = (event: any) => {
 };
 
 const styles = computed(() => {
-  return { 
+  return {
-    border: `1px ${props.borderStyle}`
+    border: `1px ${props.borderStyle}`,
-  }
+  };
-})
+});
 
 const classes = computed(() => {
   return [
@@ -82,4 +82,4 @@ const classes = computed(() => {
     <slot v-else></slot>
     <i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i>
   </button>
-</template>
+</template>

package/component/src/component/carousel/index.vue

@@ -86,13 +86,10 @@ provide("slotsChange", slotsChange);
 // 上一页
 const sub = function () {
   for (var i = 0; i < childrens.value.length; i++) {
-    // @ts-ignore
     if (childrens.value[i].props.id === active.value) {
       if (i === 0) {
-        // @ts-ignore
         active.value = childrens.value[slots.length - 1].props.id;
       }
-      // @ts-ignore
       active.value = childrens.value[i - 1].props.id;
       break;
     }
@@ -102,18 +99,36 @@ const sub = function () {
 // 下一页
 const add = function () {
   for (var i = 0; i < childrens.value.length; i++) {
-    // @ts-ignore
     if (childrens.value[i].props.id === active.value) {
       if (i === childrens.value.length - 1) {
-        // @ts-ignore
         active.value = childrens.value[0].props.id;
       }
-      // @ts-ignore
       active.value = childrens.value[i + 1].props.id;
       break;
     }
   }
 };
+
+// 自动播放
+const autoplay = () => {
+  for (var i = 0; i < childrens.value.length; i++) {
+    if (childrens.value[i].props.id === active.value) {
+      if (i === childrens.value.length - 1) {
+        active.value = childrens.value[0].props.id;
+      }
+      active.value = childrens.value[i + 1].props.id;
+      break;
+    }
+  }
+};
+
+watch(
+  () => props.autoplay,
+  () => {
+    setInterval(autoplay, props.interval);
+  },
+  { immediate: true }
+);
 </script>
 
 <template>

package/component/src/component/scroll/index.vue

@@ -262,7 +262,7 @@ export default defineComponent({
     }
   }
 }
-.scrollbar-y ::-webkit-scrollbar{
+.scrollbar-y ::-webkit-scrollbar {
   display: none;
 }
 //移动端隐藏自定义滚动条
@@ -270,10 +270,10 @@ export default defineComponent({
   display: none;
 }
 //移动端显示原生滑块
-.hide.scrollbar-box .scrollbar-y ::-webkit-scrollbar{
+.hide.scrollbar-box .scrollbar-y ::-webkit-scrollbar {
   display: block;
 }
-.hide.scrollbar-box .scrollbar-y .scroll-wrap{
+.hide.scrollbar-box .scrollbar-y .scroll-wrap {
   scrollbar-width: auto;
   -ms-overflow-style: scrollbar;
 }

package/document/src/document/zh-CN/components/carousel.md

@@ -7,7 +7,7 @@
 ::: demo
 
 <template>
-  <lay-carousel v-model="active">
+  <lay-carousel v-model="active1">
     <lay-carousel-item id="1">
       <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
     </lay-carousel-item>
@@ -29,10 +29,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const active = ref("1")
+    const active1 = ref("1")
 
     return {
-      active
+      active1
     }
   }
 }
@@ -46,7 +46,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-carousel v-model="active" anim="updown">
+  <lay-carousel v-model="active2" anim="updown">
     <lay-carousel-item id="1">
       <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
     </lay-carousel-item>
@@ -68,10 +68,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const active = ref("1")
+    const active2 = ref("1")
 
     return {
-      active
+      active2
     }
   }
 }
@@ -85,7 +85,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-carousel v-model="active" indicator="outside">
+  <lay-carousel v-model="active3" indicator="outside">
     <lay-carousel-item id="1">
       <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
     </lay-carousel-item>
@@ -107,10 +107,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const active = ref("1")
+    const active3 = ref("1")
 
     return {
-      active
+      active3
     }
   }
 }
@@ -124,7 +124,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-carousel v-model="active">
+  <lay-carousel v-model="active4">
     <lay-carousel-item :id="item.id" v-for="item in arrays">
       <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">{{ item.text }}</div>
     </lay-carousel-item>
@@ -137,7 +137,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const active = ref("1")
+    const active4 = ref("1")
 
     const arrays = ref([
       {id: "1", text: ""},
@@ -147,7 +147,7 @@ export default {
     ])
 
     return {
-      active,
+      active4,
       arrays
     }
   }

package/document/src/document/zh-CN/guide/changelog.md

@@ -16,8 +16,10 @@
       <li> 
         <h3>1.0.2 <span class="layui-badge-rim">2022-04-07</span></h3> 
         <ul>
-          <li>[新增] button 组件 border-style 属性, 允许自定义边框样式。(by @就眠儀式)</li>
+          <li>[新增] button 组件 border-style 属性, 自定义边框样式。(by @就眠儀式)</li>
           <li>[新增] config-provider 组件 dark-partial 属性, 夜间主题偏好配置。(by @就眠儀式)</li>
+          <li>[新增] carousel 组件 autoplay 属性, 开启自动轮播, 默认为 true。(by @就眠儀式)</li>
+          <li>[新增] carousel 组件 interval 属性, 用于控制轮播间隔。(by @就眠儀式)</li>
           <li>[修复] page 组件 pages 属性为单数时, 页码计算错误。(by @就眠儀式)</li>
           <li>[修复] panel 组件 background-color 为透明的问题。(by @就眠儀式)</li>
           <li>[修复] tab 组件 layui-tab-head 默认存在背景色。(by @就眠儀式)</li>