MojaveHao
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tree-menu): [tree-menu] resolve the issue of disabled treemenu components not taking effect (#1736)

This commit is contained in:
wuyiping0628 2024-07-26 02:14:18 -07:00 committed by GitHub
parent 4534d98cda
commit ca87faa0e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/theme/src/tree-menu/index.less
View File

@ -41,11 +41,13 @@
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.06);
border: 1px solid var(--ti-tree-menu-border-color); border: 1px solid var(--ti-tree-menu-border-color);
.tiny-svg { .tiny-svg {
margin-left: 2px; margin-left: 2px;
fill: var(--ti-tree-menu-collapse-icon-fill-color); fill: var(--ti-tree-menu-collapse-icon-fill-color);
} }
} }
&__expand { &__expand {
height: 64px; height: 64px;
display: flex; display: flex;
@ -65,37 +67,46 @@
&:hover { &:hover {
fill: var(--ti-tree-menu-collapse-icon-hover-color); fill: var(--ti-tree-menu-collapse-icon-hover-color);
} }
&:focus { &:focus {
fill: var(--ti-tree-menu-collapse-icon-hover-color); fill: var(--ti-tree-menu-collapse-icon-hover-color);
} }
} }
} }
&.is-collapsed { &.is-collapsed {
width: 0; width: 0;
.@{tree-menu-prefix-cls}__toggle-button { .@{tree-menu-prefix-cls}__toggle-button {
transform: translateX(70%) translateY(-50%); transform: translateX(70%) translateY(-50%);
.tiny-svg { .tiny-svg {
rotate: (180deg); rotate: (180deg);
} }
} }
.tiny-input { .tiny-input {
overflow: hidden; overflow: hidden;
.tiny-input-display-only { .tiny-input-display-only {
display: inline-block; display: inline-block;
width: 0; width: 0;
} }
} }
} }
&.is-expand { &.is-expand {
width: 40px; width: 40px;
.@{tree-menu-prefix-cls}__toggle-button { .@{tree-menu-prefix-cls}__toggle-button {
transform: translateX(70%) translateY(-50%); transform: translateX(70%) translateY(-50%);
.tiny-svg { .tiny-svg {
rotate: (180deg); rotate: (180deg);
} }
} }
.tiny-input { .tiny-input {
overflow: hidden; overflow: hidden;
.tiny-input-display-only { .tiny-input-display-only {
display: inline-block; display: inline-block;
width: 0; width: 0;
@ -122,6 +133,17 @@
.@{tree-prefix-cls} { .@{tree-prefix-cls} {
.@{tree-node-prefix-cls} { .@{tree-node-prefix-cls} {
&.is-disabled {
& > .@{tree-node-prefix-cls}__content a {
cursor: not-allowed;
.tree-node-name {
color: var(--ti-tree-menu-disabled-text-color);
font-weight: normal;
}
}
}
.@{tree-node-prefix-cls}__content { .@{tree-node-prefix-cls}__content {
height: var(--ti-tree-menu-node-height); height: var(--ti-tree-menu-node-height);
line-height: var(--ti-tree-menu-node-height); line-height: var(--ti-tree-menu-node-height);
@ -156,7 +178,6 @@
} }
} }
} }
.@{tree-node-prefix-cls}__content-number { .@{tree-node-prefix-cls}__content-number {
.tree-node-name { .tree-node-name {
padding-right: 0; padding-right: 0;

2
packages/theme/src/tree-menu/vars.less
View File

@ -43,4 +43,6 @@
--ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px); --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
// 前缀图标右边距 // 前缀图标右边距
--ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px); --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
// 禁用文本色
--ti-tree-menu-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
} }