✨(component): 优化 input 与 switch 组件 disabled 禁用样式
This commit is contained in:
parent
8124719af0
commit
5646ae298e
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:size="size"
|
:size="size"
|
||||||
:class="['layui-cascader', { 'layui-cascader-opend': openState }]"
|
:class="['layui-cascader', { 'layui-cascader-opend': openState, 'layui-disabled': disabled }]"
|
||||||
>
|
>
|
||||||
<lay-dropdown
|
<lay-dropdown
|
||||||
ref="dropdownRef"
|
ref="dropdownRef"
|
||||||
|
@ -411,7 +411,7 @@ function hex2rgba(s: any) {
|
|||||||
:contentStyle="contentStyle"
|
:contentStyle="contentStyle"
|
||||||
updateAtScroll
|
updateAtScroll
|
||||||
>
|
>
|
||||||
<div class="layui-unselect layui-colorpicker">
|
<div class="layui-unselect layui-colorpicker" :class="[{'layui-disabled': disabled}]">
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
class="layui-colorpicker-trigger-span"
|
class="layui-colorpicker-trigger-span"
|
||||||
|
@ -146,7 +146,7 @@ const searchList = (str: string, container: any) => {
|
|||||||
updateAtScroll
|
updateAtScroll
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
|
class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split" :class="[{'layui-disabled': disabled}]"
|
||||||
>
|
>
|
||||||
<div class="layui-inline layui-iconpicker-main">
|
<div class="layui-inline layui-iconpicker-main">
|
||||||
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
||||||
|
@ -68,7 +68,7 @@
|
|||||||
|
|
||||||
.layui-input:hover,
|
.layui-input:hover,
|
||||||
.layui-input:focus-within {
|
.layui-input:focus-within {
|
||||||
border-color: #d2d2d2 !important;
|
border-color: #d2d2d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-input-clear,
|
.layui-input-clear,
|
||||||
@ -107,6 +107,15 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-input-disabled {
|
||||||
|
border-color: var(--input-border-color)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-input-disabled,
|
||||||
|
.layui-input-disabled * {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-input{
|
.layui-input{
|
||||||
&[size="lg"] {
|
&[size="lg"] {
|
||||||
.set-size(@input-lg);
|
.set-size(@input-lg);
|
||||||
|
@ -121,7 +121,7 @@ const onCompositionend = (event: Event) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const classes = computed(() => {
|
const classes = computed(() => {
|
||||||
return { "layui-disabled": props.disabled };
|
return { "layui-input-disabled": props.disabled, 'layui-input-has-prefix': slots.prefix || props.prefixIcon };
|
||||||
});
|
});
|
||||||
|
|
||||||
const showPassword = () => {
|
const showPassword = () => {
|
||||||
@ -136,7 +136,7 @@ const showPassword = () => {
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="layui-input"
|
class="layui-input"
|
||||||
:class="{ 'layui-input-has-prefix': slots.prefix || props.prefixIcon }"
|
:class="classes"
|
||||||
:size="size"
|
:size="size"
|
||||||
>
|
>
|
||||||
<div class="layui-input-prepend" v-if="slots.prepend">
|
<div class="layui-input-prepend" v-if="slots.prepend">
|
||||||
@ -161,7 +161,6 @@ const showPassword = () => {
|
|||||||
:autocomplete="autocomplete"
|
:autocomplete="autocomplete"
|
||||||
:maxlength="maxlength"
|
:maxlength="maxlength"
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
:class="classes"
|
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
@focus="onFocus"
|
@focus="onFocus"
|
||||||
|
@ -110,3 +110,8 @@
|
|||||||
.layui-switch-disabled {
|
.layui-switch-disabled {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-switch-disabled,
|
||||||
|
.layui-switch-disabled *{
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
@ -71,7 +71,6 @@ const styles = computed(() => {
|
|||||||
class="layui-unselect layui-form-switch"
|
class="layui-unselect layui-form-switch"
|
||||||
:style="styles"
|
:style="styles"
|
||||||
:class="{
|
:class="{
|
||||||
'layui-disabled': disabled,
|
|
||||||
'layui-form-onswitch': isActive,
|
'layui-form-onswitch': isActive,
|
||||||
'layui-switch-disabled': disabled,
|
'layui-switch-disabled': disabled,
|
||||||
}"
|
}"
|
||||||
|
@ -61,6 +61,7 @@ import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
|
|||||||
import LayTab from "./component/tab/index";
|
import LayTab from "./component/tab/index";
|
||||||
import LayTabItem from "./component/tabItem/index";
|
import LayTabItem from "./component/tabItem/index";
|
||||||
import LayTree from "./component/tree/index";
|
import LayTree from "./component/tree/index";
|
||||||
|
import LayTreeSelect from "./component/treeSelect/index";
|
||||||
import LayTable from "./component/table/index";
|
import LayTable from "./component/table/index";
|
||||||
import LayPage from "./component/page/index";
|
import LayPage from "./component/page/index";
|
||||||
import LayTransfer from "./component/transfer/index";
|
import LayTransfer from "./component/transfer/index";
|
||||||
@ -180,6 +181,7 @@ const components: Record<string, Plugin> = {
|
|||||||
LaySpace,
|
LaySpace,
|
||||||
LayTag,
|
LayTag,
|
||||||
LayTagInput,
|
LayTagInput,
|
||||||
|
LayTreeSelect
|
||||||
};
|
};
|
||||||
|
|
||||||
const install = (app: App, options?: InstallOptions): void => {
|
const install = (app: App, options?: InstallOptions): void => {
|
||||||
@ -276,6 +278,7 @@ export {
|
|||||||
LaySpace,
|
LaySpace,
|
||||||
LayTag,
|
LayTag,
|
||||||
LayTagInput,
|
LayTagInput,
|
||||||
|
LayTreeSelect,
|
||||||
install,
|
install,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -185,6 +185,12 @@ const menus = [
|
|||||||
subTitle: "select",
|
subTitle: "select",
|
||||||
path: "/zh-CN/components/select",
|
path: "/zh-CN/components/select",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 39,
|
||||||
|
title: "树选择",
|
||||||
|
subTitle: "treeSelect",
|
||||||
|
path: "/zh-CN/components/treeSelect",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 39,
|
id: 39,
|
||||||
title: "标签输入框",
|
title: "标签输入框",
|
||||||
|
Loading…
Reference in New Issue
Block a user