基本完成单曲搜索

src/App.vue

@@ -13,6 +13,7 @@ import SongStatus from "./views/common/SongStatus.vue";
 import SongProgress from "@/views/common/SongProgress.vue";
 import PlayingList from "@/views/common/PlayingList.vue";
 import ZPlayingList from "@/views/common/ZPlayingList.vue";
+import Searching from "@/views/common/Searching.vue";
 import SongDetail from "@/views/common/SongDetail.vue";
 import pubsub from "pubsub-js";
 import {
@@ -47,6 +48,7 @@ store.commit("loadCaches");
 
 const showPlaying = ref(false); //是否显示播放列表
 const showSongDetail = ref(false); //是否显示歌曲详细信息
+const showSearch = ref(false); //是否显示搜索
 
 watch(
   ()=> store.state.showSongDetail,
@@ -78,6 +80,12 @@ const token = pubsub.subscribe("zp", (msg, data) => {
     case "zp.toggleSongDetail":
       showSongDetail.value = store.state.showSongDetail = !showSongDetail.value;
       break;
+    case "zp.showSearch":
+      showSearch.value = true;
+      break;
+    case "zp.toggleSearch":
+      showSearch.value = !showSearch.value ;
+      break;
   }
 });
 
@@ -91,6 +99,7 @@ onUnmounted(() => {
 const wpEl = ref('')
 const hideWins = (e) => {
   // console.log(e.clientX > 0,e, wpEl.value.clientWidth);
+  //显示当前播放
   if (showPlaying.value 
     && e.clientX > 0
     && e.clientX < wpEl.value.clientWidth - 500
@@ -99,6 +108,15 @@ const hideWins = (e) => {
   ) {
     showPlaying.value = false;
   }
+  //显示搜索
+  if (showSearch.value
+    && e.clientX > 0
+    && e.clientX < wpEl.value.clientWidth - 360
+    && e.clientY > 40
+    && e.clientY < wpEl.value.clientHeight - 64
+  ) {
+    showSearch.value = false;
+  }
 };
 </script>
 
@@ -144,6 +162,11 @@ const hideWins = (e) => {
             <ZPlayingList />
           </div>
         </div>
+        <div id="wpSearch" v-show="showSearch">
+          <div id="search">
+            <Searching />
+          </div>
+        </div>
         <div id="footer">
           <div id="songDetail"></div>
           <div id="songProgress">
@@ -208,6 +231,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  user-select: none;
   #top {
     height: 40px;
     display: flex;
@@ -252,6 +276,22 @@ body {
     }
   }
 
+  #wpSearch{
+    #search{
+      position: absolute;
+      top: 40px;
+      right: 0;
+      bottom: 64px;
+      width: 360px;
+      background-color: #fff;
+      z-index: 2000;
+      border: #ddd solid 1px;
+      
+      overflow-y: auto;
+      // padding: 8px;
+    }
+  }
+
   #footer {
     display: flex;
     flex-direction: column;