[新增] checkbox 组件 待完成 menu 组件

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

src/module/checkbox/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <span @click="handleClick">
+    <input type="checkbox" :name="name" title="写作" :value="label" />
+    <div
+      class="layui-unselect"
+      :class="[
+        {
+          'layui-checkbox-disbaled layui-disabled': disabled,
+        },
+        'layui-form-checkbox',
+        hasValue ? 'layui-form-checked' : '',
+      ]"
+      :lay-skin="skin"
+    >
+      <span><slot></slot></span>
+      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
+      <i v-if="!skin" class="layui-icon layui-icon-ok"></i>
+    </div>
+  </span>
+</template>
+
+<script setup name="LayCheckbox" lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props =
+  defineProps<{
+    modelValue: Array<unknown>
+    label: string
+    disabled: boolean
+    name: string
+    skin: string
+  }>()
+
+const hasValue = ref(false)
+
+if (props.modelValue.includes(props.label)) {
+  hasValue.value = true
+} else {
+  hasValue.value = false
+}
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = function () {
+  if (!props.disabled) {
+    if (!props.modelValue.includes(props.label)) {
+      props.modelValue.push(props.label)
+    } else {
+      let index = props.modelValue.indexOf(props.label)
+      props.modelValue.splice(index, 1)
+    }
+    props.modelValue.includes(props.label)
+      ? (hasValue.value = true)
+      : (hasValue.value = false)
+    if (props.modelValue.includes(props.label)) {
+      hasValue.value = true
+    } else {
+      hasValue.value = false
+    }
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>

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

src/module/form/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <form class="layui-form">
+      <slot></slot>
+  </form>
+</template>
+
+<script setup name="LayForm" lang="ts">
+
+</script>

src/module/menuChildItem/index.vue

@@ -1,7 +1,14 @@
 <template>
-    <dd><a href="">选项</a></dd>
+  <dd>
+    <a href="">{{ title }}</a>
+  </dd>
 </template>
 
 <script setup name="LayMenuChildItem" lang="ts">
+import { defineProps } from 'vue'
 
+const props =
+  defineProps<{
+    title: string
+  }>()
 </script>

src/module/menuItem/index.vue

@@ -1,11 +1,17 @@
 <template>
     <li class="layui-nav-item">
-         <a href="">{{title}}</a>
+        <a href="">{{title}}
+            <i class="layui-icon layui-icon-down layui-nav-more" v-if="slots.default"></i>
+        </a>
+        <dl class="layui-nav-child" v-if="slots.default">
+            <slot></slot>
+        </dl>
     </li>
 </template>
 
 <script setup name="LayMenuItem" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, useSlots } from 'vue'
+const slots = useSlots();
 
 const props =
   defineProps<{