smallchill
7 years ago
parent
ec478ce72b
commit
9c2d8504be
33 changed files with 738 additions and 411 deletions
@ -0,0 +1,191 @@ |
|||||||
|
<template> |
||||||
|
<div class="avue-searchs" |
||||||
|
@click.self="handleEsc"> |
||||||
|
<div class="avue-searchs__title">菜单搜索</div> |
||||||
|
<div class="avue-searchs__content"> |
||||||
|
<div class="avue-searchs__form"> |
||||||
|
<el-input :placeholder="$t('search')" |
||||||
|
v-model="value" |
||||||
|
@keydown.esc.native="handleEsc"> |
||||||
|
<el-button slot="append" |
||||||
|
icon="el-icon-search"></el-button> |
||||||
|
</el-input> |
||||||
|
<p> |
||||||
|
<el-tag>你可以使用快捷键esc 关闭</el-tag> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div class="avue-searchs__list"> |
||||||
|
<el-scrollbar class="avue-searchs__scrollbar"> |
||||||
|
<div class="avue-searchs__item" |
||||||
|
v-for="(item,index) in menus" |
||||||
|
:key="index" |
||||||
|
@click="handleSelect(item)"> |
||||||
|
<i :class="[item[iconKey],'avue-searchs__item-icon']"></i> |
||||||
|
<span class="avue-searchs__item-title">{{item[labelKey]}}</span> |
||||||
|
<div class="avue-searchs__item-path"> |
||||||
|
{{item[pathKey]}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-scrollbar> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import config from './sidebar/config.js' |
||||||
|
import {mapGetters} from "vuex"; |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
config: config, |
||||||
|
value: "", |
||||||
|
menus: [], |
||||||
|
menuList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getMenuList(); |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value() { |
||||||
|
this.querySearch(); |
||||||
|
}, |
||||||
|
menu() { |
||||||
|
this.getMenuList(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
labelKey() { |
||||||
|
return this.website.menu.props.label || this.config.propsDefault.label; |
||||||
|
}, |
||||||
|
pathKey() { |
||||||
|
return this.website.menu.props.path || this.config.propsDefault.path; |
||||||
|
}, |
||||||
|
iconKey() { |
||||||
|
return this.website.menu.props.icon || this.config.propsDefault.icon; |
||||||
|
}, |
||||||
|
childrenKey() { |
||||||
|
return ( |
||||||
|
this.website.menu.props.children || this.config.propsDefault.children |
||||||
|
); |
||||||
|
}, |
||||||
|
...mapGetters(["menu", "website"]) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleEsc() { |
||||||
|
this.$parent.isSearch = false; |
||||||
|
}, |
||||||
|
getMenuList() { |
||||||
|
const findMenu = list => { |
||||||
|
for (let i = 0; i < list.length; i++) { |
||||||
|
const ele = Object.assign({}, list[i]); |
||||||
|
if (this.validatenull(ele[this.childrenKey])) { |
||||||
|
this.menuList.push(ele); |
||||||
|
} else { |
||||||
|
findMenu(ele[this.childrenKey]); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
this.menuList = []; |
||||||
|
findMenu(this.menu); |
||||||
|
this.menus = this.menuList; |
||||||
|
}, |
||||||
|
querySearch() { |
||||||
|
var restaurants = this.menuList; |
||||||
|
var queryString = this.value |
||||||
|
this.menus = queryString |
||||||
|
? this.menuList.filter(this.createFilter(queryString)) |
||||||
|
: restaurants; |
||||||
|
}, |
||||||
|
createFilter(queryString) { |
||||||
|
return restaurant => { |
||||||
|
return ( |
||||||
|
restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === |
||||||
|
0 |
||||||
|
); |
||||||
|
}; |
||||||
|
}, |
||||||
|
handleSelect(item) { |
||||||
|
this.handleEsc(); |
||||||
|
this.value = ""; |
||||||
|
this.$router.push({ |
||||||
|
path: this.$router.$avueRouter.getPath({ |
||||||
|
name: item[this.labelKey], |
||||||
|
src: item[this.pathKey] |
||||||
|
}, item.meta), |
||||||
|
query: item.query |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.avue-searchs { |
||||||
|
padding-top: 50px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
z-index: 1024; |
||||||
|
|
||||||
|
&__title { |
||||||
|
margin-bottom: 60px; |
||||||
|
text-align: center; |
||||||
|
font-size: 42px; |
||||||
|
font-weight: bold; |
||||||
|
letter-spacing: 2px; |
||||||
|
text-indent: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
&__form { |
||||||
|
margin: 0 auto 50px auto; |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
p { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__scrollbar { |
||||||
|
height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
&__list { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px 30px; |
||||||
|
margin: 0 auto; |
||||||
|
width: 70%; |
||||||
|
border-radius: 4px; |
||||||
|
border: 1px solid #ebeef5; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
color: #303133; |
||||||
|
transition: 0.3s; |
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
&__item { |
||||||
|
padding: 5px 0; |
||||||
|
border-bottom: 1px dashed #eee; |
||||||
|
|
||||||
|
&-icon { |
||||||
|
margin-right: 5px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
&-title { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
&-path { |
||||||
|
line-height: 30px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue