修复小bug

This commit is contained in:
heixinyouzi 2024-06-14 09:06:25 +08:00
parent 6d1b18e791
commit 81dccc0ef7

View File

@ -7,8 +7,7 @@
@focus="smodel = true" @blur="inputBlur" />
<!-- <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="py-[4px] pl-[10px]" :class="{ active: activeIndex == i }"
@mouseenter="activeIndex = i" @click="toSearch(i)">
<div v-for="(s, i) in selectOptions" class="sop" @click="toSearch(i)">
<div><span class="text-[#409eff]">{{ s.label }}: </span>{{ searchValue }}</div>
</div>
</div>
@ -19,12 +18,9 @@
<script setup>
//mark import
import baidu from '@/assets/bro/baidu.png';
import bing from '@/assets/bro/bing.png';
import google from '@/assets/bro/google.png';
import { onMounted } from 'vue';
//mark data
const engine = ref('https://cn.bing.com/search?q=')
const searchValue = ref('')
const selectOptions = [
{ label: '必应', value: 'https://cn.bing.com/search?q=' },
@ -32,13 +28,12 @@ const selectOptions = [
{ label: '百度', value: 'https://www.baidu.com/s?wd=' },
{ label: '翻译', value: '#' }
]
const img = ref(bing)
const smodel = ref(false)
const input = ref(null)
const mos = ref(null)
const inWidth = ref(0)
const inHeight = ref(0)
const activeIndex = ref(0)
//mark method
// https://cn.bing.com/search?q=111
@ -58,26 +53,12 @@ function inputBlur() {
}, 200);
}
function updateEngine(v) {
console.log(v);
switch (v) {
case 'https://cn.bing.com/search?q=':
img.value = bing
break;
case 'https://www.google.com/search?q=':
img.value = google
break;
case 'https://www.baidu.com/s?wd=':
img.value = baidu
break;
}
}
//mark
onMounted(() => {
inWidth.value = input.value.$el.offsetWidth
inHeight.value = input.value.$el.offsetHeight
console.log(mos.value);
mos.value.style.width = inWidth.value + 'px'
mos.value.style.top = inHeight.value + 'px'
})
@ -89,13 +70,17 @@ onMounted(() => {
background-repeat: no-repeat;
background-position: center;
}
.active {
.sop {
padding: 4px 10px;
transition: all 0.4s ease-in-out;
}
.sop:hover {
padding: 4px 20px;
background: #f2e8fc;
/* padding: 2px 0 2px 4px; */
transition: all 0.2s ease-in-out;
}
</style>
<style>
.n-input-group>*:not(:first-child) {