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