Browse Source

Merge branch 'hqyDev' of http://git.dayaedu.com/huangqiyong/pptList into online

黄琪勇 1 week ago
parent
commit
30a1368eee

+ 29 - 3
src/components/Input.vue

@@ -19,9 +19,10 @@
       @input="$event => handleInput($event)"
       @focus="$event => handleFocus($event)"
       @blur="$event => handleBlur($event)"
-      @change="$event => emit('change', $event)"
+      @change="$event => emit('change', ($event.target as HTMLInputElement).value)"
       @keydown.enter="$event => emit('enter', $event)"
     />
+    <div v-if="clearable && value" v-show="focused" @click="handleClear" class="clear"></div>
     <span class="suffix">
       <slot name="suffix"></slot>
     </span>
@@ -37,21 +38,24 @@ withDefaults(
     disabled?: boolean
     placeholder?: string
     simple?: boolean
+    clearable?: boolean
   }>(),
   {
     disabled: false,
     placeholder: "",
-    simple: false
+    simple: false,
+    clearable: false
   }
 )
 
 const emit = defineEmits<{
   (event: "update:value", payload: string): void
   (event: "input", payload: Event): void
-  (event: "change", payload: Event): void
+  (event: "change", payload: string): void
   (event: "blur", payload: Event): void
   (event: "focus", payload: Event): void
   (event: "enter", payload: Event): void
+  (event: "clear"): void
 }>()
 
 const focused = ref(false)
@@ -68,6 +72,12 @@ const handleFocus = (e: Event) => {
   emit("focus", e)
 }
 
+function handleClear() {
+  emit("update:value", "")
+  emit("change", "")
+  emit("clear")
+}
+
 const inputRef = ref<HTMLInputElement>()
 const focus = () => {
   if (inputRef.value) inputRef.value.focus()
@@ -87,6 +97,22 @@ defineExpose({
   transition: border-color 0.25s;
   font-size: 13px;
   display: flex;
+  &:not(.disabled):hover {
+    .clear {
+      display: initial !important;
+    }
+  }
+  .clear {
+    width: 16px;
+    height: 16px;
+    background: url("./imgs/clear.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 5px;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 
   input {
     min-width: 0;

BIN
src/components/imgs/clear.png


+ 9 - 0
src/messageHooks/closePage.ts

@@ -0,0 +1,9 @@
+// 关闭 像父级派发 页面
+export const iframeExitMes = () => {
+  window.parent.postMessage(
+    {
+      api: "iframe_exit"
+    },
+    "*"
+  )
+}

+ 30 - 0
src/messageHooks/mobileScreen.ts

@@ -0,0 +1,30 @@
+/* 移动端预览的时候 监听按键事件 传给学生端控制操作按钮 */
+import { onMounted, onUnmounted } from "vue"
+
+export const changeToggeMes = () => {
+  function handleMessage(event: any) {
+    const { api, playState } = event.data || {}
+    if (api === "headerTogge") {
+      window.parent.postMessage(
+        {
+          api: "headerTogge",
+          playState: playState
+        },
+        "*"
+      )
+    } else if (api === "changeTogge") {
+      window.parent.postMessage(
+        {
+          api: "changeTogge"
+        },
+        "*"
+      )
+    }
+  }
+  onMounted(() => {
+    window.addEventListener("message", handleMessage)
+  })
+  onUnmounted(() => {
+    window.removeEventListener("message", handleMessage)
+  })
+}

+ 2 - 6
src/views/Editor/EditorHeader/index.vue

@@ -74,6 +74,7 @@ import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
 import { ref, computed } from "vue"
 import { ElMessageBox } from "element-plus"
 import usePptWork from "@/store/pptWork"
+import { iframeExitMes } from "@/messageHooks/closePage"
 
 const slidesStore = useSlidesStore()
 const { title } = storeToRefs(slidesStore)
@@ -124,12 +125,7 @@ function handleSave() {
 /* 关闭页面 */
 function handleClose() {
   window.close()
-  window.parent.postMessage(
-    {
-      api: "iframe_exit",
-    },
-    "*"
-  );
+  iframeExitMes()
 }
 </script>
 

+ 8 - 2
src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -23,7 +23,7 @@
           </div>
         </div>
         <div class="query">
-          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" @enter="handleQuery">
+          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" clearable @enter="handleQuery" @clear="handleQuery">
             <template #prefix>
               <img class="img" src="./imgs/query.png" alt="" />
             </template>
@@ -140,7 +140,13 @@
             <Empty v-if="!musicList.length && !loading" />
           </div>
           <div class="pagination" v-show="musicList.length">
-            <el-pagination layout="prev, pager, next" :default-page-size="21" @current-change="handleCurrentChange" :total="queryData.total" />
+            <el-pagination
+              layout="prev, pager, next"
+              :default-page-size="queryData.rows"
+              :current-page="queryData.page"
+              @current-change="handleCurrentChange"
+              :total="queryData.total"
+            />
           </div>
         </div>
       </div>

+ 8 - 2
src/views/components/element/enjoyElement/resourcesList/resourcesList.vue

@@ -36,7 +36,7 @@
           </div>
         </div>
         <div class="query">
-          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" @enter="handleQuery">
+          <Input :placeholder="'请输入搜索关键词'" clearable v-model:value="queryData.name" @enter="handleQuery" @clear="handleQuery">
             <template #prefix>
               <img class="img" src="../../cloudCoachElement/cloudCoachList/imgs/query.png" alt="" />
             </template>
@@ -132,7 +132,13 @@
             <Empty v-if="!musicList.length && !loading" />
           </div>
           <div class="pagination" v-show="musicList.length">
-            <el-pagination layout="prev, pager, next" :default-page-size="20" @current-change="handleCurrentChange" :total="queryData.total" />
+            <el-pagination
+              layout="prev, pager, next"
+              :default-page-size="queryData.rows"
+              :current-page="queryData.page"
+              @current-change="handleCurrentChange"
+              :total="queryData.total"
+            />
           </div>
         </div>
       </div>

+ 2 - 0
src/views/mobileScreen/mobileScreen.vue

@@ -14,7 +14,9 @@ import Screen from "../Screen/index.vue"
 import usePptWork from "@/store/pptWork"
 import { useScreenStore } from "@/store"
 import MobileThumbnails from "../Mobile/MobileThumbnails.vue"
+import { changeToggeMes } from "@/messageHooks/mobileScreen"
 
+changeToggeMes()
 const screenStore = useScreenStore()
 
 const initLoading = ref(true)