🌀(component): input select cascader datepicker加入size属性
This commit is contained in:
0o张不歪o0
parent
3b7e0ff326
commit
49e2d25d6d
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -699,6 +699,7 @@ const options3=[
|
||||
| onlyLastLevel | 回显display仅显示最后一级，默认为 `false` |
|
||||
| replaceFields | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例 |
|
||||
| allow-clear | 默认slot提供清空功能，与lay-input保持一致|
|
||||
| size | 尺寸参数，与lay-input保持一致|
|
||||
:::
|
||||
|
||||
::: title Cascader 事件
|
||||
|
||||
@ -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` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -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`|
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
|
||||
:::
|
||||
|
||||
Loading…
Reference in New Issue
Block a user