<template>
|
<span 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>
|
</span>
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
@Component({})
|
export default class HeaderSearch extends Vue {
|
|
private dataSource: string[] = ['选项一', '选项二'];
|
private searchMode: boolean = false;
|
|
private enterSearchMode() {
|
this.searchMode = true;
|
const input: any = this.$refs.input;
|
setTimeout(() => input.focus(), 300);
|
}
|
private leaveSearchMode() {
|
this.searchMode = false;
|
}
|
}
|
</script>
|
|
|
<style lang="less">
|
.header-search{
|
.search-icon{
|
font-size: 16px;
|
cursor: pointer;
|
color:#ffffff
|
}
|
.search-input{
|
border: 0;
|
border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
|
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>
|
