zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature[Navbar]: add header-search component (#1591)

Browse Source 
* init

* init

* refactor search function by fuse

* fix bug

* fix bug

* tweak
This commit is contained in:
花裤衩
2019-02-13 15:09:14 +08:00
committed by GitHub
parent fe381503eb
commit c71f3110fb
4 changed files with 212 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/layout/components/Navbar.vue
View File

@@ -6,24 +6,26 @@
<div class="right-menu">
<template v-if="device!=='mobile'">
<error-log class="errLog-container right-menu-item"/>
<search class="right-menu-item" />
<error-log class="errLog-container right-menu-item hover-effect"/>
<el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
<screenfull class="right-menu-item"/>
<screenfull class="right-menu-item hover-effect"/>
</el-tooltip>
<el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
<size-select class="right-menu-item"/>
<size-select class="right-menu-item hover-effect"/>
</el-tooltip>
<lang-select class="right-menu-item"/>
<lang-select class="right-menu-item hover-effect"/>
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
<theme-picker class="theme-picker right-menu-item"/>
<theme-picker class="right-menu-item hover-effect"/>
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item" trigger="click">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom"/>
@@ -57,6 +59,7 @@ import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import LangSelect from '@/components/LangSelect'
import ThemePicker from '@/components/ThemePicker'
import Search from '@/components/HeaderSearch'
export default {
components: {
@@ -66,7 +69,8 @@ export default {
Screenfull,
SizeSelect,
LangSelect,
ThemePicker
ThemePicker,
Search
},
computed: {
...mapGetters([
@@ -100,6 +104,7 @@ export default {
float: left;
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
@@ -124,24 +129,30 @@ export default {
}
.right-menu-item {
cursor: pointer;
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 20px;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;