| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 陈 | 2 | <section class="menu-search-input" @Click="handleClick" :class="searchClass"> |
| 3 | <a-input-search | |
| 962f90 | 4 | :placeholder="t('component.menu.search')" |
| 2f6253 | 5 | class="menu-search-input__search" |
| 陈 | 6 | allowClear |
| 7 | @change="handleChange" | |
| 8 | /> | |
| 9 | </section> | |
| 10 | </template> | |
| 11 | <script lang="ts"> | |
| 12 | import type { PropType } from 'vue'; | |
| 13 | import { defineComponent, computed } from 'vue'; | |
| 46e087 | 14 | import { ThemeEnum } from '/@/enums/appEnum'; |
| 2f6253 | 15 | // hook |
| 陈 | 16 | import { useDebounce } from '/@/hooks/core/useDebounce'; |
| dc09de | 17 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 2f6253 | 18 | // |
| 陈 | 19 | export default defineComponent({ |
| 20 | name: 'BasicMenuSearchInput', | |
| 21 | props: { | |
| 96c10d | 22 | // Whether to expand, used in the left menu |
| 2f6253 | 23 | collapsed: { |
| 陈 | 24 | type: Boolean as PropType<boolean>, |
| 25 | default: true, | |
| 26 | }, | |
| 27 | theme: { | |
| 46e087 | 28 | type: String as PropType<ThemeEnum>, |
| 2f6253 | 29 | }, |
| 陈 | 30 | }, |
| 31 | setup(props, { emit }) { | |
| 962f90 | 32 | const { t } = useI18n(); |
| dc09de | 33 | |
| 96c10d | 34 | const [debounceEmitChange] = useDebounce(emitChange, 200); |
| V | 35 | |
| 2f6253 | 36 | function emitChange(value?: string): void { |
| 陈 | 37 | emit('change', value); |
| 38 | } | |
| 96c10d | 39 | |
| 2f6253 | 40 | function handleChange(e: ChangeEvent): void { |
| 陈 | 41 | const { collapsed } = props; |
| 96c10d | 42 | if (collapsed) return; |
| 2f6253 | 43 | debounceEmitChange(e.target.value); |
| 陈 | 44 | } |
| 96c10d | 45 | |
| 2f6253 | 46 | function handleClick(): void { |
| 陈 | 47 | emit('click'); |
| 48 | } | |
| 96c10d | 49 | |
| 2f6253 | 50 | const searchClass = computed(() => { |
| 96c10d | 51 | const cls: string[] = []; |
| V | 52 | cls.push(props.theme ? `menu-search-input__search--${props.theme}` : ''); |
| e79e54 | 53 | cls.push(props.collapsed ? 'hide-search-icon' : ''); |
| 96c10d | 54 | return cls; |
| 2f6253 | 55 | }); |
| 陈 | 56 | |
| dc09de | 57 | return { handleClick, searchClass, handleChange, t }; |
| 2f6253 | 58 | }, |
| 陈 | 59 | }); |
| 60 | </script> | |
| 61 | <style lang="less"> | |
| 62 | @import (reference) '../../../design/index.less'; | |
| 63 | // 输入框背景颜色 深 | |
| 64 | @input-dark-bg-color: #516085; | |
| 65 | ||
| 66 | @icon-color: #c0c4cc; | |
| 67 | ||
| 68 | .menu-search-input { | |
| 96c10d | 69 | margin: 12px 8px; |
| V | 70 | |
| e79e54 | 71 | &.hide-search-icon { |
| V | 72 | .ant-input, |
| 73 | .ant-input-suffix { | |
| 74 | opacity: 0; | |
| 75 | transition: all 0.5s; | |
| 76 | } | |
| 77 | } | |
| 2f6253 | 78 | |
| 陈 | 79 | &__search--dark { |
| 2407b3 | 80 | .ant-input-affix-wrapper, |
| 2f6253 | 81 | .ant-input { |
| 陈 | 82 | .set-bg(); |
| 83 | } | |
| 84 | ||
| 85 | .ant-input-search-icon, | |
| 86 | .ant-input-clear-icon { | |
| 96c10d | 87 | color: rgba(255, 255, 255, 0.4) !important; |
| 2f6253 | 88 | } |
| 陈 | 89 | } |
| 90 | ||
| 91 | &__search--light { | |
| 2407b3 | 92 | .ant-input-affix-wrapper, |
| 2f6253 | 93 | .ant-input { |
| 陈 | 94 | color: @text-color-base; |
| 95 | background: #fff; | |
| 96 | outline: none; | |
| 97 | } | |
| 98 | ||
| 99 | .ant-input-search-icon { | |
| 100 | color: @icon-color; | |
| 101 | } | |
| 102 | } | |
| 103 | } | |
| 104 | ||
| 105 | .set-bg() { | |
| 106 | color: #fff; | |
| 7692ff | 107 | background: @sider-dark-lighten-1-bg-color; |
| 2f6253 | 108 | border: 0; |
| 陈 | 109 | outline: none; |
| 110 | } | |
| 111 | .hide-outline() { | |
| 112 | border: none; | |
| 113 | outline: none; | |
| 114 | box-shadow: none; | |
| 115 | } | |
| 116 | </style> | |
