floorList.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.06.02
  4. *@info:楼层列表
  5. */
  6. <template>
  7. <div class='floor-box'>
  8. <div class='floor-list'>
  9. <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop(num)'></i>
  10. <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
  11. <div class='floor-out'>
  12. <div class='floor-center'>
  13. <div
  14. class='floor-item'
  15. :class='item==floorId?"isActive":""'
  16. @click='tabFloor(item,index)'
  17. v-for='(item,index) in floorsArr'
  18. :key='index'
  19. >{{item}}</div>
  20. </div>
  21. </div>
  22. <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom(num)'></i>
  23. <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. import { animate } from '@/utils/animate.js'
  29. import { mapGetters } from 'vuex'
  30. export default {
  31. data() {
  32. return {
  33. floorId: '',
  34. showT: true,
  35. showB: true,
  36. num: 0
  37. }
  38. },
  39. mounted() {
  40. this.removeBottom(-5)
  41. this.tabFloor()
  42. },
  43. computed: {
  44. ...mapGetters(['floorsArr'])
  45. },
  46. methods: {
  47. tabFloor(item = '1F', index) {
  48. this.showT = true
  49. this.showB = true
  50. this.$cookie.set('floorNow', item, 3)
  51. this.floorId = this.$cookie.get('floorNow') || item
  52. console.log(index)
  53. this.$emit('emitFloor', index + 1)
  54. },
  55. removeTop(num) {
  56. this.num = num
  57. var inner = document.querySelectorAll('.floor-item')
  58. var innerbox = document.querySelector('.floor-center')
  59. if (this.num < 0) {
  60. this.num++
  61. } else {
  62. this.num = 0
  63. this.showT = false
  64. }
  65. if (this.num <= 0) {
  66. animate(innerbox, { marginTop: 28 * this.num }, 500, function() {})
  67. }
  68. },
  69. removeBottom(num) {
  70. console.log(num)
  71. this.num = num
  72. var inner = document.querySelectorAll('.floor-item')
  73. var innerbox = document.querySelector('.floor-center')
  74. if (this.num > -(inner.length - 4)) {
  75. this.num--
  76. } else {
  77. this.num = -(inner.length - 4)
  78. this.showB = false
  79. }
  80. if (this.num > -(inner.length - 4)) {
  81. animate(innerbox, { marginTop: 28 * this.num }, 500, function() {})
  82. }
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="less" scoped>
  88. .floor-box {
  89. position: fixed;
  90. right: 32px;
  91. top: 196px;
  92. .floor-list {
  93. width: 44px;
  94. height: 212px;
  95. background: rgba(255, 255, 255, 1);
  96. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  97. border-radius: 2px;
  98. position: relative;
  99. padding: 28px 4px;
  100. text-align: center;
  101. .floor-out {
  102. height: 160px;
  103. overflow: hidden;
  104. overflow-y: auto;
  105. position: relative;
  106. &::-webkit-scrollbar {
  107. display: none;
  108. }
  109. .floor-center {
  110. .floor-item {
  111. width: 36px;
  112. height: 28px;
  113. margin: 3px 0;
  114. cursor: pointer;
  115. }
  116. }
  117. }
  118. .icon-top {
  119. text-align: center;
  120. font-size: 18px;
  121. margin: 0 auto;
  122. display: flex;
  123. justify-content: center;
  124. position: absolute;
  125. top: 0;
  126. right: 0;
  127. width: 100%;
  128. cursor: pointer;
  129. margin-top: 5px;
  130. }
  131. .icon-bottom {
  132. text-align: center;
  133. font-size: 18px;
  134. margin: 0 auto;
  135. display: flex;
  136. justify-content: center;
  137. position: absolute;
  138. bottom: 0;
  139. right: 0;
  140. width: 100%;
  141. margin-bottom: 5px;
  142. cursor: pointer;
  143. line-height: 28px;
  144. }
  145. .isActive {
  146. border-radius: 4px;
  147. color: #025baa;
  148. background: #e1f2ff;
  149. line-height: 28px;
  150. }
  151. }
  152. }
  153. </style>