🌀(component): input select cascader datepicker加入size属性

package/component/src/component/cascader/index.vue

@@ -14,6 +14,7 @@
       v-if="!slots.default"
       :allow-clear="allowClear"
       @clear="onClear"
+      :size="size"
     ></lay-input>
     <slot v-else></slot>
 
@@ -74,6 +75,7 @@ export interface LayCascaderProps {
   onlyLastLevel?: boolean;
   replaceFields?: { label: string; value: string; children: string };
   allowClear?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
@@ -82,6 +84,7 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
   placeholder: "",
   onlyLastLevel: false,
   allowClear: false,
+  size:'md',
   replaceFields: () => {
     return {
       label: "label",
@@ -250,7 +253,7 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
   }
 };
 
-const displayValue = ref<string | number | null>(null);
+const displayValue = ref<string | number >('');
 const slots = useSlots();
 const dropdownRef = ref();
 const dropDownDisabled = ref(false);

package/component/src/component/datePicker/index.vue

@@ -15,6 +15,7 @@
         v-if="!range"
         @change="onChange"
         :allow-clear="!disabled && allowClear"
+        :size="size"
         @clear="
           dateValue = '';
           onChange();
@@ -29,6 +30,7 @@
           :disabled="disabled"
           @change="onChange"
           class="start-input"
+          :size="size"
         >
         </lay-input>
         <span class="range-separator">{{ rangeSeparator }}</span>
@@ -40,6 +42,7 @@
           :disabled="disabled"
           @change="onChange"
           class="end-input"
+          :size="size"
           @clear="
             dateValue = [];
             onChange();
@@ -130,6 +133,7 @@ export interface LayDatePickerProps {
   rangeSeparator?: string;
   readonly?: boolean;
   allowClear?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -141,6 +145,7 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   rangeSeparator: "至",
   readonly: false,
   allowClear: true,
+  size:'md',
 });
 
 const dropdownRef = ref(null);

package/component/src/component/input/index.less

@@ -3,6 +3,21 @@
   --input-border-color: var(--global-neutral-color-3);
 }
 
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+
+.set-size(@size) {
+  & {
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
 
 .layui-input {
   width: 100%;
@@ -82,3 +97,18 @@
 .layui-input input::-webkit-input-placeholder {
   line-height: 1.3;
 }
+
+.layui-input{
+  &[size="lg"] {
+    .set-size(@lg);
+  }
+  &[size="md"] {
+    .set-size(@md);
+  }
+  &[size="sm"] {
+    .set-size(@sm);
+  }
+  &[size="xs"] {
+    .set-size(@xs);
+  }
+}

package/component/src/component/input/index.vue

@@ -23,6 +23,7 @@ export interface LayInputProps {
   disabled?: boolean;
   readonly?: boolean;
   password?: boolean;
+  size?: "lg" | "md" | "sm" | "xs";
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   autofocus: false,
   password: false,
   modelValue: "",
+  size:'md',
 });
 
 interface InputEmits {
@@ -115,7 +117,7 @@ const showPassword = () => {
 </script>
 
 <template>
-  <div class="layui-input">
+  <div class="layui-input" :size="size">
     <div class="layui-input-prepend" v-if="slots.prepend">
       <slot name="prepend"></slot>
     </div>

package/component/src/component/select/index.less

@@ -1,5 +1,30 @@
 @import "../badge/index.less";
 @import "../checkbox/index.less";
+@import "../input/index.less";
+
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-badge:32px;
+@md-badge:26px;
+@sm-badge:20px;
+@xs-badge:14px;
+
+.set-size(@size,@badge-size) {
+  & {
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+    .layui-badge{
+      height: @badge-size;
+      line-height: @badge-size;
+      box-sizing: border-box;
+    }
+  }
+}
 
 dl.layui-anim-upbit > dd input[type="checkbox"] {
   display: none;
@@ -62,7 +87,9 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 .layui-form-select {
   position: relative;
 }
-
+.layui-select-title{
+  height: 100%;
+}
 .layui-select-title .layui-input {
   padding-left: 10px;
   padding-right: 30px;
@@ -155,4 +182,18 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   .layui-input-wrapper:focus-within {
     border-color: var(--input-border-color);
   }
-}
+}
+.layui-form-select{
+  &[size="lg"] {
+    .set-size(@lg,@lg-badge);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-badge);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-badge);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-badge);
+  }
+}

package/component/src/component/select/index.vue

@@ -30,6 +30,7 @@ export interface LaySelectProps {
     disabled: boolean;
     keyword: string;
   }[];
+  size?: "lg" | "md" | "sm" | "xs";
 }
 
 const selectRef = shallowRef<undefined | HTMLElement>(undefined);
@@ -46,6 +47,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   showEmpty: true,
   multiple: false,
   create: false,
+  size:'md',
 });
 
 const openState = ref(false);
@@ -173,6 +175,7 @@ provide("keyword", txt);
     ref="selectRef"
     class="layui-unselect layui-form-select"
     :class="{ 'layui-form-selected': openState }"
+    :size='size'
   >
     <div class="layui-select-title" @click="open">
       <input

package/document-component/src/document/zh-CN/components/cascader.md

@@ -699,6 +699,7 @@ const options3=[
 | onlyLastLevel            | 回显display仅显示最后一级，默认为 `false`  |
 | replaceFields            | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例  |
 | allow-clear              | 默认slot提供清空功能，与lay-input保持一致|
+| size                     | 尺寸参数，与lay-input保持一致|
 :::
 
 ::: title Cascader 事件

package/document-component/src/document/zh-CN/components/datePicker.md

@@ -262,7 +262,7 @@ const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 | simple      | 一次性选择，无需点击确认按钮             | `boolean`         | false    | —             |
 | readonly      | 只读             | `boolean`         | false    | —             |
 | allowClear    | 允许清空             | `boolean`         | true    | —             |
-
+| size    | 尺寸            | `string`         | `lg` `md` `sm` `xs`    | `md`            |
 
 :::
 

package/document-component/src/document/zh-CN/components/input.md

@@ -243,6 +243,25 @@ export default {
 
 :::
 
+::: title 尺寸Size
+:::
+
+::: demo
+
+<template>
+  <div>
+      <lay-input size="lg" placeholder='lg'></lay-input>
+      <lay-input size="md" placeholder='md' style='margin-top:10px'></lay-input>
+      <lay-input size="sm" placeholder='sm' style='margin-top:10px'></lay-input>
+      <lay-input size="xs" placeholder='xs' style='margin-top:10px'></lay-input>
+    </div>
+</template>
+
+<script>
+</script>
+
+:::
+
 ::: title Input 属性
 :::
 
@@ -261,6 +280,7 @@ export default {
 | prefix-icon              | 前置图标              | --             |
 | suffix-icon              | 后置图标              | --             |
 | password                 | 开启密码显示隐藏       | `true` `false`|
+| size                     | 尺寸       | `lg` `md` `sm` `xs`，默认`md`|
 
 :::
 

package/document-component/src/document/zh-CN/components/select.md

@@ -310,6 +310,7 @@ export default {
 | showEmpty    | 是否增加空提示选项     | `boolean`                  | `true` `false` | `true` |
 | multiple     | 是否为多选            | `boolean`                  | `true` `false` | `false` |
 | create       | 是否允许创建            | `boolean`                  | `true` `false` | `false` |
+| size         | 尺寸            | `string`                  | `lg` `md` `sm` `xs`| `md` |
 
 
 :::