feat: ✨ grid-item添加hover-class (#994)

Author: RJQingHuan

docs/component/grid.md

@@ -9,7 +9,7 @@
 `icon` 为 `wd-icon` 标签中的 `name` 属性。
 
 ```html
-<wd-grid>
+<wd-grid clickable>
   <wd-grid-item icon="picture" text="文字" />
   <wd-grid-item icon="picture" text="文字" />
   <wd-grid-item icon="picture" text="文字" />
@@ -221,14 +221,15 @@
 
 ## Grid Attributes
 
-| 参数      | 说明                           | 类型    | 可选值 | 默认值  | 最低版本 |
-| --------- | ------------------------------ | ------- | ------ | ------- | -------- |
-| column    | 列数                           | number  | -      | -       | -        |
-| border    | 是否显示边框                   | boolean | -      | false   | -        |
-| gutter    | 格子之间的间距，默认单位为`px` | number  | -      | -       | -        |
-| square    | 是否将格子固定为正方形         | boolean | -      | false   | -        |
-| clickable | 是否开启格子点击反馈           | boolean | -      | false   | -        |
-| bg-color  | 背景颜色设置                   | string  | -      | #ffffff | -        |
+| 参数        | 说明                           | 类型    | 可选值 | 默认值                       | 最低版本         |
+| ----------- | ------------------------------ | ------- | ------ | ---------------------------- | ---------------- |
+| column      | 列数                           | number  | -      | -                            | -                |
+| border      | 是否显示边框                   | boolean | -      | false                        | -                |
+| gutter      | 格子之间的间距，默认单位为`px` | number  | -      | -                            | -                |
+| square      | 是否将格子固定为正方形         | boolean | -      | false                        | -                |
+| clickable   | 是否开启格子点击反馈           | boolean | -      | false                        | -                |
+| bg-color    | 背景颜色设置                   | string  | -      | #ffffff                      | -                |
+| hover-class | 指定grid-item按下去的样式类    | string  | -      | wd-grid-item__content--hover | $LOWEST_VERSION$ |
 
 ## GridItem Attributes
 
@@ -246,12 +247,12 @@
 | use-icon-slot | 是否开启 `GridItem` icon 插槽                                                                                             | boolean        | -                                           | false  | -        |
 | use-text-slot | 是否开启 `GridItem` text 内容插槽                                                                                         | boolean        | -                                           | false  | -        |
 | icon-size     | 图标大小                                                                                                                  | string         | -                                           | 26px   | -        |
-| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes)	| BadgeProps    | -      | -  | 0.1.50   |
+| badge-props   | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes)                                  | BadgeProps     | -                                           | -      | 0.1.50   |
 
 ## GridItem Events
 
-| 方法名         | 说明           | 参数  | 返回值 | 最低版本 |
-| -------------- | -------------- | ----- | ------ | -------- |
+| 方法名    | 说明           | 参数  | 返回值 | 最低版本 |
+| --------- | -------------- | ----- | ------ | -------- |
 | itemclick | 点击(跳转)事件 | event | -      | -        |
 
 ## Grid Slot

src/pages/grid/Index.vue

@@ -4,7 +4,7 @@
       <wd-toast />
       <view class="grid">
         <demo-block title="基本用法" transparent>
-          <wd-grid>
+          <wd-grid clickable>
             <wd-grid-item icon="picture" text="文字" />
             <wd-grid-item icon="picture" text="文字" />
             <wd-grid-item icon="picture" text="文字" />

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -684,6 +684,8 @@ $-grid-item-fs: var(--wot-grid-item-fs, 12px) !default; // 字号
 $-grid-item-bg: var(--wot-grid-item-bg, $-color-white) !default; // 字号
 $-grid-item-padding: var(--wot-grid-item-padding, 14px 0px) !default; // 内容的 padding
 $-grid-item-border-color: var(--wot-grid-item-border-color, $-color-border-light) !default; // 边框颜色
+$-grid-item-hover-bg: var(--wot-grid-item-hover-bg, $-color-gray-3) !default; // hover背景色
+$-grid-item-hover-bg-dark: var(--wot-grid-item-hover-bg-dark, $-color-gray-7) !default; // 暗黑模式hover背景色
 
 /* statustip */
 $-statustip-fs: var(--wot-statustip-fs, $-fs-content) !default; // 字号

src/uni_modules/wot-design-uni/components/wd-grid-item/index.scss

@@ -23,6 +23,10 @@
 
     @include e(content) {
       background-color: $-dark-background2;
+
+      @include m(hover) {
+        background-color: $-grid-item-hover-bg-dark !important;
+      }
     }
   }
 }
@@ -129,6 +133,10 @@
         box-sizing: border-box;
       }
     }
+
+    @include m(hover) {
+      background-color: $-grid-item-hover-bg !important;
+    }
   }
 
   @include e(text) {

src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue

@@ -1,6 +1,10 @@
 <template>
   <view :class="`wd-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`" @click="click" :style="`${style};${customStyle}`">
-    <view :class="`wd-grid-item__content ${square ? 'is-square' : ''} ${border && gutter > 0 ? 'is-round' : ''}`" :style="gutterContentStyle">
+    <view
+      :class="`wd-grid-item__content ${square ? 'is-square' : ''} ${border && gutter > 0 ? 'is-round' : ''}`"
+      :style="gutterContentStyle"
+      :hover-class="hoverClass"
+    >
       <slot v-if="useSlot" />
       <block v-else>
         <view :style="'width:' + iconSize + '; height: ' + iconSize" class="wd-grid-item__wrapper">
@@ -154,6 +158,13 @@ function setiIemClass(classes: string) {
   itemClass.value = classes
 }
 
+const hoverClass = computed(() => {
+  if (grid?.props.clickable) {
+    return grid.props.hoverClass ? grid.props.hoverClass : 'wd-grid-item__content--hover'
+  }
+  return 'none'
+})
+
 defineExpose({
   setiIemClass,
   itemClass,

src/uni_modules/wot-design-uni/components/wd-grid/types.ts

@@ -11,7 +11,15 @@ import { type ExtractPropTypes, type InjectionKey } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type GridProvide = {
-  props: { clickable?: boolean; square?: boolean; column?: number; border?: boolean; bgColor?: string; gutter?: number }
+  props: {
+    clickable?: boolean
+    square?: boolean
+    column?: number
+    border?: boolean
+    bgColor?: string
+    gutter?: number
+    hoverClass?: string
+  }
 }
 
 export const GRID_KEY: InjectionKey<GridProvide> = Symbol('wd-grid')
@@ -41,7 +49,11 @@ export const gridProps = {
   /**
    * 格子之间的间距，默认单位为px
    */
-  gutter: Number
+  gutter: Number,
+  /**
+   * 自定义内容区域hover-class
+   */
+  hoverClass: String
 }
 
 export type GridProps = ExtractPropTypes<typeof gridProps>