修复小bug
This commit is contained in:
parent
6d1b18e791
commit
81dccc0ef7
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user