From 620f759cfe9fa42fa9667b2ec63d7d00944e4af0 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 02 Mar 2022 12:49:35 +0800 Subject: [PATCH] 评论列表样式调整 --- src/components/fixed/header.vue | 74 +++++++++++++++++++++++++------------ 1 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue index d235b19..7504258 100644 --- a/src/components/fixed/header.vue +++ b/src/components/fixed/header.vue @@ -1,18 +1,19 @@ <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> + <div class="menu"> + <router-link to="/">Home</router-link> + <router-link to="/main2">乐谱搜索</router-link> + <router-link to="/comment">碎碎念</router-link> + <router-link to="/link">友人帐</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 ref="mySearch" - v-bind="search" @select="onSelect" @search="onSearch" @change="onChange"> - <a-input @keydown.enter="onSelect"> + <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> @@ -66,26 +67,36 @@ return { search: { placeholder: "ctrl+shift+f/enter", - allowClear: true, + // 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 + }, } } @@ -101,12 +112,13 @@ 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); - this.$message.info("回车") + this.$message.info("更多功能..敬请期待") + this.$message.info("回车,内容为" + value) }, onChange(value) { console.log('修改', value); @@ -118,3 +130,17 @@ }, } </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