ci(component): 初步集成 滑块 和 轮播 组件

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

@@ -0,0 +1,19 @@
+::: demo
+
+<template>
+  <lay-carousel></lay-carousel>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

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

@@ -3,25 +3,25 @@
 <template>
     <ul class="layui-row layui-col-space15">
         <li class="layui-col-sm3">
-            <div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px">
+            <div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
                 <p>#009688</p><p>
                 </p><p tips="">主色调之一</p>
             </div>
         </li>
         <li class="layui-col-sm3">
-            <div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px">
+            <div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
                 <p>#5FB878</p><p>
                 </p><p tips="">一般用于选中状态</p>
             </div>
         </li>
         <li class="layui-col-sm3">
-            <div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px">
+            <div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
                 <p>#393D49</p><p>
                 </p><p tips="">通常用于导航</p>
             </div>
         </li>
         <li class="layui-col-sm3">
-            <div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px">
+            <div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
                 <p>#1E9FFF</p><p>
                 </p><p tips="">经典蓝</p>
             </div>
@@ -48,25 +48,25 @@ export default {
 <template>
 <ul class="layui-row layui-col-space15">
       <li class="layui-col-sm3">
-        <div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px">
+        <div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#FFB800</p><p>
           </p><p tips="">暖色系</p>
         </div>
       </li>
       <li class="layui-col-sm3">
-        <div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px">
+        <div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#FF5722</p><p>
           </p><p tips="">比较引人注意的颜色</p>
         </div>
       </li>
       <li class="layui-col-sm3">
-        <div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px">
+        <div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#01AAED</p><p>
           </p><p tips="">文本链接着色</p>
         </div>
       </li>
       <li class="layui-col-sm3">
-        <div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px">
+        <div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#2F4056</p><p>
           </p><p tips="">侧边色</p>
         </div>

docs/src/layouts/Layout.vue

@@ -309,6 +309,11 @@ export default {
         title: '滑块',
         subTitle: 'slider',
         path: '/zh-CN/components/slider',
+      },{
+        id: 38,
+        title: '轮播',
+        subTitle: 'carousel',
+        path: '/zh-CN/components/carousel'
       }
     ]
 

docs/src/router/zh-CN.ts

@@ -198,7 +198,11 @@ const zhCN = [
         path: '/zh-CN/components/slider',
         component: () => import('../../docs/zh-CN/components/slider.md'),
         meta: { title: '滑块' },
-      },
+      },{
+        path: '/zh-CN/components/carousel',
+        component: () => import('../../docs/zh-CN/components/carousel.md'),
+        meta: { title: '轮播' },
+      }
     ],
   },
 ]

src/index.ts

@@ -55,6 +55,8 @@ import LayPage from './module/page/index'
 import LayTransfer from './module/transfer/index'
 import LayCheckboxGroup from './module/checkboxGroup/index'
 import LaySlider from './module/slider/index'
+import LayCarousel from './module/carousel/index'
+
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -109,7 +111,8 @@ const components: Record<string, IDefineComponent> = {
   LayPage,
   LayTransfer,
   LayCheckboxGroup,
-  LaySlider
+  LaySlider,
+  LayCarousel
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -178,6 +181,7 @@ export {
   LayTransfer,
   LayCheckboxGroup,
   LaySlider,
+  LayCarousel,
   install,
 }
 

src/module/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/module/carousel/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="layui-carousel"
+    id="test1"
+    lay-anim=""
+    lay-indicator="inside"
+    lay-arrow="always"
+    style="width: 100%; height: 280px"
+  >
+    <div carousel-item="">
+      <div> </div>
+      <div> </div>
+      <div> </div>
+      <div> </div>
+      <div class="layui-this"></div>
+    </div>
+    <div class="layui-carousel-ind">
+      <ul>
+        <li class=""></li>
+        <li class=""></li>
+        <li class=""></li>
+        <li class=""></li>
+        <li class="layui-this"></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>
+  </div>
+</template>
+<script setup name="LayCarousel" lang="ts">
+</script>