新增搜索框搜索建议键盘上下方向键选择功能

publish/changeLog.md

@@ -1,14 +1,3 @@
-### 优化
+### 新增
 
-- 优化定位歌曲时的列表滚动机制
-- 优化链接点击效果
-
-### 修复
-
-- 修复使用酷我源下载歌曲时，当歌曲无封面时下载报错的问题
-- 修复酷我源排行榜、歌单详情列表里的歌曲音质匹配问题（原来无论歌曲有无高品、无损都会显示有）
-- 禁止外部链接在软件内打开，将所有外部链接从默认浏览器打开
-
-### 其他
-
-- 更新electron到7.1.2
+- 新增搜索框搜索建议键盘上下方向键选择功能

src/renderer/components/material/SearchInput.vue

@@ -4,7 +4,9 @@ div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', s
     input(:placeholder="placeholder" v-model.trim="text"
           @focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
           @change="sendEvent('change')"
-          @keyup.enter="handleSearch")
+          @keyup.enter="handleSearch"
+          @keyup.40.prevent="handleKeyDown"
+          @keyup.38.prevent="handleKeyUp")
     button(type="button" @click="handleSearch")
       slot
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
@@ -14,7 +16,7 @@ div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', s
   //-             leave-active-class="animated flipOutX")
   div(v-if="list" :class="$style.list" :style="listStyle")
     ul(ref="dom_list")
-      li(v-for="(item, index) in list" :key="item" @click="handleTemplistClick(index)")
+      li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
         span {{item}}
 </template>
 
@@ -49,7 +51,7 @@ export default {
     return {
       isShow: false,
       text: '',
-      index: null,
+      selectIndex: -1,
       focus: false,
       listStyle: {
         height: 0,
@@ -59,6 +61,7 @@ export default {
   watch: {
     list(n) {
       if (!this.visibleList) return
+      if (this.selectIndex > -1) this.selectIndex = -1
       this.$nextTick(() => {
         this.listStyle.height = this.$refs.dom_list.scrollHeight + 'px'
       })
@@ -84,7 +87,8 @@ export default {
     },
     handleSearch() {
       this.hideList()
-      this.sendEvent('submit')
+      if (this.selectIndex < 0) return this.sendEvent('submit')
+      this.sendEvent('listClick', this.selectIndex)
     },
     showList() {
       this.isShow = true
@@ -93,6 +97,9 @@ export default {
     hideList() {
       this.isShow = false
       this.listStyle.height = 0
+      this.$nextTick(() => {
+        this.selectIndex = -1
+      })
     },
     sendEvent(action, data) {
       this.$emit('event', {
@@ -100,6 +107,12 @@ export default {
         data,
       })
     },
+    handleKeyDown() {
+      this.selectIndex = this.selectIndex + 1 < this.list.length ? this.selectIndex + 1 : 0
+    },
+    handleKeyUp() {
+      this.selectIndex = this.selectIndex - 1 < -1 ? this.list.length - 1 : this.selectIndex - 1
+    },
   },
 }
 </script>
@@ -187,7 +200,7 @@ export default {
         .mixin-ellipsis-2;
       }
 
-      &:hover {
+      &.select {
         background-color: @color-search-list-hover;
       }
       &:last-child {
@@ -239,7 +252,7 @@ each(@themes, {
       }
       .list {
         li {
-          &:hover {
+          &.select {
             background-color: ~'@{color-@{value}-search-list-hover}';
           }
         }