Browse Source

floorList组件优化,:
切换楼层动画,去除直接操作DOM操作

unknown 4 years ago
parent
commit
51c65cb016
3 changed files with 182 additions and 148 deletions
  1. 89 71
      src/components/floorList.vue
  2. 88 76
      src/components/floorListOther.vue
  3. 5 1
      vue.config.js

+ 89 - 71
src/components/floorList.vue

@@ -6,14 +6,19 @@
 <template>
     <div class='floor-box'>
         <div class='floor-list'>
-            <!-- <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop(num)'></i> -->
             <div v-if='floorsArr.length>5'>
-                <i class='el-icon-caret-top icon-top' v-if='showT' @click='changeFloor(1)'></i>
-                <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
+                <i
+                    class='el-icon-caret-top icon-top'
+                    :class='{disabled:currentFloorId == floorsArr[0].seq }'
+                    v-if='showT'
+                    @click='changeFloor(1)'
+                    @mousedown='mousedown'
+                    @mouseup='mouseup'
+                ></i>
+                <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
             </div>
-
             <div class='floor-out'>
-                <div class='floor-center'>
+                <div class='floor-center' :style='{ marginTop : marginTop }'>
                     <div
                         class='floor-item'
                         :class='item.seq == currentFloorId?"isActive":""'
@@ -23,16 +28,24 @@
                     >{{item.code}}</div>
                 </div>
             </div>
-            <!-- <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom(num)'></i> -->
             <div v-if='floorsArr.length>5'>
-                <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='changeFloor(-1)'></i>
-                <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
+                <i
+                    class='el-icon-caret-bottom icon-bottom'
+                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
+                    v-if='showB'
+                    @click='changeFloor(-1)'
+                ></i>
+                <i
+                    class='el-icon-caret-bottom icon-bottom'
+                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
+                    v-else
+                    style='color:#ccc'
+                ></i>
             </div>
         </div>
     </div>
 </template>
 <script>
-import { animate } from '@/utils/animate.js'
 export default {
     data() {
         return {
@@ -48,10 +61,31 @@ export default {
                 name: '第1层',
                 seq: 100
             },
-            currentFloorId: null
+            currentFloorId: null,
+            marginTop: 0,
+            startTime: '',
+            endTime: ''
+        }
+    },
+    props: {
+        floorsArr: {
+            type: Array
+            /*  default: () => {
+                return [
+                    { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
+                    { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
+                    { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
+                    { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
+                    { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
+                    { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
+                    { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
+                    { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
+                    { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
+                    { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
+                ]
+            } */
         }
     },
-    props: ['floorsArr'],
     mounted() {
         this.init()
     },
@@ -65,6 +99,16 @@ export default {
         // }
     },
     methods: {
+        mousedown() {
+            this.startTime = new Date()
+            console.log()
+        },
+        mouseup() {
+            this.endTime = new Date()
+            if (this.endTime - this.startTime < 200) {
+                return false
+            }
+        },
         init() {
             if (!this.floorsArr.length) {
                 return false
@@ -95,27 +139,12 @@ export default {
             }
             // 数据处理
             this.handleCookie()
-            //楼层位置处理,
-            const inner = document.querySelectorAll('.floor-item')
-            const innerbox = document.querySelector('.floor-center')
-            // 页面显示5条,当第五条以上,进行marginTop修改
-            // index从0开始
-            // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
-            let showNumber = 5, //页面中展示的楼层条数
-                height = 32, //一个楼层的div标签高度
-                timer = 500 //动画时长
-            // flag 为0时,timer设置为0
-            flag === 0 && (timer = 0)
-            if (index >= showNumber - 1) {
-                animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
-                // index < len - 1 && animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
-            } else {
-                // 前 showNumber 条的margin-top设置为0
-                animate(innerbox, { marginTop: 0 }, 500)
-            }
+            // 楼层位置动画处理
+            this.handlePosition(flag, index, len)
             // 处理上下按钮禁用逻辑
             this.handleUpDownStatus(index, len)
         },
+
         /**
          * @name handleUpDownStatus
          * @param { Number } index 当前楼层在floorIdArr中的下标
@@ -148,6 +177,7 @@ export default {
          * @description cookie数据处理
          */
         handleCookie() {
+            // return true
             let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
             this.$cookie.set('floorNow', currentFloor.code, 3)
             this.$cookie.set('floorMapId', currentFloor.gname, 3)
@@ -164,45 +194,34 @@ export default {
         tabFloor(item, index) {
             this.currentFloorId = this.floorIdArr[index]
             this.handleCookie()
+            this.handlePosition(1, index, this.floorIdArr.length)
             this.handleUpDownStatus(index, this.floorIdArr.length)
         },
-        removeTop(num) {
-            //console.log(num)
-            if (num == -1) {
-                this.num = num
-                this.showT = false
-                this.showB = true
-            }
-            var inner = document.querySelectorAll('.floor-item')
-            var innerbox = document.querySelector('.floor-center')
-            if (this.num < 0) {
-                this.num++
-            } else {
-                this.num = 0
-                this.showT = false
-            }
-            if (this.num <= 0) {
-                animate(innerbox, { marginTop: 32 * this.num }, 500, function() {})
-            }
-        },
-        removeBottom(num) {
-            //console.log(num)
-            // let num = 0
-            if (num == -2) {
-                this.num = num
-                this.showB = false
-                this.showT = true
-            }
-            var inner = document.querySelectorAll('.floor-item')
-            var innerbox = document.querySelector('.floor-center')
-            if (this.num > -(inner.length - 4)) {
-                this.num--
+        /**
+         * @description 楼层位置动画处理
+         * @param flag 是否启用动画时长 0:不启用  其他 启动
+         * @param index 楼层 在floorIdArr中的下标
+         * @param len floorIdArr长度
+         */
+        handlePosition(flag, index, len) {
+            //楼层位置处理
+            // 页面显示5条,当第五条以上,进行marginTop修改
+            // index从0开始
+            // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
+            let showNumber = 5, //页面中展示的楼层条数
+                height = 32, //一个楼层的div标签高度
+                timer = 500 //动画时长
+            // flag 为0时,timer设置为0
+            flag === 0 && (timer = 0)
+            if (index >= showNumber - 1) {
+                if (index < len - 1) {
+                    this.marginTop = -height * (index - (showNumber - 2)) + 'px'
+                } else if ((index = len - 1)) {
+                    this.marginTop = -height * (index - (showNumber - 1)) + 'px'
+                }
             } else {
-                this.num = -(inner.length - 4)
-                this.showB = false
-            }
-            if (this.num > -(inner.length - 4)) {
-                animate(innerbox, { marginTop: 32 * this.num }, 500, function() {})
+                // 前 showNumber 条的margin-top设置为0
+                this.marginTop = 0
             }
         }
     }
@@ -216,8 +235,7 @@ export default {
     z-index: 2;
     .floor-list {
         width: 44px;
-        height: 212px;
-        // height: 312px;
+        // height: 212px;
         background: rgba(255, 255, 255, 1);
         box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
         border-radius: 2px;
@@ -226,8 +244,6 @@ export default {
         text-align: center;
         .floor-out {
             height: 160px;
-            // height: 312px;
-            //TODO:
             overflow: hidden;
             // overflow-y: auto;
             position: relative;
@@ -236,8 +252,7 @@ export default {
             // }
 
             .floor-center {
-                // TODO:
-                // margin-top: 0 !important;
+                transition: all linear 0.8s;
                 .floor-item {
                     width: 36px;
                     height: 32px;
@@ -279,5 +294,8 @@ export default {
             line-height: 32px;
         }
     }
+    .disabled {
+        cursor: not-allowed !important;
+    }
 }
 </style>

+ 88 - 76
src/components/floorListOther.vue

@@ -6,14 +6,19 @@
 <template>
     <div class='floor-box'>
         <div class='floor-list'>
-            <!-- <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop(num)'></i> -->
             <div v-if='floorsArr.length>5'>
-                <i class='el-icon-caret-top icon-top' v-if='showT' @click='changeFloor(1)'></i>
-                <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
+                <i
+                    class='el-icon-caret-top icon-top'
+                    :class='{disabled:currentFloorId == floorsArr[0].seq }'
+                    v-if='showT'
+                    @click='changeFloor(1)'
+                    @mousedown='mousedown'
+                    @mouseup='mouseup'
+                ></i>
+                <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
             </div>
-
             <div class='floor-out'>
-                <div class='floor-center'>
+                <div class='floor-center' :style='{ marginTop : marginTop }'>
                     <div
                         class='floor-item'
                         :class='item.seq == currentFloorId?"isActive":""'
@@ -23,16 +28,24 @@
                     >{{item.code}}</div>
                 </div>
             </div>
-            <!-- <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom(num)'></i> -->
             <div v-if='floorsArr.length>5'>
-                <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='changeFloor(-1)'></i>
-                <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
+                <i
+                    class='el-icon-caret-bottom icon-bottom'
+                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
+                    v-if='showB'
+                    @click='changeFloor(-1)'
+                ></i>
+                <i
+                    class='el-icon-caret-bottom icon-bottom'
+                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
+                    v-else
+                    style='color:#ccc'
+                ></i>
             </div>
         </div>
     </div>
 </template>
 <script>
-import { animate } from '@/utils/animate.js'
 export default {
     data() {
         return {
@@ -48,14 +61,32 @@ export default {
                 name: '第1层',
                 seq: 100
             },
-            currentFloorId: null
+            currentFloorId: null,
+            marginTop: 0,
+            startTime: '',
+            endTime: ''
+        }
+    },
+    props: {
+        floorsArr: {
+            type: Array
+            /*  default: () => {
+                return [
+                    { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
+                    { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
+                    { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
+                    { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
+                    { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
+                    { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
+                    { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
+                    { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
+                    { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
+                    { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
+                ]
+            } */
         }
     },
-    props: ['floorsArr'],
     mounted() {
-        //console.log('this.floorsArrthis.floorsArrthis.floorsArrthis.floorsArr', this.floorsArr)
-        // this.removeBottom(-1)
-        // this.tabFloor()
         this.init()
     },
     watch: {
@@ -68,6 +99,16 @@ export default {
         // }
     },
     methods: {
+        mousedown() {
+            this.startTime = new Date()
+            console.log()
+        },
+        mouseup() {
+            this.endTime = new Date()
+            if (this.endTime - this.startTime < 200) {
+                return false
+            }
+        },
         init() {
             if (!this.floorsArr.length) {
                 return false
@@ -76,7 +117,6 @@ export default {
             this.floorsArr.map(item => {
                 this.floorIdArr.push(item.seq)
             })
-            // this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
             this.currentFloorId = this.floorsArr[0].seq
             this.changeFloor(0)
         },
@@ -99,27 +139,12 @@ export default {
             }
             // 数据处理
             this.handleCookie()
-            //楼层位置处理,
-            const inner = document.querySelectorAll('.floor-item')
-            const innerbox = document.querySelector('.floor-center')
-            // 页面显示5条,当第五条以上,进行marginTop修改
-            // index从0开始
-            // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
-            let showNumber = 5, //页面中展示的楼层条数
-                height = 32, //一个楼层的div标签高度
-                timer = 500 //动画时长
-            // flag 为0时,timer设置为0
-            flag === 0 && (timer = 0)
-            if (index >= showNumber - 1) {
-                animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
-                // index < len - 1 && animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
-            } else {
-                // 前 showNumber 条的margin-top设置为0
-                animate(innerbox, { marginTop: 0 }, 500)
-            }
+            // 楼层位置动画处理
+            this.handlePosition(flag, index, len)
             // 处理上下按钮禁用逻辑
             this.handleUpDownStatus(index, len)
         },
+
         /**
          * @name handleUpDownStatus
          * @param { Number } index 当前楼层在floorIdArr中的下标
@@ -152,6 +177,7 @@ export default {
          * @description cookie数据处理
          */
         handleCookie() {
+            // return true
             let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
             // this.$cookie.set('floorNow', currentFloor.code, 3)
             // this.$cookie.set('floorMapId', currentFloor.gname, 3)
@@ -168,45 +194,34 @@ export default {
         tabFloor(item, index) {
             this.currentFloorId = this.floorIdArr[index]
             this.handleCookie()
+            this.handlePosition(1, index, this.floorIdArr.length)
             this.handleUpDownStatus(index, this.floorIdArr.length)
         },
-        removeTop(num) {
-            //console.log(num)
-            if (num == -1) {
-                this.num = num
-                this.showT = false
-                this.showB = true
-            }
-            var inner = document.querySelectorAll('.floor-item')
-            var innerbox = document.querySelector('.floor-center')
-            if (this.num < 0) {
-                this.num++
-            } else {
-                this.num = 0
-                this.showT = false
-            }
-            if (this.num <= 0) {
-                animate(innerbox, { marginTop: 32 * this.num }, 500, function() {})
-            }
-        },
-        removeBottom(num) {
-            //console.log(num)
-            // let num = 0
-            if (num == -2) {
-                this.num = num
-                this.showB = false
-                this.showT = true
-            }
-            var inner = document.querySelectorAll('.floor-item')
-            var innerbox = document.querySelector('.floor-center')
-            if (this.num > -(inner.length - 4)) {
-                this.num--
+        /**
+         * @description 楼层位置动画处理
+         * @param flag 是否启用动画时长 0:不启用  其他 启动
+         * @param index 楼层 在floorIdArr中的下标
+         * @param len floorIdArr长度
+         */
+        handlePosition(flag, index, len) {
+            //楼层位置处理
+            // 页面显示5条,当第五条以上,进行marginTop修改
+            // index从0开始
+            // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
+            let showNumber = 5, //页面中展示的楼层条数
+                height = 32, //一个楼层的div标签高度
+                timer = 500 //动画时长
+            // flag 为0时,timer设置为0
+            flag === 0 && (timer = 0)
+            if (index >= showNumber - 1) {
+                if (index < len - 1) {
+                    this.marginTop = -height * (index - (showNumber - 2)) + 'px'
+                } else if ((index = len - 1)) {
+                    this.marginTop = -height * (index - (showNumber - 1)) + 'px'
+                }
             } else {
-                this.num = -(inner.length - 4)
-                this.showB = false
-            }
-            if (this.num > -(inner.length - 4)) {
-                animate(innerbox, { marginTop: 32 * this.num }, 500, function() {})
+                // 前 showNumber 条的margin-top设置为0
+                this.marginTop = 0
             }
         }
     }
@@ -220,8 +235,6 @@ export default {
     z-index: 2;
     .floor-list {
         width: 44px;
-        // height: 212px;
-        // height: 312px;
         background: rgba(255, 255, 255, 1);
         box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
         border-radius: 2px;
@@ -229,9 +242,6 @@ export default {
         padding: 28px 4px;
         text-align: center;
         .floor-out {
-            // height: 160px;
-            // height: 312px;
-            //TODO:
             overflow: hidden;
             // overflow-y: auto;
             position: relative;
@@ -240,8 +250,7 @@ export default {
             // }
 
             .floor-center {
-                // TODO:
-                // margin-top: 0 !important;
+                transition: all linear 0.8s;
                 .floor-item {
                     width: 36px;
                     height: 32px;
@@ -283,5 +292,8 @@ export default {
             line-height: 32px;
         }
     }
+    .disabled {
+        cursor: not-allowed !important;
+    }
 }
 </style>

+ 5 - 1
vue.config.js

@@ -1,6 +1,8 @@
 module.exports = {
     devServer: {
+        port: 8090,
         proxy: {
+            // 工程信息化服务
             '/data': {
                 target: 'http://192.168.200.87:9003',
                 changeOrigin: true,
@@ -9,6 +11,7 @@ module.exports = {
                     '^/data': '',
                 },
             },
+            // 万达蜂鸟服务
             '/wdfn': {
                 target: 'http://map.wanda.cn',
                 changeOrigin: true,
@@ -16,6 +19,7 @@ module.exports = {
                     '^/wdfn': '/editor',
                 },
             },
+            // 图例库服务
             '/serve': {
                 target: 'http://192.168.200.87:8088',
                 // target: 'http://192.168.200.83:8085',
@@ -55,4 +59,4 @@ module.exports = {
     outputDir: 'wandaBmGuide',
     // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
     assetsDir: 'static',
-}
+}