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