[新增] lay-line 分割线组件

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

@@ -0,0 +1,25 @@
+::: demo
+
+<template>
+  <lay-line></lay-line>
+  <lay-line theme="red"></lay-line>
+  <lay-line theme="orange"></lay-line>
+  <lay-line theme="green"></lay-line>
+  <lay-line theme="cyan"></lay-line>
+  <lay-line theme="blue"></lay-line>
+  <lay-line theme="black"></lay-line>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -1,32 +1,30 @@
 <template>
-
   <div class="width:100%;height:300px">
-      <lay-layout>
-    <lay-header>
-      <lay-logo>
-        layui-vue
-      </lay-logo>
-    </lay-header>
-    <lay-side>
-      <ul>
-        <li><router-link to="/zh-CN/components/layout">布局</router-link></li>
-        <li><router-link to="/zh-CN/components/button">按钮</router-link></li>
-        <li><router-link to="/zh-CN/components/icon">图标</router-link></li>
-        <li><router-link to="/zh-CN/components/panel">面板</router-link></li>
-        <li><router-link to="/zh-CN/components/card">卡片</router-link></li>
-        <li><router-link to="/zh-CN/components/grid">栅格</router-link></li>
-        <li><router-link to="/zh-CN/components/form">表单</router-link></li>
-        <li><router-link to="/zh-CN/components/badge">徽章</router-link></li>
-        <li><router-link to="/zh-CN/components/block">区块</router-link></li>
-      </ul>
-    </lay-side>
-    <lay-body>
-      <div style="padding: 20px">
-        <router-view></router-view>
-      </div>
-    </lay-body>
-    <lay-footer></lay-footer>
-  </lay-layout>
+    <lay-layout>
+      <lay-header>
+        <lay-logo> layui-vue </lay-logo>
+      </lay-header>
+      <lay-side>
+        <ul>
+          <li><router-link to="/zh-CN/components/layout">布局</router-link></li>
+          <li><router-link to="/zh-CN/components/button">按钮</router-link></li>
+          <li><router-link to="/zh-CN/components/icon">图标</router-link></li>
+          <li><router-link to="/zh-CN/components/panel">面板</router-link></li>
+          <li><router-link to="/zh-CN/components/card">卡片</router-link></li>
+          <li><router-link to="/zh-CN/components/grid">栅格</router-link></li>
+          <li><router-link to="/zh-CN/components/form">表单</router-link></li>
+          <li><router-link to="/zh-CN/components/badge">徽章</router-link></li>
+          <li><router-link to="/zh-CN/components/block">区块</router-link></li>
+          <li><router-link to="/zh-CN/components/line">分割</router-link></li>
+        </ul>
+      </lay-side>
+      <lay-body>
+        <div style="padding: 20px">
+          <router-view></router-view>
+        </div>
+      </lay-body>
+      <lay-footer></lay-footer>
+    </lay-layout>
   </div>
 </template>
 <script>

docs/src/router/zh-CN.ts

@@ -59,6 +59,11 @@ const zhCN = [
         path: '/zh-CN/components/block',
         component: () => import('../../docs/zh-CN/components/block.md'),
         meta: { title: '辅助' },
+      },
+      {
+        path: '/zh-CN/components/line',
+        component: () => import('../../docs/zh-CN/components/line.md'),
+        meta: { title: '分割' },
       }
     ],
   },

src/index.ts

@@ -22,6 +22,7 @@ import LayRow from "./module/row/index"
 import LayInput from "./module/input/index"
 import LayBadge from "./module/badge/index"
 import LayBlock from "./module/block/index"
+import LayLine from "./module/line/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -42,7 +43,8 @@ const components: Record<string, IDefineComponent> = {
   LayCol,
   LayInput,
   LayBadge,
-  LayBlock
+  LayBlock,
+  LayLine
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -75,6 +77,7 @@ export {
   LayInput,
   LayBadge,
   LayBlock,
+  LayLine,
   install,
 }
 

src/module/line/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 || 'LayLine', Component)
+}
+
+export default Component as IDefineComponent

src/module/line/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <hr :class="['layui-border-' + theme]" />
+</template>
+
+<script setup name="LayLine" lang="ts">
+import { defineProps } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+    theme?: string
+  }>()
+</script>