添加禁用样式

src/components/myInput/myInput.vue

@@ -1,102 +1,113 @@
-<!--
-* @FileDescription: input
-* @Author: 黄琪勇
-* @Date:2024-03-28 17:22:38
--->
-<template>
-   <el-input class="h_myInput" v-bind="$attrs" @focus="handleInputFocus" @blur="handleInputBlur" :class="{ isInputFocus: isInputFocus }">
-      <template #prepend>
-         <slot v-if="$slots.prepend" name="prepend"></slot>
-         <img v-else class="imgSs" src="./img/ss.png" />
-      </template>
-      <template #append>
-         <slot v-if="$slots.append" name="append"></slot>
-         <div v-else class="btnSelect" @click="handleQuery">搜索</div>
-      </template>
-   </el-input>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue"
-import { baseSize } from "@/libs/rem"
-
-const props = defineProps<{
-   width?: number
-   height?: number
-}>()
-const emits = defineEmits<{
-   (e: "handleQuery"): void
-}>()
-
-const _h_width = computed(() => {
-   return props.width ? (props.width / baseSize).toFixed(5) + "rem" : "100%"
-})
-const _h_height = computed(() => {
-   return ((props.height || 32) / baseSize).toFixed(5) + "rem"
-})
-
-// 选中样式
-const isInputFocus = ref(false)
-function handleInputFocus() {
-   isInputFocus.value = true
-}
-function handleInputBlur() {
-   isInputFocus.value = false
-}
-
-function handleQuery() {
-   emits("handleQuery")
-}
-</script>
-
-<style lang="scss">
-.h_myInput {
-   &.el-input {
-      flex-shrink: 0;
-      width: v-bind(_h_width);
-      height: v-bind(_h_height);
-      --el-input-text-color: #333;
-      font-size: 16px;
-      border: 1px solid transparent;
-      background: #fff;
-      border-radius: 21px;
-      & .isInputFocus {
-         border-color: #ff8057 !important;
-         box-shadow: 0px 0px 4px 0px rgba(255, 155, 109);
-      }
-   }
-   .el-input-group__prepend {
-      background-color: transparent;
-      box-shadow: none;
-      padding: 0 0 0 15px;
-   }
-   .el-input-group__append {
-      background-color: transparent;
-      box-shadow: none;
-      padding: 0 4px;
-   }
-   .el-input__wrapper {
-      box-shadow: none;
-      border-radius: 21px;
-   }
-   .imgSs {
-      width: 20px;
-      height: 20px;
-   }
-   .btnSelect {
-      width: 70px;
-      height: 36px;
-      background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%), #ffad49;
-      border-radius: 21px;
-      font-weight: 500;
-      font-size: 16px;
-      color: #ffffff;
-      line-height: 36px;
-      text-align: center;
-      cursor: pointer;
-      &:hover {
-         opacity: $opacity-hover;
-      }
-   }
-}
-</style>
+<!--
+* @FileDescription: input
+* @Author: 黄琪勇
+* @Date:2024-03-28 17:22:38
+-->
+<template>
+   <el-input class="h_myInput" v-bind="$attrs" @focus="handleInputFocus" @blur="handleInputBlur" :class="{ isInputFocus: isInputFocus }">
+      <template #prepend>
+         <slot v-if="$slots.prepend" name="prepend"></slot>
+         <img v-else class="imgSs" src="./img/ss.png" />
+      </template>
+      <template #append>
+         <slot v-if="$slots.append" name="append"></slot>
+         <div v-else class="btnSelect" @click="handleQuery">搜索</div>
+      </template>
+   </el-input>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { baseSize } from "@/libs/rem"
+
+const props = defineProps<{
+   width?: number
+   height?: number
+}>()
+const emits = defineEmits<{
+   (e: "handleQuery"): void
+}>()
+
+const _h_width = computed(() => {
+   return props.width ? (props.width / baseSize).toFixed(5) + "rem" : "100%"
+})
+const _h_height = computed(() => {
+   return ((props.height || 32) / baseSize).toFixed(5) + "rem"
+})
+
+// 选中样式
+const isInputFocus = ref(false)
+function handleInputFocus() {
+   isInputFocus.value = true
+}
+function handleInputBlur() {
+   isInputFocus.value = false
+}
+
+function handleQuery() {
+   emits("handleQuery")
+}
+</script>
+
+<style lang="scss">
+.h_myInput {
+   &.el-input {
+      flex-shrink: 0;
+      width: v-bind(_h_width);
+      height: v-bind(_h_height);
+      --el-input-text-color: #333;
+      font-size: 16px;
+      border: 1px solid transparent;
+      background: #fff;
+      border-radius: 21px;
+      & .isInputFocus {
+         border-color: #ff8057 !important;
+         box-shadow: 0px 0px 4px 0px rgba(255, 155, 109);
+      }
+      &.is-disabled {
+         cursor: not-allowed;
+         .el-input__wrapper {
+            background-color: transparent;
+            box-shadow: none;
+         }
+
+         .btnSelect {
+            opacity: $opacity-disabled;
+         }
+      }
+   }
+   .el-input-group__prepend {
+      background-color: transparent;
+      box-shadow: none;
+      padding: 0 0 0 15px;
+   }
+   .el-input-group__append {
+      background-color: transparent;
+      box-shadow: none;
+      padding: 0 4px;
+   }
+   .el-input__wrapper {
+      box-shadow: none;
+      border-radius: 21px;
+   }
+   .imgSs {
+      width: 20px;
+      height: 20px;
+   }
+   .btnSelect {
+      width: 70px;
+      height: 36px;
+      background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%), #ffad49;
+      border-radius: 21px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+      &:hover {
+         opacity: $opacity-hover;
+      }
+   }
+}
+</style>

src/views/coursewarePlay/coursewarePlay.vue

@@ -122,6 +122,7 @@
                :height="36"
                placeholder="请输入素材关键词"
                clearable
+               :disabled="searchObj.loadingCourseWare"
                @handleQuery="handleQuery"
                @keyup.enter="handleQuery"
             />
@@ -832,6 +833,7 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
 }
 
 function handleQuery() {
+   if (searchObj.loadingCourseWare) return
    //
    searchObj.isSearch = true
    searchObj.tempSearch = searchObj.queryStr ? JSON.parse(JSON.stringify(searchObj.queryStr)) : ""