SearchInput.vue
2.64 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
117
118
119
120
121
122
123
<template>
<section class="menu-search-input" @Click="handleClick" :class="searchClass">
<a-input-search
placeholder="菜单搜索"
class="menu-search-input__search"
allowClear
@change="handleChange"
:disabled="collapsed"
/>
</section>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, computed } from 'vue';
import { MenuThemeEnum } from '/@/enums/menuEnum';
// hook
import { useDebounce } from '/@/hooks/core/useDebounce';
//
export default defineComponent({
name: 'BasicMenuSearchInput',
props: {
// 是否展开,用于左侧菜单
collapsed: {
type: Boolean as PropType<boolean>,
default: true,
},
theme: {
type: String as PropType<MenuThemeEnum>,
},
},
setup(props, { emit }) {
function emitChange(value?: string): void {
emit('change', value);
}
const [debounceEmitChange] = useDebounce(emitChange, 200);
/**
* @description: 搜索
*/
function handleChange(e: ChangeEvent): void {
const { collapsed } = props;
if (collapsed) {
return;
}
debounceEmitChange(e.target.value);
}
/**
* @description: 点击时间
*/
function handleClick(): void {
emit('click');
}
const searchClass = computed(() => {
return props.theme ? `menu-search-input__search--${props.theme}` : '';
});
return { handleClick, searchClass, handleChange };
},
});
</script>
<style lang="less">
@import (reference) '../../../design/index.less';
// 输入框背景颜色 深
@input-dark-bg-color: #516085;
@icon-color: #c0c4cc;
.menu-search-input {
margin: 12px 9px;
&__search--dark {
// .setPlaceholder('.ant-input',#fff);
.ant-input {
.set-bg();
&:hover,
&:focus {
.hide-outline();
}
}
.ant-input-search-icon,
.ant-input-clear-icon {
color: rgba(255, 255, 255, 0.6) !important;
}
.ant-input-clear-icon {
color: rgba(255, 255, 255, 0.3) !important;
}
}
&__search--light {
.ant-input {
color: @text-color-base;
background: #fff;
border: 0;
outline: none;
&:hover,
&:focus {
.hide-outline();
}
}
.ant-input-search-icon {
color: @icon-color;
}
}
}
.set-bg() {
color: #fff;
background: @input-dark-bg-color;
border: 0;
outline: none;
}
.hide-outline() {
border: none;
outline: none;
box-shadow: none;
}
</style>