|
@ -23,7 +23,7 @@ |
|
|
:style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}" |
|
|
:style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}" |
|
|
class="user-box" |
|
|
class="user-box" |
|
|
> |
|
|
> |
|
|
<i :style="{cursor:'pointer'}" class="el-icon-refresh" @click="$bus.$emit('reload')" /> |
|
|
|
|
|
|
|
|
<i :style="{cursor:'pointer'}" class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" /> |
|
|
</div> |
|
|
</div> |
|
|
<div :style="{display:'inline-block',float:'right'}" class="user-box"> |
|
|
<div :style="{display:'inline-block',float:'right'}" class="user-box"> |
|
|
<i :style="{cursor:'pointer'}" class="el-icon-search search-icon" @click="showSearch()" /> |
|
|
<i :style="{cursor:'pointer'}" class="el-icon-search search-icon" @click="showSearch()" /> |
|
@ -39,7 +39,8 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
value: '', |
|
|
value: '', |
|
|
show: false |
|
|
|
|
|
|
|
|
show: false, |
|
|
|
|
|
reload: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
@ -58,7 +59,33 @@ export default { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.$refs['search-input'].focus() |
|
|
this.$refs['search-input'].focus() |
|
|
}) |
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
handleReload() { |
|
|
|
|
|
this.reload = true |
|
|
|
|
|
this.$bus.$emit('reload') |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.reload = false |
|
|
|
|
|
}, 500) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
|
.reload{ |
|
|
|
|
|
font-size: 17px; |
|
|
|
|
|
&:hover{ |
|
|
|
|
|
transform: scale(1.02) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.reloading{ |
|
|
|
|
|
animation:turn 0.5s linear infinite; |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes turn { |
|
|
|
|
|
0%{-webkit-transform:rotate(0deg);} |
|
|
|
|
|
25%{-webkit-transform:rotate(90deg);} |
|
|
|
|
|
50%{-webkit-transform:rotate(180deg);} |
|
|
|
|
|
75%{-webkit-transform:rotate(270deg);} |
|
|
|
|
|
100%{-webkit-transform:rotate(360deg);} |
|
|
|
|
|
} |
|
|
|
|
|
</style> |