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
Show Stats 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">

1
package/document-component/src/assets/css/index.css
View File

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

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

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