From da32c2ef8941d663cd4071cab9f73299cca0b4aa Mon Sep 17 00:00:00 2001 From: kanoqwq Date: Thu, 7 Nov 2024 09:24:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E4=BA=86=E9=BC=A0?= =?UTF-8?q?=E6=A0=87=E7=82=B9=E5=87=BBcontainer=E5=A4=96=E4=B8=8D=E4=BC=9A?= =?UTF-8?q?=E8=A7=A6=E5=8F=91=E6=90=9C=E7=B4=A2=E6=A1=86blur=E5=8A=A8?= =?UTF-8?q?=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 37 +++++++----- src/components/Search.vue | 117 +++++++++++++++++++++----------------- 2 files changed, 89 insertions(+), 65 deletions(-) diff --git a/src/App.vue b/src/App.vue index ce8c606..ac0219e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,15 +4,15 @@ * @Email: kanoqwq@qq.com * @Date: 2023-04-17 14:47:15 * @Last Modified by: kanoqwq - * @Last Modified time: 2024-11-02 01:53:20 + * @Last Modified time: 2024-11-07 09:21:02 * @Description: Description */ -import {ref, onMounted, watch, computed} from 'vue'; -import Search from './components/Search.vue'; +import { ref, onMounted, watch, computed } from "vue"; +import Search from "./components/Search.vue"; // iconfont -import '@/assets/js/iconfont.js'; -import Live2D from '@/components/Live2D/index.vue'; -import useStore from './store'; +import "@/assets/js/iconfont.js"; +import Live2D from "@/components/Live2D/index.vue"; +import useStore from "./store"; const Configs = useStore.Configs(); let bg = ref(); @@ -34,24 +34,33 @@ onMounted(() => { }); const onBlur = () => { - mask.value && mask.value.classList.remove('kano-blur'); - bg.value && bg.value.classList.remove('kano-scale'); + mask.value && mask.value.classList.remove("kano-blur"); + bg.value && bg.value.classList.remove("kano-scale"); }; const onFocus = () => { - mask.value && mask.value.classList.add('kano-blur'); - bg.value && bg.value.classList.add('kano-scale'); + mask.value && mask.value.classList.add("kano-blur"); + bg.value && bg.value.classList.add("kano-scale"); +}; + +const search = ref() +const mainClick = (e: MouseEvent) => { + //capture mask element + if (e.target === mask.value) { + console.log(search.value.blur(e)); + // onBlur() + } }; @@ -92,7 +101,7 @@ const onFocus = () => { border-radius: 8px; margin: 4px; backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, .20); + background-color: rgba(255, 255, 255, 0.2); font-size: 10px; } } diff --git a/src/components/Search.vue b/src/components/Search.vue index d064666..458e51c 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -4,20 +4,24 @@ + @click.stop="settingHandler" + >
+ ref="searchEngineElement" + >
+ @click.stop="switchEngine" + > + :class="`icon kano-icon dark:dark-kano-icon iconfont dark:dark-icon ${selectedEngine.icon}`" + >
+ :placeholder="`在${selectedEngine.name}上搜索`" + />
+ v-show="searchContent" + >
@@ -85,21 +95,21 @@ * @Email: kanoqwq@qq.com * @Date: 2023-04-17 14:47:15 * @Last Modified by: kanoqwq - * @Last Modified time: 2024-11-02 02:05:01 + * @Last Modified time: 2024-11-07 09:20:46 * @Description: Description */ -import { ref, reactive, watch, computed, onMounted } from 'vue'; -import Settings from './Settings.vue'; -import throttle from 'lodash/throttle'; -import { suggestAPI } from '@/utils/searchSuggestions'; -import useStore from '@/store'; -import { SearchEngine, SuggestWords } from '@/types/global'; -import Favorites from './Favorites/Favorites.vue'; +import { ref, reactive, watch, computed, onMounted } from "vue"; +import Settings from "./Settings.vue"; +import throttle from "lodash/throttle"; +import { suggestAPI } from "@/utils/searchSuggestions"; +import useStore from "@/store"; +import { SearchEngine, SuggestWords } from "@/types/global"; +import Favorites from "./Favorites/Favorites.vue"; onMounted(() => { window.onkeyup = (e: KeyboardEvent) => { e.preventDefault(); - if (e.key == 'Alt') { + if (e.key == "Alt") { if (isSearchFocused.value) { searchBox.value.blur(); searchBlur(); @@ -109,20 +119,20 @@ onMounted(() => { searchBox.value.focus(); } } - if (e.key == 'Escape') { + if (e.key == "Escape") { searchBox.value.blur(); } }; }); -const emit = defineEmits(['blur', 'focus']); +const emit = defineEmits(["blur", "focus"]); //store const historySearch = useStore.historySearch(); const searchEnginesStore = useStore.searchEngines(); // const global = inject(globalKey) -let searchContent = ref(''); +let searchContent = ref(""); let engineIndex: number = searchEnginesStore.selectedEngine; let selectedEngine = reactive({ ...searchEnginesStore.searchEngines[engineIndex], @@ -190,7 +200,7 @@ const startSearch = ( /^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$/; let reqUrl = - selectedEngine.url + encodeURIComponent(keyWord) + ' ' + filterWords.value; + selectedEngine.url + encodeURIComponent(keyWord) + " " + filterWords.value; if (keyWord.trim() !== searchContent.value.trim()) { searchContent.value = keyWord.trim(); @@ -200,7 +210,7 @@ const startSearch = ( try { scrollUl.value.children[0].scrollIntoView({ top: 0, - behavior: 'instant', + behavior: "instant", }); } catch {} @@ -219,10 +229,10 @@ const startSearch = ( isScrollingToTop.value = false; //If keyWord is an URL if (URLReg.exec(keyWord)) { - window.open(keyWord, '_blank'); + window.open(keyWord, "_blank"); } else { //新标签页打开 - window.open(reqUrl, '_blank'); + window.open(reqUrl, "_blank"); } if (needClear) { clearContent(); @@ -232,16 +242,16 @@ const startSearch = ( const searchEngineElement = ref(); const toggleShadow = (flag: boolean) => { - searchEngineElement.value?.classList?.[flag ? 'add' : 'remove']('shadow'); - searchEngineElement.value?.classList?.[flag ? 'add' : 'remove']( - 'dark:dark-shadow' + searchEngineElement.value?.classList?.[flag ? "add" : "remove"]("shadow"); + searchEngineElement.value?.classList?.[flag ? "add" : "remove"]( + "dark:dark-shadow" ); }; // 鼠标滑过改变阴影 const eventMouse = (e: MouseEvent): void => { - if (e.type == 'mouseenter' && !isSearchFocused.value) { + if (e.type == "mouseenter" && !isSearchFocused.value) { if (searchContent.value.length == 0) { toggleShadow(true); } @@ -260,8 +270,8 @@ const enterEvent = (): void => { const searchBlur = () => { if (Configs.searchTransitonEnabled) { - searchEle.value.style.top = ''; - emit('blur'); + searchEle.value.style.top = ""; + emit("blur"); } isSearchFocused.value = false; searchBox.value.blur(); @@ -275,8 +285,8 @@ const searchEle = ref(); const focus = () => { if (Configs.searchTransitonEnabled) { - searchEle.value.style.top = '33%'; - emit('focus'); + searchEle.value.style.top = "33%"; + emit("focus"); } toggleShadow(false); suggestIsShow.value = true; @@ -289,7 +299,7 @@ const focus = () => { //搜索建议(谷歌接口暂时无法支持跨域) const searchSuggestion = throttle( async ( - method: 'suggestBaidu' | 'suggestBing' | 'suggestDuckDuckGo' + method: "suggestBaidu" | "suggestBing" | "suggestDuckDuckGo" ): Promise => { try { //清除阴影 @@ -316,7 +326,7 @@ const searchSuggestion = throttle( suggestWords.value = [...historySearch.gethistorySearchList]; } } catch (e) { - console.log('搜索建议获取失败'); + console.log("搜索建议获取失败"); } }, 100 @@ -326,7 +336,7 @@ const searchSuggestion = throttle( const clearContent = (): void => { isSuggestMode = false; suggestWords.value.length = 0; - searchContent.value = ''; + searchContent.value = ""; }; const scrollUl = ref(); @@ -337,9 +347,9 @@ watch(suggestionIndex, () => { if (isScrollingToTop.value) return; try { scrollUl.value.children[suggestionIndex.value].scrollIntoView({ - behavior: 'smooth', - block: 'start', - inline: 'nearest', + behavior: "smooth", + block: "start", + inline: "nearest", }); } catch {} }); @@ -357,7 +367,7 @@ const moveSuggestion = (e: KeyboardEvent): void => { //候选词列表不为空 if (suggestWords.value.length != 0) { - if (key == 'ArrowUp') { + if (key == "ArrowUp") { //阻止上下按键操作光标 e.preventDefault(); if (suggestionIndex.value == 0 || suggestionIndex.value == -1) { @@ -367,7 +377,7 @@ const moveSuggestion = (e: KeyboardEvent): void => { (suggestionIndex.value - 1) % suggestWords.value.length; } removeandInit(); - } else if (key == 'ArrowDown') { + } else if (key == "ArrowDown") { e.preventDefault(); if (suggestWords.value.length - 1 == suggestionIndex.value) { suggestionIndex.value = 0; @@ -376,18 +386,18 @@ const moveSuggestion = (e: KeyboardEvent): void => { (suggestionIndex.value + 1) % suggestWords.value.length; } removeandInit(); - } else if (key == 'Home') { + } else if (key == "Home") { e.preventDefault(); suggestionIndex.value = 0; removeandInit(); - } else if (key == 'End') { + } else if (key == "End") { e.preventDefault(); suggestionIndex.value = suggestWords.value.length - 1; removeandInit(); } } //del按下可以快速删除历史 - if (key == 'Delete') { + if (key == "Delete") { //防止误删搜索建议中的内容 if (suggestWords.value.length != 0 && !isSuggestMode) { historySearch.deleteHistory(suggestionIndex.value); @@ -422,7 +432,7 @@ let showHideTimer: any = null; const showHideSearchHistory = (e: Event) => { showHideTimer && clearTimeout(showHideTimer); showHideTimer = setTimeout(() => { - if (e.type == 'focusin') { + if (e.type == "focusin") { focus(); } else { if (isSearchFocused.value) { @@ -436,7 +446,7 @@ const showHideSearchHistory = (e: Event) => { //判定鼠标是否在搜索历史框内 const suggestActiveControl = (e: Event) => { - if (e.type == 'mouseenter') { + if (e.type == "mouseenter") { suggestActive.value = true; } else { suggestActive.value = false; @@ -446,7 +456,7 @@ const suggestActiveControl = (e: Event) => { //删除搜索历史 const delHistory = (index: number) => { focus(); - emit('focus'); + emit("focus"); suggestWords.value.splice(index, 1); historySearch.deleteHistory(index); //删空后将搜索框设为圆角边框 @@ -464,12 +474,17 @@ const settingHandler = () => { //切换搜索的下边框 const toggleSearchBorder = (active: boolean) => { - searchEngineElement.value?.classList[active ? 'remove' : 'add']( - 'search-engine-active' + searchEngineElement.value?.classList[active ? "remove" : "add"]( + "search-engine-active" ); }; + +//导出 +defineExpose({ + blur: containerClick, +});