[Update] image slider

JunyaoHu · Oct 7, 2023 · 39196d7 · 39196d7
1 parent 23e6e10
commit 39196d7
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 22 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -67,7 +67,7 @@ a {
 
 </style>
 
-<style scoped>
+<style>
 .el-sub-menu__title {
     font-size: 18px;
 }
@@ -92,10 +92,6 @@ a {
     fill: #409EFF;
 }
 
-.el-popper {
-    min-width: min(50%, 300px);
-}
-
 .el-menu--popup {
     min-width: 100%;
 }
@@ -106,4 +102,10 @@ a {
 }
 </style>
 
+<style scoped>
+.el-popper {
+    min-width: min(50%, 300px);
+}
+</style>
+
 
diff --git a/src/components/sections/ImageSlider.vue b/src/components/sections/ImageSlider.vue
@@ -7,9 +7,10 @@ export default {
       outputImageRootPath: './image_slider/huaqiang/output/',
       inputImagePath: '',
       outputImagePath: '',
+      inputLoading: true,
+      outputLoading: true,
       minValue: 0,
       maxValue: 9,
-      loading: true
     };
   },
   beforeMount() {
@@ -20,30 +21,33 @@ export default {
   methods: {
     handleChange(value) {
       // 当滑块的值改变时，加载对应的图片
-      console.log(this.loading);
       this.loadImage(value, this.inputImageRootPath, 'input');
       this.loadImage(value, this.outputImageRootPath, 'output');
-      console.log(this.loading);
     },
     loadImage(value, path, type) {
       // 构建图片路径
-      this.loading = true;
+      if (type == 'input') {
+          this.inputLoading = true;
+      } else {
+          this.outputLoading = true;
+      }
       const imagePath = `${path}${value}.png`;
       // 创建一个新的Image对象用于预加载
       const image = new Image();
       image.src = imagePath;
       // 监听图片加载完成事件
       image.onload = () => {
-        // 图片加载完成后，更新当前图片路径
-        if (type == 'input') {
-          this.inputImagePath = imagePath;
-          console.log(this.inputImagePath);
-        } else {
-          this.outputImagePath = imagePath;
-          console.log(this.outputImagePath);
-        }
+          // 图片加载完成后，更新当前图片路径
+          if (type == 'input') {
+            this.inputImagePath = imagePath;
+            console.log(this.inputImagePath);
+            this.inputLoading = false;
+          } else {
+            this.outputImagePath = imagePath;
+            console.log(this.outputImagePath);
+            this.outputLoading = false;
+          }
       };
-      this.loading = false;
     },
   },
 };
@@ -54,6 +58,10 @@ export default {
   <el-row>
     <h1 class="title1">Image Slider</h1>
   </el-row>
+  <div>
+      <label style="margin-right: 16px">Switch Loading</label>
+      <el-switch v-model="inputLoading" />
+  </div>
   <el-row>
     <el-col>
       <el-row justify="space-evenly">
@@ -62,9 +70,9 @@ export default {
             <div class="block">
               <el-skeleton
               style="width: 100%"
-              :loading="loading"
+              :loading="inputLoading"
               animated
-              :throttle="100"
+              :throttle="1000"
               >
                 <template #template>
                   <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
@@ -80,7 +88,19 @@ export default {
         <el-col :lg="10" :xl="6">
           <div class="demo-image">
             <div class="block">
-              <el-image :src="outputImagePath" fit="scale-down"/>
+              <el-skeleton
+              style="width: 100%"
+              :loading="outputLoading"
+              animated
+              :throttle="1000"
+              >
+                <template #template>
+                  <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
+                </template>
+                <template #default>
+                  <el-image :src="outputImagePath" fit="scale-down"/>
+                </template>
+              </el-skeleton>
               <span class="demonstration">output: {{ outputImagePath }}</span>
             </div>
           </div>
@@ -91,7 +111,7 @@ export default {
   <el-row>
     <el-col :xs="20" :sm="20" :md="16" :lg="12" :xl="12">
     <div class="slider-demo-block">
-      <el-slider v-model="sliderValue" show-input :min="minValue" :max="maxValue" @input="handleChange"/>
+      <el-slider v-model="sliderValue" :min="minValue" :max="maxValue" @input="handleChange"/>
     </div>
     </el-col>
   </el-row>
@@ -125,4 +145,11 @@ export default {
   display: block;
   color: var(--el-text-color-secondary);
 }
+
+</style>
+
+<style>
+.el-slider__runway {
+  background-color: #c6c6c6;
+}
 </style>