theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
0o张不歪o0
2022-07-18 17:00:30 +08:00
parent e0c2664bdf
commit 4a461ba4c6
8 changed files with 110 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
package/component/src/component/cascader/index.less
View File

@@ -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;

1
package/component/src/component/cascader/index.vue
View File

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

53
package/component/src/component/datePicker/index.less
View File

@@ -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");

3
package/component/src/component/datePicker/index.vue
View File

@@ -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"

18
package/component/src/component/select/index.less
View File

@@ -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;
}

2
package/component/src/component/select/index.vue
View File

@@ -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">