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