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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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