blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

refactor: refactor style and children components

Browse Source
This commit is contained in:
chenghx 2018-09-06 14:23:40 +08:00
parent 5d35737db5
commit cfd0b38a53
1 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/layout/HeaderSearch.vue
View File

@ -1,14 +1,13 @@
<template> <template>
<span class=""> <span class="header-search">
<a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/> <a-icon type="search" class="search-icon" @click="enterSearchMode"/>
<a-auto-complete <a-auto-complete
ref="input" ref="input"
:dataSource="dataSource" :dataSource="dataSource"
:class="[searchMode ? 'enterSearch' : 'leaveSearch']" :class="['search-input', searchMode ? 'enter' : 'leave']"
placeholder="站内搜索" placeholder="站内搜索"
@blur="leaveSearchMode" @blur="leaveSearchMode"
> >
<a-input style="" />
</a-auto-complete> </a-auto-complete>
</span> </span>
</template> </template>
@ -29,7 +28,7 @@ export default {
methods: { methods: {
enterSearchMode () { enterSearchMode () {
this.searchMode = true this.searchMode = true
this.$refs.input.focus() setTimeout(() => this.$refs.input.focus(), 300)
}, },
leaveSearchMode () { leaveSearchMode () {
this.searchMode = false this.searchMode = false
@ -38,35 +37,32 @@ export default {
} }
</script> </script>
<style scoped> <style lang="less">
.enterSearch { .header-search{
width: 225px; .search-icon{
border-bottom: 1px rgba(3, 5, 6, 0.23) solid; font-size: 16px;
transition: width 0.3s ease-in-out; cursor: pointer;
} }
.leaveSearch { .search-input{
width: 0px; border: 0;
border-bottom: 1px rgba(3, 5, 6, 0.23) solid; border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
} input{
.enterSearch input, .leaveSearch input { border: 0;
border: 0; box-shadow: 0 0 0 0;
} }
.enterSearch input:focus { &.leave{
border: 0; width: 0px;
box-shadow: 0 0 0 0; input{
} display: none;
.leaveSearch input{ }
width: 0px; }
border: 0; &.enter{
} width: 200px;
.fade-enter-active, .fade-leave-active { input:focus{
transition: width .3s; box-shadow: 0 0 0 0;
} }
.fade-enter{ }
width: 200px; }
}
.fade-leave{
width: 0px;
} }
</style> </style>