🌀(component): 统一form表单组件 默认width

package/component/src/component/cascader/index.less

@@ -1,5 +1,38 @@
+@import "../input/index.less";
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+
+@lg-width: 300px;
+@md-width: 260px;
+@sm-width: 220px;
+@xs-width: 180px;
+
+.set-size(@size, @width) {
+  & {
+    height: @size;
+    width: @width;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
 .layui-cascader {
-  position: relative;
+  &[size="lg"] {
+    .set-size(@lg,@lg-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-width);
+  }
 }
 .layui-cascader .layui-icon-down {
   transition: all 0.3s ease-in-out;

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

@@ -5,6 +5,7 @@
     :autoFitMinWidth="false"
     :updateAtScroll="true"
     :disabled="dropDownDisabled"
+    :size="size"
   >
     <lay-input
       v-model="displayValue"

package/component/src/component/datePicker/index.less

@@ -1,6 +1,59 @@
 @import "../dropdown/index.less";
 @import "../input/index.less";
 
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-width: 300px;
+@md-width: 260px;
+@sm-width: 220px;
+@xs-width: 180px;
+@lg-range-width: 600px;
+@md-range-width: 520px;
+@sm-range-width: 440px;
+@xs-range-width: 360px;
+
+.set-size(@size,@width) {
+  & {
+    width: @width;
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
+.layui-date-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-width);
+  }
+}
+.layui-date-range-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-range-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-range-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-range-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-range-width);
+  }
+}
+
 @font-face {
   font-family: "laydate-icon";
   src: url("./font/iconfont.eot");

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

@@ -4,6 +4,9 @@
       ref="dropdownRef"
       :disabled="disabled"
       :autoFitMinWidth="false"
+      class="layui-date-picker"
+      :class="{'layui-date-range-picker':range}"
+      :size="size"
     >
       <lay-input
         :name="name"

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

@@ -10,9 +10,14 @@
 @md-badge:26px;
 @sm-badge:20px;
 @xs-badge:14px;
+@lg-width: 300px;
+@md-width: 260px;
+@sm-width: 220px;
+@xs-width: 180px;
 
-.set-size(@size,@badge-size) {
+.set-size(@size,@badge-size,@width) {
   & {
+    width: @width;
     height: @size;
     .layui-input {
       height: @size;
@@ -185,15 +190,18 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 }
 .layui-form-select{
   &[size="lg"] {
-    .set-size(@lg,@lg-badge);
+    .set-size(@lg, @lg-badge, @lg-width);
   }
   &[size="md"] {
-    .set-size(@md,@md-badge);
+    .set-size(@md, @md-badge, @md-width);
   }
   &[size="sm"] {
-    .set-size(@sm,@sm-badge);
+    .set-size(@sm, @sm-badge, @sm-width);
   }
   &[size="xs"] {
-    .set-size(@xs,@xs-badge);
+    .set-size(@xs, @xs-badge, @xs-width);
   }
 }
+.layui-form-select-multiple{
+  width: 100% !important;
+}

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

@@ -174,7 +174,7 @@ provide("keyword", txt);
   <div
     ref="selectRef"
     class="layui-unselect layui-form-select"
-    :class="{ 'layui-form-selected': openState }"
+    :class="{ 'layui-form-selected': openState,'layui-form-select-multiple':multiple }"
     :size='size'
   >
     <div class="layui-select-title" @click="open">

package/document-component/src/assets/css/index.css

@@ -35,6 +35,7 @@
   display: block;
   margin: -5px -15px;
   color: rgba(0, 0, 0, 0.8);
+  white-space: nowrap;
 }
 
 .theme-panel .layui-dropdown{

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

@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-cascader` 标签创建级联选择器
 
 <template>
-  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" allow-clear style="width:250px">
+  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" allow-clear>
   </lay-cascader>
   <span style="margin-left:20px">输出的值：{{value}}</span>
 </template>
@@ -297,7 +297,7 @@ const options = [
 :::
 ::: demo 使用 `decollator` 属性 自定义分割符号
 <template>
-  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" allow-clear style="width:250px"></lay-cascader>
+  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" allow-clear ></lay-cascader>
   <span style="margin-left:20px">输出的值：{{value1}}</span>
 </template>
 
@@ -311,7 +311,7 @@ const value1=ref(null)
 :::
 ::: demo 使用 `onlyLastLevel` 属性 可以仅在回显的displayValue显示选中项最后一级的标签，而不是完整路径, 注意绑定的v-model仍然是完整的。
 <template>
-  <lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" allow-clear placeholder="仅显示最后一级" style="width:250px"></lay-cascader>
+  <lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" allow-clear placeholder="仅显示最后一级" ></lay-cascader>
   <span style="margin-left:20px">输出的值：{{valueLv}}</span>
 </template>
 
@@ -327,7 +327,7 @@ const valueLv=ref(null)
 <template>
   <lay-cascader :options="options"  placeholder="click触发(默认)" style="width:250px;margin-right:20px"></lay-cascader>
   <lay-cascader :options="options"  placeholder="hover触发" style="width:250px;margin-right:20px" trigger="hover"></lay-cascader>
-  <lay-cascader :options="options"  placeholder="右键触发" style="width:250px" trigger="contextMenu"></lay-cascader>
+  <lay-cascader :options="options"  placeholder="右键触发"  trigger="contextMenu"></lay-cascader>
 </template>
 :::