[完成] 徽章组件

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

@@ -0,0 +1,34 @@
+::: demo
+
+<template>
+    <lay-badge type="dot"></lay-badge>
+    <lay-badge type="dot" theme="orange"></lay-badge>
+    <lay-badge type="dot" theme="green"></lay-badge>
+    <lay-badge type="dot" theme="cyan"></lay-badge>
+    <lay-badge type="dot" theme="blue"></lay-badge>
+    <lay-badge type="dot" theme="black"></lay-badge>
+    <lay-badge type="dot" theme="gray"></lay-badge>
+    <lay-badge  >赤</lay-badge>
+    <lay-badge  theme="orange">橙</lay-badge>
+    <lay-badge  theme="green">绿</lay-badge>
+    <lay-badge  theme="cyan">青</lay-badge>
+    <lay-badge  theme="blue">蓝</lay-badge>
+    <lay-badge  theme="black">黑</lay-badge>
+    <lay-badge  theme="gray">灰</lay-badge>
+    <lay-badge type="rim">6</lay-badge>
+    <lay-badge type="rim">Hot</lay-badge>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

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

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

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

@@ -0,0 +1,23 @@
+::: demo
+
+<template>
+  <lay-layout>
+    <lay-header></lay-header>
+    <lay-side></lay-side>
+    <lay-body></lay-body>
+  </lay-layout>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -1,4 +1,6 @@
 <template>
+
+  <div class="width:100%;height:300px">
       <lay-layout>
     <lay-header>
       <lay-logo>
@@ -13,6 +15,8 @@
         <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>
       </ul>
     </lay-side>
     <lay-body>
@@ -22,6 +26,7 @@
     </lay-body>
     <lay-footer></lay-footer>
   </lay-layout>
+  </div>
 </template>
 <script>
 import { ref } from 'vue'

docs/src/router/zh-CN.ts

@@ -20,6 +20,11 @@ const zhCN = [
     component: BaseLayout,
     meta: { title: '组件', icon: 'el-icon-copy-document' },
     children: [
+      {
+        path: '/zh-CN/components/layout',
+        component: () => import('../../docs/zh-CN/components/layout.md'),
+        meta: { title: '布局' },
+      },
       {
         path: '/zh-CN/components/button',
         component: () => import('../../docs/zh-CN/components/button.md'),
@@ -40,6 +45,15 @@ const zhCN = [
         path: '/zh-CN/components/grid',
         component: () => import('../../docs/zh-CN/components/grid.md'),
         meta: { title: '栅格' },
+      },{
+        path: '/zh-CN/components/form',
+        component: () => import('../../docs/zh-CN/components/form.md'),
+        meta: { title: '表单' },
+      },
+      {
+        path: '/zh-CN/components/badge',
+        component: () => import('../../docs/zh-CN/components/badge.md'),
+        meta: { title: '徽章' },
       }
     ],
   },

src/index.ts

@@ -19,6 +19,8 @@ import LayPanel from "./module/panel/index"
 import LayProgress from "./module/panel/index"
 import LayCol from "./module/col/index"
 import LayRow from "./module/row/index"
+import LayInput from "./module/input/index"
+import LayBadge from "./module/badge/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -37,6 +39,8 @@ const components: Record<string, IDefineComponent> = {
   LayButtonContainer,
   LayRow,
   LayCol,
+  LayInput,
+  LayBadge
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -66,6 +70,8 @@ export {
   LayButtonContainer,
   LayRow,
   LayCol,
+  LayInput,
+  LayBadge,
   install,
 }
 

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

src/module/badge/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <span :class="classList" :style="styleList">
+        <slot v-if="type != 'dot'"></slot>
+    </span>
+</template>
+
+<script setup name="LayBadge" lang="ts">
+import { defineProps } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+   	type: string
+	theme: string
+	color: string
+  }>()
+
+const classList = [{
+				    'layui-badge': !props.type,
+                    'layui-badge-dot': props.type == 'dot',
+                    'layui-badge-rim': props.type == 'rim',
+                },
+				'layui-bg-' + props.theme];
+
+const styleList = props.color ? 'background-color: ' + props.color : '';
+
+</script>

src/module/icon/index.vue

@@ -2,7 +2,9 @@
     <i class="layui-icon" :class="[type]"></i>
 </template>
 
-<script setup name="LayButton" lang="ts">
+<script setup name="LayIcon" lang="ts">
+import { defineProps } from '@vue/runtime-core'
+
 const props =
   defineProps<{
     type?: string

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

src/module/input/index.vue

@@ -0,0 +1,12 @@
+<template>
+    <input type="text" class="layui-input" />
+</template>
+
+<script setup name="LayInput" lang="ts">
+import { defineProps } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+    type?: string
+  }>()
+</script>