提取配置值到配置文件中

src/config.js

@@ -0,0 +1,36 @@
+// 不需要在html代码里使用的配置值，写在这里。
+export const config = {
+  // 初始位置相关
+  initialLandscapePositionLeft: '18.491%',
+  initialCloud2PositionLeft: '35%',
+  initialCloud1PositionLeft: '0%',
+  initialCloud3PositionLeft: '55%',
+  initialPeopleFarPositionRight: '15%',
+  initialPeopleNearPositionLeft: '25%',
+  initialIntroducePositionLeft: '3.347%',
+
+  // 镜头右移边界
+  translateLengthRightBorder: 9000, // 单位：px
+
+  // 移动速率相关
+  landscapeSpeedRate: 0.02,
+  cloud2SpeedRate: 0.25,
+  cloud1SpeedRate: 0.4,
+  cloud3SpeedRate: 0.4,
+  peopleFarSpeedRate: 0.4,
+  peopleNearSpeedRate: 0.6,
+  introduceSpeedRate: 0.6,
+}
+
+// 需要在html代码里使用的配置值，写在这里。
+export const configMixins = {
+  data() {
+    return {
+      // 文物展示相关
+      treasureFrameTotalNum: 196,
+      treasureInitialHeightPercent: 8,
+      treasureFrameWidth: 1366,
+      treasureFrameHeight: 768,
+    }
+  },
+}

src/views/HomeView.vue

@@ -124,41 +124,13 @@
 </template>
 
 <script>
-const initialLandscapePositionLeft = '18.491%'
-const initialCloud2PositionLeft = '35%'
-const initialCloud1PositionLeft = '0%'
-const initialCloud3PositionLeft = '55%'
-const initialPeopleFarPositionRight = '15%'
-const initialPeopleNearPositionLeft = '25%'
-const initialIntroducePositionLeft = '3.347%'
-
-const landscapeSpeedRate = 0.02
-const cloud2SpeedRate = 0.25
-const cloud1SpeedRate = 0.4
-const cloud3SpeedRate = 0.4
-const peopleFarSpeedRate = 0.4
-const peopleNearSpeedRate = 0.6
-const introduceSpeedRate = 0.6
-
-const translateLengthRightBorder = 9000 // 单位：px
-
-// 文物展示相关
-const treasureDisplayConfigMixins = {
-  data() {
-    return {
-      treasureFrameTotalNum: 196,
-      treasureInitialHeightPercent: 8,
-      treasureFrameWidth: 1366,
-      treasureFrameHeight: 768,
-    }
-  },
-}
+import { config, configMixins } from "@/config.js"
 
 export default {
   name: 'HomeView',
   components: {
   },
-  mixins: [treasureDisplayConfigMixins],
+  mixins: [configMixins],
   data() {
     return {
       // 鼠标拖拽相关
@@ -175,13 +147,13 @@ export default {
       // 镜头平移相关
       translateLength: 0,
       paperPositionLeft: 0,
-      landscapePositionLeft: initialLandscapePositionLeft,
-      cloud2PositionLeft: initialCloud2PositionLeft,
-      cloud1PositionLeft: initialCloud1PositionLeft,
-      cloud3PositionLeft: initialCloud3PositionLeft,
-      peopleFarPositionRight: initialPeopleFarPositionRight,
-      peopleNearPositionLeft: initialPeopleNearPositionLeft,
-      introducePositionLeft: initialIntroducePositionLeft,
+      landscapePositionLeft: config.initialLandscapePositionLeft,
+      cloud2PositionLeft: config.initialCloud2PositionLeft,
+      cloud1PositionLeft: config.initialCloud1PositionLeft,
+      cloud3PositionLeft: config.initialCloud3PositionLeft,
+      peopleFarPositionRight: config.initialPeopleFarPositionRight,
+      peopleNearPositionLeft: config.initialPeopleNearPositionLeft,
+      introducePositionLeft: config.initialIntroducePositionLeft,
 
       // 远处人物变色相关
       peopleFarColorStatus: 'no-color', // 'no-color', 'color'
@@ -191,14 +163,14 @@ export default {
   watch: {
     translateLength: {
       handler(vNew, vOld) {
-        this.paperPositionLeft = `${vNew * landscapeSpeedRate}px`
-        this.landscapePositionLeft = `calc(${initialLandscapePositionLeft} + ${vNew * landscapeSpeedRate}px)`
-        this.cloud2PositionLeft = `calc(${initialCloud2PositionLeft} + ${vNew * cloud2SpeedRate}px)`
-        this.cloud1PositionLeft = `calc(${initialCloud1PositionLeft} + ${vNew * cloud1SpeedRate}px)`
-        this.cloud3PositionLeft = `calc(${initialCloud3PositionLeft} + ${vNew * cloud3SpeedRate}px)`
-        this.peopleFarPositionRight = `calc(${initialPeopleFarPositionRight} - ${vNew * peopleFarSpeedRate}px)`
-        this.peopleNearPositionLeft = `calc(${initialPeopleNearPositionLeft} + ${vNew * peopleNearSpeedRate}px)`
-        this.introducePositionLeft = `calc(3.347% + ${vNew * introduceSpeedRate}px)`
+        this.paperPositionLeft = `${vNew * config.landscapeSpeedRate}px`
+        this.landscapePositionLeft = `calc(${config.initialLandscapePositionLeft} + ${vNew * config.landscapeSpeedRate}px)`
+        this.cloud2PositionLeft = `calc(${config.initialCloud2PositionLeft} + ${vNew * config.cloud2SpeedRate}px)`
+        this.cloud1PositionLeft = `calc(${config.initialCloud1PositionLeft} + ${vNew * config.cloud1SpeedRate}px)`
+        this.cloud3PositionLeft = `calc(${config.initialCloud3PositionLeft} + ${vNew * config.cloud3SpeedRate}px)`
+        this.peopleFarPositionRight = `calc(${config.initialPeopleFarPositionRight} - ${vNew * config.peopleFarSpeedRate}px)`
+        this.peopleNearPositionLeft = `calc(${config.initialPeopleNearPositionLeft} + ${vNew * config.peopleNearSpeedRate}px)`
+        this.introducePositionLeft = `calc(3.347% + ${vNew * config.introduceSpeedRate}px)`
       }
     },
   },
@@ -237,8 +209,8 @@ export default {
         this.translateLength -= e.deltaY
         if (this.translateLength > 0) {
           this.translateLength = 0
-        } else if (this.translateLength < -translateLengthRightBorder) {
-          this.translateLength = -translateLengthRightBorder
+        } else if (this.translateLength < -config.translateLengthRightBorder) {
+          this.translateLength = -config.translateLengthRightBorder
           this.moveSpeed = 0
         }
       }
@@ -265,8 +237,8 @@ export default {
         this.translateLength += this.moveSpeed * timeElapsed
         if (this.translateLength > 0) {
           this.translateLength = 0
-        } else if (this.translateLength < -translateLengthRightBorder) {
-          this.translateLength = -translateLengthRightBorder
+        } else if (this.translateLength < -config.translateLengthRightBorder) {
+          this.translateLength = -config.translateLengthRightBorder
           this.moveSpeed = 0
         }
       }