(component): 优化 input 与 switch 组件 disabled 禁用样式

This commit is contained in:
就眠儀式 2022-10-24 09:23:37 +08:00
parent 8124719af0
commit 5646ae298e
9 changed files with 29 additions and 8 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -110,3 +110,8 @@
.layui-switch-disabled {
opacity: 0.7;
}
.layui-switch-disabled,
.layui-switch-disabled *{
cursor: not-allowed !important;
}

View File

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

View File

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

View File

@ -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: "标签输入框",