feat(web): select seleted option hover; table row highlight (#1604)

* feat(web): select seleted option hover * fix(web): table highlight row * fix(web): table row highlight * feat(web): cascader demo --------- Co-authored-by: sheepluo <sheepluo@tencent.com>
Tencent · Sep 24, 2023 · de01dcf · de01dcf
1 parent c00b493
commit de01dcf
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/docs/web/api/cascader.md b/docs/web/api/cascader.md
@@ -66,12 +66,18 @@ spline: form
 
 {{ value-mode }}
 
-### 自定义选项内容
+### 自定义下拉选项内容
 
-可以自定义选项的内容展示
+可以自定义下拉选项的内容展示
 
 {{ custom-options }}
 
+### 自定义选中项内容
+
+可以自定义输入框中显示的选中项内容展示
+
+{{ value-display }}
+
 ### 不同的触发方式
 
 可通过不同的触发方式来加载子菜单。

diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less
@@ -258,3 +258,11 @@
     }
   }
 }
+
+.@{prefix}-is-selected.@{prefix}-select-option__hover {
+  background-color: @brand-color-light-hover;
+
+  .@{prefix}-checkbox__label {
+    color: @select-selected-color;
+  }
+}
diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less
@@ -463,11 +463,6 @@
     color: @table-row-disabled-color;
   }
 
-  /** 表格行点击高亮 */
-  .@{prefix}-table__row--active {
-    background-color: @brand-color-light;
-  }
-
   // 复杂表头容器
   .@{prefix}-table__cell--title {
     display: flex;
@@ -500,15 +495,20 @@
 }
 
 /** 表格行点击高亮悬浮态 */
-.@{prefix}-table.@{prefix}-table--hoverable {
-  .@{prefix}-table__row--active {
-    &:hover {
-      background-color: @brand-color-light-hover;
-    }
+.@{prefix}-table.@{prefix}-table__row--active-single,
+.@{prefix}-table.@{prefix}-table__row--active-multiple {
+  tbody > tr.@{prefix}-table__row--active {
+    background-color: @brand-color-light;
   }
 
-  &.@{prefix}-table__row--active-multiple {
-    .@{prefix}-table__row--active.@{prefix}-table__row--hover {
+  tbody > tr.@{prefix}-table__row--active.@{prefix}-table__row--hover {
+    background-color: @brand-color-light-hover;
+  }
+}
+
+.@{prefix}-table.@{prefix}-table--hoverable {
+  tbody > tr.@{prefix}-table__row--active {
+    &:hover {
       background-color: @brand-color-light-hover;
     }
   }
@@ -520,7 +520,7 @@
   &.@{prefix}-table--row-select,
   &.@{prefix}-table__row--active-multiple {
     tbody > tr {
-      &.@{prefix}-table__row--hover:not(&.@{prefix}-table__row--active) {
+      &.@{prefix}-table__row--hover {
         background-color: @table-highlight-dark-bg-color;
       }
     }