You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.2 KiB
64 lines
1.2 KiB
<template> |
|
<div class="header-search"> |
|
<a-icon type="search" class="search-icon" @click="enterSearchMode"/> |
|
<a-auto-complete |
|
ref="input" |
|
:dataSource="dataSource" |
|
:class="['search-input', searchMode ? 'enter' : 'leave']" |
|
placeholder="站内搜索" |
|
@blur="leaveSearchMode" |
|
> |
|
</a-auto-complete> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'HeaderSearch', |
|
data () { |
|
return { |
|
dataSource: ['选项一', '选项二'], |
|
searchMode: false |
|
} |
|
}, |
|
methods: { |
|
enterSearchMode () { |
|
this.searchMode = true |
|
setTimeout(() => this.$refs.input.focus(), 300) |
|
}, |
|
leaveSearchMode () { |
|
this.searchMode = false |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.header-search{ |
|
.search-icon{ |
|
font-size: 16px; |
|
cursor: pointer; |
|
} |
|
.search-input{ |
|
border: 0; |
|
border-bottom: 1px solid @border-color-split; |
|
transition: width 0.3s ease-in-out; |
|
input{ |
|
border: 0; |
|
box-shadow: 0 0 0 0; |
|
} |
|
&.leave{ |
|
width: 0px; |
|
input{ |
|
display: none; |
|
} |
|
} |
|
&.enter{ |
|
width: 200px; |
|
input:focus{ |
|
box-shadow: 0 0 0 0; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|