[新增] select 组件, 待完善

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

@@ -18,6 +18,26 @@ export default {
 
 :::
 
+::: demo
+
+<template>
+  <lay-field title="标题">内容</lay-field>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 |  |  |  |
 |--|--|--|
 | title | 标题 | -- |

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

@@ -193,3 +193,25 @@ export default {
 </script>
 
 :::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-select></lay-select>
+  </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -82,7 +82,7 @@ export default {
       { id: 21, title: '手风琴',subTitle:"collapse" ,path: '/zh-CN/components/collapse' },
       { id: 22, title: '表格',subTitle:"table" ,path: '/zh-CN/components/table' },
       { id: 23, title: '头像',subTitle:"avatar" ,path: '/zh-CN/components/avatar' },
-      { id: 23, title: '字段',subTitle:"field" ,path: '/zh-CN/components/field' },
+      { id: 24, title: '字段',subTitle:"field" ,path: '/zh-CN/components/field' },
     ]
 
     const selected = ref(1)

src/index.ts

@@ -39,6 +39,7 @@ import LayForm from './module/form/index'
 import LayBreadcrumb from './module/breadcrumb/index'
 import LayBreadcrumbItem from './module/breadcrumbItem/index'
 import LayField from './module/field/index'
+import LaySelect from './module/select/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -76,7 +77,8 @@ const components: Record<string, IDefineComponent> = {
   LayBreadcrumb,
   LayBreadcrumbItem,
   LayAvatar,
-  LayField
+  LayField,
+  LaySelect
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -128,6 +130,7 @@ export {
   LayBreadcrumbItem,
   LayAvatar,
   LayField,
+  LaySelect,
   install,
 }
 

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

src/module/select/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <select name="city" lay-verify="required">
+    <option value=""></option>
+    <option value="0">北京</option>
+    <option value="1">上海</option>
+    <option value="2">广州</option>
+    <option value="3">深圳</option>
+    <option value="4">杭州</option>
+  </select>
+  <div class="layui-unselect layui-form-select" @click="open" :class="[openState?'layui-form-selected':'']">
+    <div class="layui-select-title">
+      <input
+        type="text"
+        placeholder="请选择"
+        value=""
+        readonly=""
+        class="layui-input layui-unselect"
+      /><i class="layui-edge"></i>
+    </div>
+    <dl class="layui-anim layui-anim-upbit" style="">
+      <dd lay-value="" class="layui-select-tips">请选择</dd>
+      <dd lay-value="0" class="layui-this">北京</dd>
+      <dd lay-value="1" class="">上海</dd>
+      <dd lay-value="2" class="">广州</dd>
+      <dd lay-value="3" class="">深圳</dd>
+      <dd lay-value="4" class="">杭州</dd>
+    </dl>
+  </div>
+</template>
+
+<script setup name="LaySelect" lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props =
+  defineProps<{
+    modelValue?: string
+  }>()
+
+const openState = ref(false)
+
+const open = function() {
+    openState.value = !openState.value
+}
+</script>