feat(Search): 增加悬浮发光效果

Author: CoderTongxin

packages/devui-vue/devui/search/src/composables/use-search-class.ts

@@ -24,12 +24,13 @@ export const useSearchClass = (props: SearchProps, isFocus: Ref<boolean>): UseSe
     [ns.m('focus')]: isFocus.value,
     [ns.m('disabled')]: props.disabled,
     [ns.m('no-border')]: props.noBorder,
+    [ns.m('glow-style')]: props.showGlowStyle,
     [ns.m(searchSize.value)]: !!searchSize.value,
     [ns.m(props.iconPosition)]: ICON_POSITION[props.iconPosition],
   }));
 
   return {
     rootClass,
-    searchSize
+    searchSize,
   };
 };

packages/devui-vue/devui/search/src/search-types.ts

@@ -5,7 +5,7 @@ export type IconPosition = 'right' | 'left';
 
 export const searchProps = {
   size: {
-    type: String as PropType<Size>
+    type: String as PropType<Size>,
   },
   placeholder: {
     type: String,
@@ -51,6 +51,10 @@ export const searchProps = {
     type: Function as PropType<(v: string) => void>,
     default: undefined,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type SearchProps = ExtractPropTypes<typeof searchProps>;

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

@@ -4,9 +4,11 @@
 
 .#{$devui-prefix}-search {
   position: relative;
+  border-radius: $devui-border-radius;
+  transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
   @include flex;
 
-  &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):hover {
+  &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):not(.#{$devui-prefix}-search--glow-style):hover {
     .#{$devui-prefix}-input {
       border-color: $devui-form-control-line-hover;
     }
@@ -99,6 +101,15 @@
     top: 0;
   }
 
+  &--glow-style {
+    &:not(.#{$devui-prefix}-search--disabled) {
+      &:hover,
+      &.#{$devui-prefix}-search--focus {
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      }
+    }
+  }
+
   &--sm {
     .#{$devui-prefix}-input {
       height: $devui-size-sm;

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

@@ -46,6 +46,7 @@ export default defineComponent({
         maxlength: props.maxLength,
         modelValue: keywords.value,
         placeholder: props.placeholder || t('placeholder'),
+        showGlowStyle: false,
         onKeydown: onInputKeydown,
         'onUpdate:modelValue': onInputUpdate,
         onFocus: onFocus,

packages/devui-vue/docs/components/search/index.md

@@ -107,6 +107,7 @@ export default defineComponent({
 | icon-position   | [IconPositionType](#iconpositiontype) | 'right' | 可选，搜索图标位置 | [搜索图标左置](#搜索图标左置) |
 | no-border       | `boolean`                             | false   | 可选，是否显示边框                             | [无边框](#无边框)             |
 | css-class       | `string`                              | ''      | 可选，支持传入类名到输入框上                   | [双向绑定](#双向绑定)         |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### Search 事件
 
@@ -123,6 +124,7 @@ type SearchSizeType = 'sm' | 'md' | 'lg';
 ```
 
 #### IconPositionType
+
 ```ts
 type IconPositionType = 'right' | 'left';
 ```