feat: 输入类组件增加悬浮发光效果

Author: CoderTongxin

packages/devui-vue/devui/auto-complete/src/auto-complete.scss

@@ -135,11 +135,6 @@
     font-size: $devui-font-size-lg;
   }
 
-  &--glow-style:not(.#{$devui-prefix}-auto-complete--focus):not(.#{$devui-prefix}-auto-complete--disabled):not(.#{$devui-prefix}-auto-complete-input__wrapper--error):hover {
-    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
-    border-color: $devui-form-control-line;
-  }
-
   &__clear--icon {
     cursor: pointer;
   }
@@ -152,6 +147,13 @@
     box-sizing: border-box;
     height: 100%;
 
+    &:not(.#{$devui-prefix}-auto-complete--focus) {
+      .#{$devui-prefix}-auto-complete--glow-style:hover {
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+        border-color: $devui-form-control-line;
+      }
+    }
+
     &__wrapper {
       display: inline-flex;
       align-items: center;
@@ -211,6 +213,11 @@
     }
   }
 
+  &--glow-style:not(.#{$devui-prefix}-auto-complete--disabled):not(.#{$devui-prefix}-auto-complete-input__wrapper--error):hover {
+    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    border-color: $devui-form-control-line;
+  }
+
   &--focus {
     .#{$devui-prefix}-auto-complete-input__wrapper:not(.#{$devui-prefix}-auto-complete-input__wrapper--error) {
       border-color: $devui-form-control-line-active;
@@ -222,7 +229,7 @@
 
     .#{$devui-prefix}-auto-complete--glow-style:not(.#{$devui-prefix}-auto-complete-input__wrapper--error) {
       box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
-      border-color: $devui-form-control-line;
+      border-color: $devui-form-control-line-active;
     }
   }
 

packages/devui-vue/devui/button/src/button.scss

@@ -18,6 +18,7 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 }
 
 .#{$devui-prefix}-button {
+  position: relative;
   padding: $devui-btn-padding;
   font-size: $devui-font-size-md;
   height: $devui-size-md;
@@ -26,6 +27,22 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
   border-width: 1px;
   border-color: transparent;
   background-color: transparent;
+  overflow: hidden;
+
+  &.mousedown:not(:disabled) {
+    transform: scale(0.95);
+  }
+
+  .water-wave {
+    position: absolute;
+    background-color: $devui-base-bg;
+    border-radius: 50%;
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, -50%);
+    animation: waterWave $devui-animation-duration-slow $devui-animation-linear;
+  }
 
   &:hover {
     cursor: pointer;
@@ -320,8 +337,7 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 }
 
 .#{$devui-prefix}-button {
-  transition:
-    background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
+  transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
     border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
     color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
   white-space: nowrap;
@@ -397,7 +413,25 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 }
 
 @keyframes rotating {
-  0% { transform: rotate(0); }
+  0% {
+    transform: rotate(0);
+  }
 
-  100% { transform: rotate(180deg); }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes waterWave {
+  0% {
+    opacity: 0.2;
+    width: 30px;
+    height: 30px;
+  }
+
+  100% {
+    opacity: 0;
+    width: 200px;
+    height: 200px;
+  }
 }

packages/devui-vue/devui/button/src/button.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs } from 'vue';
+import { defineComponent, toRefs, ref, reactive } from 'vue';
 import type { SetupContext } from 'vue';
 import { Icon } from '../../icon';
 import LoadingDirective from '../../loading/src/loading-directive';
@@ -16,22 +16,45 @@ export default defineComponent({
   setup(props: ButtonProps, ctx: SetupContext) {
     const { icon, disabled, loading, nativeType } = toRefs(props);
     const { classes, iconClass } = useButton(props, ctx);
+    const isMouseDown = ref(false);
+    const showWave = ref(false);
+    const waveStyle = reactive({
+      top: '0px',
+      left: '0px',
+    });
 
+    const showClickWave = (e: MouseEvent) => {
+      waveStyle.left = e.offsetX + 'px';
+      waveStyle.top = e.offsetY + 'px';
+      showWave.value = true;
+
+      setTimeout(() => {
+        showWave.value = false;
+      }, 300);
+    };
     const onClick = (e: MouseEvent) => {
       if (loading.value) {
         return;
       }
+      showClickWave(e);
       ctx.emit('click', e);
     };
 
     return () => {
       return (
-        <button class={classes.value} disabled={disabled.value} onClick={onClick} type={nativeType.value}>
+        <button
+          class={[classes.value, isMouseDown.value ? 'mousedown' : '']}
+          disabled={disabled.value}
+          onClick={onClick}
+          type={nativeType.value}
+          onMousedown={() => (isMouseDown.value = true)}
+          onMouseup={() => (isMouseDown.value = false)}>
           {icon.value && <Icon name={icon.value} size="var(--devui-font-size, 12px)" color="" class={iconClass.value} />}
           <div class="loading-icon__container" v-show={loading.value}>
             <d-icon name="icon-loading" class="button-icon-loading" color="#BBDEFB"></d-icon>
           </div>
           <span class="button-content">{ctx.slots.default?.()}</span>
+          {showWave.value && <div class="water-wave" style={waveStyle}></div>}
         </button>
       );
     };

packages/devui-vue/devui/editable-select/src/composables/use-input-render.ts

@@ -25,6 +25,7 @@ export function useInputRender(props: EditableSelectProps, states: States): UseI
     [ns.e('wrapper')]: true,
     [ns.em('wrapper', 'focus')]: states.isFocus,
     [ns.em('wrapper', 'disabled')]: props.disabled,
+    [ns.em('wrapper', 'glow-style')]: props.showGlowStyle,
   }));
 
   const inputInnerClasses = computed(() => ({

packages/devui-vue/devui/editable-select/src/editable-select-types.ts

@@ -83,6 +83,10 @@ export const editableSelectProps = {
     type: Boolean,
     default: false,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type EditableSelectProps = ExtractPropTypes<typeof editableSelectProps>;

packages/devui-vue/devui/editable-select/src/editable-select.scss

@@ -32,14 +32,19 @@
       border: 1px solid $devui-form-control-line;
       border-radius: $devui-border-radius;
       background-color: $devui-form-control-bg;
-      transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
+      transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
       &:not(.#{$devui-prefix}-editable-select-input__wrapper--disabled):not(&--focus):hover {
         border-color: $devui-form-control-line-hover;
       }
 
       &--focus {
         border-color: $devui-form-control-line-active;
+
+        &.#{$devui-prefix}-editable-select-input__wrapper--glow-style {
+          box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+          border-color: $devui-form-control-line-active;
+        }
       }
 
       &--disabled {
@@ -57,6 +62,13 @@
           cursor: not-allowed;
         }
       }
+
+      &--glow-style {
+        &:not(.#{$devui-prefix}-editable-select-input__wrapper--disabled, .#{$devui-prefix}-editable-select-input__wrapper--focus):hover {
+          box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+          border-color: $devui-form-control-line !important;
+        }
+      }
     }
 
     &__inner {
@@ -93,11 +105,28 @@
         pointer-events: auto;
         display: flex;
         cursor: pointer;
+
+        svg {
+          path {
+            fill: $devui-shape-icon-fill;
+            transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
+          }
+
+          &:hover {
+            path {
+              fill: $devui-shape-icon-fill-hover;
+            }
+          }
+        }
       }
 
       .#{$devui-prefix}-editable-select__arrow-icon {
         display: flex;
         transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+
+        svg path {
+          fill: $devui-icon-text;
+        }
       }
     }
   }

packages/devui-vue/devui/editable-select/src/editable-select.tsx

@@ -5,9 +5,9 @@ import { onClickOutside } from '@vueuse/core';
 import type { SetupContext } from 'vue';
 import { editableSelectProps, EditableSelectProps, SELECT_KEY } from './editable-select-types';
 // 子组件
-import Icon from '../../icon/src/icon';
 import { FlexibleOverlay } from '../../overlay';
 import Dropdown from './components/dropdown/dropdown';
+import { SelectArrowIcon, InputClearIcon } from '../../svg-icons';
 // 工具函数
 import { useSelect, useSelectStates } from './composables/use-select';
 import { useKeyboardSelect } from './composables/use-keyboard-select';
@@ -143,10 +143,10 @@ export default defineComponent({
               />
               <span class={inputSuffixClasses.value}>
                 <span class={ns.e('clear-icon')} v-show={showClearable.value} onClick={withModifiers(handleClear, ['stop'])}>
-                  <Icon name="icon-remove" />
+                  <InputClearIcon />
                 </span>
                 <span class={ns.e('arrow-icon')} v-show={!showClearable.value}>
-                  <Icon name="select-arrow" />
+                  <SelectArrowIcon />
                 </span>
               </span>
             </div>

packages/devui-vue/devui/input-number/src/input-number-types.ts

@@ -23,7 +23,7 @@ export const inputNumberProps = {
     default: -Infinity,
   },
   size: {
-    type: String as PropType<ISize>
+    type: String as PropType<ISize>,
   },
   modelValue: {
     type: Number,
@@ -35,6 +35,10 @@ export const inputNumberProps = {
     type: [RegExp, String] as PropType<RegExp | string>,
     default: '',
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>;

packages/devui-vue/devui/input-number/src/input-number.scss

@@ -29,6 +29,56 @@
     }
   }
 
+  &.#{$devui-prefix}-input-number--glow-style {
+    &:hover {
+      .#{$devui-prefix}-input-number__input-box:not(.disabled) {
+        border-color: $devui-form-control-line;
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons:not(.disabled) {
+        border-color: $devui-form-control-line;
+      }
+
+      .#{$devui-prefix}-input-number__input-box--error:not(.disabled) {
+        border-color: $devui-danger-line;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons--error:not(.disabled) {
+        border-color: $devui-danger-line;
+        border-left-color: $devui-form-control-line-hover;
+
+        span {
+          background-color: $devui-danger-bg;
+        }
+      }
+    }
+
+    &:focus-within {
+      .#{$devui-prefix}-input-number__input-box:not(.disabled) {
+        border-color: $devui-form-control-line-active;
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons:not(.disabled) {
+        border-color: $devui-form-control-line-active;
+      }
+
+      .#{$devui-prefix}-input-number__input-box--error:not(.disabled) {
+        border-color: $devui-danger-line;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons--error:not(.disabled) {
+        border-color: $devui-danger-line;
+        border-left-color: $devui-form-control-line-hover;
+
+        span {
+          background-color: $devui-danger-bg;
+        }
+      }
+    }
+  }
+
   .#{$devui-prefix}-input-number__input-box {
     box-sizing: border-box;
     width: 100%;
@@ -42,7 +92,8 @@
     border: 1px solid $devui-form-control-line;
     cursor: text;
     -moz-appearance: textfield;
-    transition: border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+    transition: border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
+      box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
     &:not(.disabled) {
       background-color: $devui-base-bg;

packages/devui-vue/devui/input-number/src/use-input-number.ts

@@ -17,6 +17,7 @@ export function useRender(props: InputNumberProps, ctx: SetupContext): UseRender
   const wrapClass = computed(() => [
     {
       [ns.b()]: true,
+      [ns.m('glow-style')]: props.showGlowStyle,
       [ns.m(inputNumberSize.value)]: true,
     },
     customClass,