From a23166e4fac771238a90ae5ddc5b1e53a1c7afb8 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 25 Aug 2022 18:10:21 +0800 Subject: [PATCH] 更新后的细节调整 --- src/components/fixed/header.vue | 143 +++++++++++++++++++++++++++++++++++------------ 1 files changed, 105 insertions(+), 38 deletions(-) diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue index fff0887..a5b9549 100644 --- a/src/components/fixed/header.vue +++ b/src/components/fixed/header.vue @@ -1,56 +1,103 @@ <template> - <a-row type="flex" justify="start" > - <a-col v-bind="showSmall"> - <router-link to="/main1">Home »</router-link> - </a-col> - <a-col v-bind="showSmall"> - <router-link to="/main2">乐谱搜索 »</router-link> - </a-col> - <a-col v-bind="showSmall"> - <router-link to="/main3">我的网盘 »</router-link> - </a-col> - <a-col v-bind="showMain"> - <router-link to="/tagInfo">关于我 »</router-link> - </a-col> - <a-col v-bind="showMain"> - <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange"> - <a-input> - <a-icon slot="suffix" type="search" class="certain-category-icon" /> - </a-input> - </a-auto-complete> - </a-col> - - </a-row> + <a-row type="flex" justify="start"> + <a-col v-bind="showSmall"> + <div class="menu"> + <router-link to="/">Home</router-link> + <router-link to="/comment">碎碎念</router-link> + <router-link to="/link">友人帐</router-link> + <router-link to="/platform">月台</router-link> + <router-link to="/login">登录</router-link> + <!-- <router-link to="/comment">测试页</router-link> --> + </div> + </a-col> + <a-col v-bind="showMain"> + <a-auto-complete v-model="search.value" :data-source="search.dataSource" ref="mySearch" v-bind="search" + @select="onSelect" @search="onSearch" @change="onChange"> + <a-input> + <a-icon slot="suffix" type="search" class="certain-category-icon" /> + </a-input> + </a-auto-complete> + </a-col> + + </a-row> </template> <script> export default { + mounted() { + let self = this; + let code = 0; + let code2 = 0; + let code3 = 0; + document.onkeydown = function(e) { + let evn = e || event; + let key = evn.keyCode || evn.which || evn.charCode; + if (key === 17) { + code = 1; + } + if (key === 16) { + code2 = 1; + } + if (key === 70) { + code3 = 1; + } + if (code === 1 && code2 === 1 && code3 === 1) { + self.$message.info("进入全局搜索..") + //do something + self.$refs.mySearch.focus(); + code = 0; + code2 = 0; + } + } + document.onkeyup = function(e) { + if (e.keyCode === 17) { + code = 0; + } + if (e.keyCode === 16) { + code2 = 0; + } + if (e.keyCode === 70) { + code3 = 0; + } + } + }, data() { return { search: { - placeholder: "全局搜索..", - allowClear: true, + //placeholder: "ctrl+shift+f/enter", + placeholder: "搜索框未营业..", + // allowClear: true, // autoFocus: true, backfill: true, + value: '', dataSource: [], }, showSmall: { - xs: 6, - sm: 6, - md: 6, - lg: 6, - xl: 6, - xxl: 6, + xs: 24, + sm: 18, + md: 18, + lg: 18, + xl: 18, + xxl: 18, }, showMain: { xs: 0, - sm: 0, - md: 2, - lg: 2, - xl: 2, - xxl: 2, + sm: 6, + md: 6, + lg: { + span: 3, + offset: 3 + }, + xl: { + span: 3, + offset: 3 + }, + xxl: { + span: 3, + offset: 3 + }, } } @@ -61,12 +108,18 @@ }, }, methods: { + test(e) { + console.log(333); + console.log(e); + }, onSearch(searchText) { - this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; + this.search.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; console.log("补全.."); }, onSelect(value) { - console.log('回车', value); + // console.log('回车', value); + this.$message.info("这个功能会等到内容足够多的时候再打开..") + // this.$message.info("回车,内容为" + value) }, onChange(value) { console.log('修改', value); @@ -77,4 +130,18 @@ }, }, } -</script> \ No newline at end of file +</script> +<style lang="less" scoped> + .menu { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -khtml-user-select: none; + user-select: none; + + a { + margin-left: 10px; + } + + } +</style> -- Gitblit v1.9.1