perf(layout): 重构 layout 组件, 增强 carouel 轮播组件

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

@@ -1,3 +1,6 @@
+::: field 基础使用
+:::
+
 ::: demo
 
 <template>
@@ -33,3 +36,99 @@ export default {
 </script>
 
 :::
+
+::: field 不同方向
+:::
+
+::: demo
+
+<template>
+  <lay-carousel v-model="active" 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>
+    <lay-carousel-item id="2">
+      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
+    </lay-carousel-item>
+    <lay-carousel-item id="3">
+      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
+    </lay-carousel-item>
+    <lay-carousel-item id="4">
+      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
+    </lay-carousel-item>
+  </lay-carousel>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active = ref("1")
+
+    return {
+      active
+    }
+  }
+}
+</script>
+
+:::
+
+::: field 控制位置
+:::
+
+::: demo
+
+<template>
+  {{active}}
+  <lay-carousel v-model="active" 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>
+    <lay-carousel-item id="2">
+      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
+    </lay-carousel-item>
+    <lay-carousel-item id="3">
+      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
+    </lay-carousel-item>
+    <lay-carousel-item id="4">
+      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
+    </lay-carousel-item>
+  </lay-carousel>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active = ref("1")
+
+    return {
+      active
+    }
+  }
+}
+</script>
+
+:::
+
+::: field 轮播属性
+:::
+
+| Name   | Description | Accepted Values  |
+| --------- | ------ | --- |
+| v-model | 当前激活项 | `--` |
+| anim | 切换方向 | `default` `updown` |
+| indicator | 控制器位置 | `inside` `outside` `none` |
+| arrow | 切换按钮状态 | `hover` `always` `none`|
+
+::: field 轮播事件
+:::
+
+| Name   | Description | Accepted Values  |
+| --------- | ------ | --- |
+| change | 切换回调 | id |

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

@@ -5,9 +5,147 @@
 
 <template>
   <lay-layout>
-    <lay-header></lay-header>
+    <lay-header>header</lay-header>
-    <lay-side></lay-side>
+    <lay-body>content</lay-body>
-    <lay-body></lay-body>
+    <lay-footer>footer</lay-footer>
+  </lay-layout>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+<style>
+.lay-code .layui-footer,
+.lay-code .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+}
+.lay-code .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+}
+.lay-code .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+
+:::
+
+::: field 左右布局
+:::
+
+::: demo
+
+<template>
+  <lay-layout>
+    <lay-side>left</lay-side>
+    <lay-body>content</lay-body>
+    <lay-side>right</lay-side>
+  </lay-layout>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: field 后台布局
+:::
+
+::: demo
+
+<template>
+  <lay-layout>
+    <lay-header>header</lay-header>
+    <lay-layout>
+      <lay-side>side</lay-side>
+      <lay-body>content</lay-body>
+    </lay-layout>
+  </lay-layout>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: field 复杂布局
+:::
+
+::: demo
+
+<template>
+  <lay-layout>
+    <lay-side>side</lay-side>
+    <lay-layout>
+      <lay-header>header</lay-header>
+      <lay-body>body</lay-body>
+      <lay-footer>footer</lay-footer>
+    </lay-layout>
+  </lay-layout>
+  <hr>
+  <lay-layout>
+    <lay-layout>
+      <lay-header>header</lay-header>
+      <lay-body>body</lay-body>
+      <lay-footer>footer</lay-footer>
+    </lay-layout>
+    <lay-side>side</lay-side>
+  </lay-layout>
+  <hr>
+  <lay-layout>
+    <lay-header>Header</lay-header>
+    <lay-body>
+      <lay-layout>
+        <lay-side :width="160">Left</lay-side>
+        <lay-body>Content</lay-body>
+      </lay-layout>
+    </lay-body>
+    <lay-footer>Footer</lay-footer>
+  </lay-layout>
+  <hr>
+  <lay-layout>
+    <lay-header>Header</lay-header>
+    <lay-body>
+      <lay-layout>
+        <lay-body>Content</lay-body>
+        <lay-side :width="160">Right</lay-side>
+      </lay-layout>
+    </lay-body>
+    <lay-footer>Footer</lay-footer>
   </lay-layout>
 </template>
 

docs/docs/zh-CN/guide/changelog.md

@@ -5,7 +5,11 @@
 <template>
 <lay-timeline>
 <lay-timeline-item title="0.2.0">
-[新增] carousel 轮播组件, 初步完成切换逻辑。<br>
+[新增] carousel 轮播 anim 属性, 支持 default updown 不同方向轮播。<br>
+[新增] carousel 轮播 arrow 属性, 支持 always hover none 不同状态切换按钮。<br>
+[新增] carousel 轮播 indicator 属性, 支持 none inside outside 不同位置轮播控制器。<br>
+[新增] carousel 轮播 change 事件, 用于自定义切换回调事件。<br>
+[重构] layout 系列组件, 支持 纵向布局, 横向布局, 嵌套布局等。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.1.9">
 [新增] carousel 轮播组件, 初步完成切换逻辑。<br>

docs/docs/zh-CN/guide/introduce.md

@@ -1,3 +1,6 @@
+::: field 基本介绍
+:::
+
 <lay-block>
 layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
 </lay-block>

docs/src/layouts/Layout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="width:100%;height:300px">
     <lay-layout>
-      <lay-header style="background: #393d49; border-bottom: 1px solid #404553">
+      <lay-header style="background: #393d49; border-bottom: 1px solid #404553"
-        <lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
+        ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
           <img src="../assets/logo.png" />
         </lay-logo>
         <ul
@@ -30,14 +30,14 @@
         >
           <li class="layui-nav-item">
             <a href="https://gitee.com/layui-vue">
-              <lay-icon type="layui-icon-fonts-code" size="18px"></lay-icon>
+              <lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
             </a>
           </li>
           <li class="layui-nav-item">
             <a
               href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
             >
-              <lay-icon type="layui-icon-chat" size="18px"></lay-icon>
+              <lay-icon type="layui-icon-chat" size="14px"></lay-icon>
             </a>
           </li>
           <li class="layui-nav-item">
@@ -341,6 +341,9 @@ export default {
   left: 15px;
   top: 16px;
 }
+.layui-header > .layui-nav {
+  background-color: transparent;
+}
 .layui-menu-docs {
   padding-top: 10px;
 }

docs/src/router/zh-CN.ts

@@ -37,9 +37,14 @@ const zhCN = [
             meta: { title: '更新' },
           },
           {
-            path: '/zh-CN/guide/sandbox',
+            path: '/zh-CN/guide/problem',
-            component: () => import('../../docs/zh-CN/guide/sandbox.md'),
+            component: () => import('../../docs/zh-CN/guide/problem.md'),
-            meta: { title: '沙盒' },
+            meta: { title: '问题' },
+          },
+          {
+            path: '/zh-CN/guide/contribution',
+            component: () => import('../../docs/zh-CN/guide/contribution.md'),
+            meta: { title: '贡献' },
           },
         ],
       },

docs/src/styles/markdown.css

@@ -285,8 +285,8 @@ body::-webkit-scrollbar {
 }
 
 .layui-menu-item-group {
-  padding-left: 10px!important;
+  padding-left: 10px !important;
-  padding-right: 10px!important;
+  padding-right: 10px !important;
 }
 
 .layui-menu .layui-menu-item-group > .layui-menu-body-title {

docs/src/view/component.vue

@@ -1,41 +1,43 @@
 <template>
-  <lay-side>
+  <lay-layout>
-    <ul class="layui-menu layui-menu-lg layui-menu-docs">
+    <lay-side>
-      <li
+      <ul class="layui-menu layui-menu-lg layui-menu-docs">
-        v-for="menu in menus"
+        <li
-        :key="menu"
+          v-for="menu in menus"
-        class="layui-menu-item-group"
+          :key="menu"
-        lay-options="{type: 'group', isAllowSpread: true}"
+          class="layui-menu-item-group"
-      >
+          lay-options="{type: 'group', isAllowSpread: true}"
-        <div class="layui-menu-body-title">{{ menu.title }}</div>
+        >
-        <hr />
+          <div class="layui-menu-body-title">{{ menu.title }}</div>
-        <ul>
+          <hr />
-          <li
+          <ul>
-            v-for="children in menu.children"
+            <li
-            :key="children"
+              v-for="children in menu.children"
-            :class="[
+              :key="children"
-              currentPath === children.path ? 'layui-menu-item-checked2' : '',
+              :class="[
-            ]"
+                currentPath === children.path ? 'layui-menu-item-checked2' : '',
-            @click="handleClick(children)"
+              ]"
-          >
+              @click="handleClick(children)"
-            <div class="layui-menu-body-title">
+            >
-              <router-link :to="children.path">
+              <div class="layui-menu-body-title">
-                <span>{{ children.title }}</span>
+                <router-link :to="children.path">
-                <span class="layui-font-12 layui-font-gray">
+                  <span>{{ children.title }}</span>
-                  {{ children.subTitle }}
+                  <span class="layui-font-12 layui-font-gray">
-                </span>
+                    {{ children.subTitle }}
-              </router-link>
+                  </span>
-            </div>
+                </router-link>
-          </li>
+              </div>
-        </ul>
+            </li>
-      </li>
+          </ul>
-    </ul>
+        </li>
-  </lay-side>
+      </ul>
-  <lay-body>
+    </lay-side>
-    <div style="padding: 20px">
+    <lay-body>
-      <router-view />
+      <div style="padding: 20px">
-    </div>
+        <router-view />
-  </lay-body>
+      </div>
+    </lay-body>
+  </lay-layout>
 </template>
 <script>
 import { ref, watch } from 'vue'

docs/src/view/guide.vue

@@ -1,41 +1,45 @@
 <template>
-  <lay-side>
+  <lay-layout>
-    <ul class="layui-menu layui-menu-lg layui-menu-docs">
+    <lay-side>
-      <li
+        <ul class="layui-menu layui-menu-lg layui-menu-docs">
-        v-for="menu in menus"
-        :key="menu"
-        class="layui-menu-item-group"
-        lay-options="{type: 'group', isAllowSpread: true}"
-      >
-        <div class="layui-menu-body-title">{{ menu.title }}</div>
-        <hr />
-        <ul>
           <li
-            v-for="children in menu.children"
+            v-for="menu in menus"
-            :key="children"
+            :key="menu"
-            :class="[
+            class="layui-menu-item-group"
-              currentPath === children.path ? 'layui-menu-item-checked2' : '',
+            lay-options="{type: 'group', isAllowSpread: true}"
-            ]"
-            @click="handleClick(children)"
           >
-            <div class="layui-menu-body-title">
+            <div class="layui-menu-body-title">{{ menu.title }}</div>
-              <router-link :to="children.path">
+            <hr />
-                <span>{{ children.title }}</span>
+            <ul>
-                <span class="layui-font-12 layui-font-gray">
+              <li
-                  {{ children.subTitle }}
+                v-for="children in menu.children"
-                </span>
+                :key="children"
-              </router-link>
+                :class="[
-            </div>
+                  currentPath === children.path
+                    ? 'layui-menu-item-checked2'
+                    : '',
+                ]"
+                @click="handleClick(children)"
+              >
+                <div class="layui-menu-body-title">
+                  <router-link :to="children.path">
+                    <span>{{ children.title }}</span>
+                    <span class="layui-font-12 layui-font-gray">
+                      {{ children.subTitle }}
+                    </span>
+                  </router-link>
+                </div>
+              </li>
+            </ul>
           </li>
         </ul>
-      </li>
+    </lay-side>
-    </ul>
+    <lay-body>
-  </lay-side>
+      <div style="padding: 20px">
-  <lay-body>
+        <router-view />
-    <div style="padding: 20px">
+      </div>
-      <router-view />
+    </lay-body>
-    </div>
+  </lay-layout>
-  </lay-body>
 </template>
 <script>
 import { ref, watch } from 'vue'
@@ -80,6 +84,18 @@ export default {
             subTitle: 'change log',
             path: '/zh-CN/guide/changelog',
           },
+          {
+            id: 4,
+            title: '问题',
+            subTitle: 'problem',
+            path: '/zh-CN/guide/problem',
+          },
+          {
+            id: 5,
+            title: '贡献',
+            subTitle: 'contribution',
+            path: '/zh-CN/guide/contribution',
+          },
         ],
       },
     ]

docs/src/view/index.vue

@@ -4,7 +4,6 @@
       background-color: whitesmoke;
       height: 100%;
       width: 100%;
-      margin-top: 60px;
     "
   >
     <div class="site-banner">
@@ -28,7 +27,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.1.9</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.2.0</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"

src/css/layui.css

@@ -19,7 +19,6 @@ body {
 }
 
 .layui-edge,
-.layui-header,
 .layui-inline,
 .layui-main {
   position: relative;
@@ -1020,86 +1019,17 @@ a cite {
   margin: 0 auto;
 }
 
-.layui-header {
-  z-index: 1000;
-  height: 60px;
-}
-
-.layui-header a:hover {
-  transition: all 0.5s;
-  -webkit-transition: all 0.5s;
-}
-
-.layui-side {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 999;
-  width: 200px;
-}
-
 .layui-side-scroll {
   position: relative;
   width: 220px;
   height: 100%;
 }
 
-.layui-body {
+.layui-logo {
-  position: relative;
-  left: 200px;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 900;
-  width: auto;
-  box-sizing: border-box;
-}
-
-.layui-layout-admin .layui-header {
-  top: 0;
-  left: 0;
-  right: 0;
-  position: fixed;
-  background-color: #23262e;
-}
-
-.layui-layout-admin .layui-side {
-  top: 60px;
-  width: 200px;
-  overflow-x: hidden;
-}
-
-.layui-layout-admin .layui-body {
-  position: absolute;
-  top: 60px;
-  padding-bottom: 44px;
-}
-
-.layui-layout-admin .layui-main {
-  width: auto;
-  margin: 0 15px;
-}
-
-.layui-layout-admin .layui-footer {
-  position: fixed;
-  left: 200px;
-  right: 0;
-  bottom: 0;
-  z-index: 990;
-  height: 44px;
-  line-height: 44px;
-  padding: 0 15px;
-  box-shadow: -1px 0 4px rgb(0 0 0 / 12%);
-  background-color: #fafafa;
-}
-
-.layui-layout-admin .layui-logo {
-  position: absolute;
   left: 0;
   top: 0;
   width: 200px;
-  height: 100%;
+  height: 60px;
   line-height: 60px;
   text-align: center;
   color: #009688;
@@ -1107,10 +1037,6 @@ a cite {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
 }
 
-.layui-layout-admin .layui-header .layui-nav {
-  background: 0 0;
-}
-
 .layui-layout-left {
   position: absolute !important;
   left: 200px;
@@ -4826,10 +4752,6 @@ body .layui-table-tips .layui-layer-content {
   background-color: #009688;
 }
 
-.layui-side .layui-nav-tree .layui-nav-bar {
-  width: 2px;
-}
-
 .layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-nav-child dd.layui-this a,
 .layui-nav-tree .layui-this,
@@ -4927,7 +4849,7 @@ body .layui-table-tips .layui-layer-content {
   color: #5fb878 !important;
 }
 
-.layui-breadcrumb a:nth-last-child(2)  {
+.layui-breadcrumb a:nth-last-child(2) {
   color: #666;
   font-style: normal;
 }

src/module/body/index.vue

@@ -4,4 +4,21 @@
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'LayBody',
+}
+</script>
+
 <script setup name="LayBody" lang="ts"></script>
+
+<style>
+.layui-body {
+  display: block;
+  flex: 1;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+  min-height: 300px;
+}
+</style>

src/module/carousel/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     class="layui-carousel"
-    lay-anim
+    :lay-anim="anim"
-    lay-indicator="inside"
+    :lay-indicator="indicator"
-    lay-arrow="always"
+    :lay-arrow="arrow"
     :style="{ width: width, height: height }"
   >
     <div carousel-item>
@@ -24,18 +24,18 @@
       lay-type="sub"
       @click="prev"
     >
-      </button
+      {{ 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 } from 'vue'
+import { withDefaults, defineProps, provide, useSlots, ref, computed } from 'vue'
 
 const slot = useSlots() as any
 const slots = slot.default && (slot.default() as any[])
@@ -45,19 +45,31 @@ const props = withDefaults(
     width?: string
     height?: string
     modelValue: string
+    anim: string
+    arrow: string
+    indicator: string
   }>(),
   {
     width: '100%',
     height: '280px',
+    anim: 'default',
+    arrow: 'hover',
+    indicator: 'inside'
   }
 )
 
-const active = ref(props.modelValue)
+const active = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
 
-const emit = defineEmits(['update:modelValue', 'change', 'close'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const change = function (id: any) {
-  emit('update:modelValue', id)
   emit('change', id)
   active.value = id
 }
@@ -65,25 +77,25 @@ const change = function (id: any) {
 provide('active', active)
 
 const prev = function () {
-  for(var i = 0; i< slots.length; i++) {
+  for (var i = 0; i < slots.length; i++) {
-    if(slots[i].props.id === active.value) {
+    if (slots[i].props.id === active.value) {
-      if(i === 0) {
+      if (i === 0) {
-        return false;
+        return false
       }
       active.value = slots[i - 1].props.id
-      break;
+      break
     }
   }
 }
 
 const next = function () {
-  for(var i = 0; i< slots.length; i++) {
+  for (var i = 0; i < slots.length; i++) {
-    if(slots[i].props.id === active.value) {
+    if (slots[i].props.id === active.value) {
-      if(i === slots.length - 1) {
+      if (i === slots.length - 1) {
-        return false;
+        return false
       }
       active.value = slots[i + 1].props.id
-      break;
+      break
     }
   }
 }

src/module/footer/index.vue

@@ -4,4 +4,16 @@
   </div>
 </template>
 
-<script setup name="LayFooter" lang="ts"></script>
+<script lang="ts">
+export default {
+  name: 'LayFooter',
+}
+</script>
+
+<script setup lang="ts"></script>
+
+<style>
+.layui-footer {
+  box-sizing: border-box;
+}
+</style>

src/module/header/index.vue

@@ -3,5 +3,15 @@
     <slot />
   </div>
 </template>
-<script setup name="LayHeader"></script>
+<script lang="ts">
+export default {
+  name: 'LayHeader',
+}
+</script>
 <script setup lang="ts"></script>
+<style>
+.layui-header {
+  box-sizing: border-box;
+  height: 60px;
+}
+</style>

src/module/layout/index.vue

@@ -1,7 +1,54 @@
 <template>
-  <div class="layui-layout layui-layout-admin">
+  <section :class="classes">
     <slot />
-  </div>
+  </section>
 </template>
+<script lang="ts">
+export default {
+  name: 'LayLayout',
+}
+</script>
+<script setup lang="ts">
+import { Component, computed, useSlots } from 'vue'
+import Header from '../header/index.vue'
 
-<script setup name="LayLayout" lang="ts"></script>
+const props = withDefaults(
+  defineProps<{
+    isVertical?: boolean
+  }>(),
+  {
+    isVertical: false,
+  }
+)
+
+const slots = useSlots()
+
+const isVertical = computed(() => {
+  if (!slots.default) return false
+  const vNodes = slots.default()
+  return vNodes.some((vNode) => {
+    const componentName = (vNode.type as Component).name
+    if (!componentName) return false
+    return [Header.name].includes(componentName)
+  })
+})
+
+const classes = computed(() => {
+  return ['layui-layout', { 'layui-layout-vertical': isVertical.value }]
+})
+</script>
+
+<style>
+.layui-layout {
+  display: flex;
+  flex: 1;
+  flex-basis: auto;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.layui-layout-vertical {
+  flex-direction: column;
+}
+</style>

src/module/rate/index.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
   defineProps<{
     length?: number
     modelValue?: number
+    character?: string
   }>(),
   {
     length: 5,
@@ -45,7 +46,6 @@ const mouseenter = function (index: number) {
   }
 
   // select update 时, 通知 change 事件
-
   emit('update:modelValue', index + 1)
 }
 </script>

src/module/scroll/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="layui-side-scroll" />
+  <div class="layui-side-scroll">
+    <slot></slot>
+  </div>
 </template>
 
 <script setup name="LayScroll" lang="ts"></script>

src/module/side/index.vue

@@ -1,15 +1,38 @@
 <template>
-  <div class="layui-side" :class="black ? 'layui-bg-black' : ''">
+  <div class="layui-side" :style="style">
-    <div class="layui-side-scroll">
+    <slot />
-      <slot />
-    </div>
   </div>
 </template>
 
-<script setup name="LaySide" lang="ts">
+<script lang="ts">
-import { defineProps } from 'vue'
+export default {
-
+  name: 'LaySide',
-const props = defineProps<{
+}
-  black?: boolean
-}>()
 </script>
+
+<script setup lang="ts">
+import { computed, CSSProperties, defineProps } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    width?: string
+  }>(),
+  {
+    width: '200',
+  }
+)
+
+const style = computed<CSSProperties>(() => {
+  return {
+    width: `${props.width}px`,
+  }
+})
+</script>
+
+<style>
+.layui-side {
+  overflow: auto;
+  box-sizing: border-box;
+  min-height: 300px;
+}
+</style>