翻译功能

src/views/home/search.vue

@@ -3,14 +3,17 @@
     <!-- <img class="h-[50px] mb-4 mx-auto" height="30" :src="img" alt=""> -->
     <div class="relative">
       <!-- <n-select size="large" round class="w-[13%] md:w-[40%]" @change="updateEngine" v-model:value="engine" :options="selectOptions" /> -->
-      <n-input size="large" placeholder="探索世界吧！" ref="input" round class="w-full" v-model:value="searchValue" clearable @keyup.enter="toSearch(0)"
-        @focus="smodel = true" @blur="inputBlur" />
+      <n-input size="large" placeholder="探索世界吧！" ref="input" round class="w-full" v-model:value="searchValue" clearable
+        @keyup.enter="toSearch(0)" @focus="inputFocus" @blur="inputBlur" @keydown.arrow-down.prevent="select" />
       <!-- <n-button size="large" round class="w-[15%] md:w-[30%]" type="primary" @click="toSearch">搜索</n-button> -->
-      <div ref="mos" v-show="smodel" class="absolute left-0 bg-[#FAEEFB] z-50 !rounded-2xl overflow-hidden py-2">
-        <div v-for="(s, i) in selectOptions" class="sop" @click="toSearch(i)">
+      <ul ref="mos" v-show="smodel" tabindex="2" @blur="ulBlur"
+        class="absolute left-0 bg-[#FAEEFB] z-50 !rounded-2xl overflow-hidden py-2">
+        <li ref="item" tabindex="1" v-for="(s, i) in selectOptions" class="sop" @keyup.enter="toSearch(i)"
+          @blur="itemBlur" @keydown.arrow-down.prevent="downSelect(i)" @keydown.arrow-up.prevent="upSelect(i)"
+          @click="toSearch(i)">
           <div><span class="text-[#409eff]">{{ s.label }}: </span>{{ searchValue }}</div>
-        </div>
-      </div>
+        </li>
+      </ul>
     </div>
 
   </div>
@@ -26,7 +29,7 @@ const selectOptions = [
   { label: '必应', value: 'https://cn.bing.com/search?q=' },
   { label: '谷歌', value: 'https://www.google.com/search?q=' },
   { label: '百度', value: 'https://www.baidu.com/s?wd=' },
-  { label: '翻译', value: '#' }
+  { label: '翻译', value: 'https://translate.volcengine.com?text=' }
 ]
 
 const smodel = ref(false)
@@ -34,26 +37,60 @@ const input = ref(null)
 const mos = ref(null)
 const inWidth = ref(0)
 const inHeight = ref(0)
-
+const item = ref(null)
 //mark method
 // https://cn.bing.com/search?q=111
 function toSearch(i) {
   console.log(666666);
   if (!searchValue.value) return
-  if (i == 3) {
-    $msg.info('翻译功能正在开发中')
-    return
-  }
+  // if (i == 3) {
+  //   $msg.info('翻译功能正在开发中')
+  //   return
+  // }
 
   window.open(selectOptions[i].value + searchValue.value, "_blank")
 }
-function inputBlur() {
+
+function inputFocus() {
+  smodel.value = true  
+}
+function inputBlur(e) {
+
+  if (e.relatedTarget) return
   setTimeout(() => {
     smodel.value = false
   }, 200);
 
 }
+function ulBlur() {
+  console.log("*******");
 
+  smodel.value = false
+}
+
+function itemBlur(e) {
+  if (!e.relatedTarget) {
+    setTimeout(() => {
+      smodel.value = false
+    }, 200);
+  }
+}
+
+function select() {
+  // 聚焦item0
+  //  console.log(item.value[0]);
+  item.value[1].focus()
+}
+function downSelect(i) {
+
+  if (i == selectOptions.length - 1) item.value[0].focus()
+  else item.value[i + 1].focus()
+}
+
+function upSelect(i) {
+  if (i == 0) item.value[selectOptions.length - 1].focus()
+  else item.value[i - 1].focus()
+}
 //mark 周期、内置函数等
 
 onMounted(() => {
@@ -64,23 +101,34 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .search-box {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
+
 .sop {
   padding: 4px 10px;
   transition: all 0.4s ease-in-out;
+  outline: none;
 }
-.sop:hover {
+
+.sop:hover,
+.sop:focus {
   padding: 4px 20px;
   background: #f2e8fc;
   /* padding: 2px 0 2px 4px; */
-  
+
 }
 
+.sop:focus span {
+  color: @purple !important;
+}
+
+.sop:hover span {
+  color: @orange !important;
+}
 </style>
 <style>
 .n-input-group>*:not(:first-child) {