floorList.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <div class='floor-box'>
  3. <div class='floor-list'>
  4. <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
  5. <a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
  6. <span class='floors'>
  7. <span class='font-group'>
  8. <span
  9. class='eq-floor'
  10. v-for='(item,index) in floors'
  11. :class='item.id==floorId?"isActive":""'
  12. :key='index'
  13. @click='tabFloor(item)'
  14. >{{item.floorName}}</span>
  15. </span>
  16. </span>
  17. <a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
  18. <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. floorId: 'f1',
  27. floorName: 'F3',
  28. showTopButton: true,
  29. showBottomButton: true
  30. }
  31. },
  32. props: {
  33. floors: {
  34. default: []
  35. }
  36. },
  37. methods: {
  38. tabFloor(item) {
  39. this.showTopButton = true
  40. this.showBottomButton = true
  41. this.floorId = item.id
  42. this.floorName = item.floorName
  43. this.$emit('emitFloor', item)
  44. let tempFloorIdList = []
  45. this.floors.map(el => {
  46. tempFloorIdList.push(el.id)
  47. })
  48. tempFloorIdList.forEach((el, index) => {
  49. if (item.id == el) {
  50. if (index == 0) {
  51. this.showTopButton = false
  52. }
  53. if (index == this.floors.length - 1) {
  54. this.showBottomButton = false
  55. }
  56. }
  57. })
  58. },
  59. removeTop() {
  60. let tempFloorIdList = []
  61. let tempFloorIndex = 0
  62. let clickCount = 0
  63. this.floors.map(el => {
  64. tempFloorIdList.push(el.id)
  65. })
  66. tempFloorIdList.forEach((el, index) => {
  67. if (el == this.floorId) {
  68. tempFloorIndex = index
  69. if (tempFloorIndex == 1) {
  70. this.showTopButton = false
  71. }
  72. if (tempFloorIndex != 0) {
  73. tempFloorIndex--
  74. clickCount += 1
  75. let fontGroup = document.querySelector('.font-group')
  76. fontGroup.style.top = 254 - clickCount * 40 + 'px'
  77. this.showBottomButton = true
  78. }
  79. console.log(tempFloorIndex)
  80. }
  81. })
  82. this.floorId = tempFloorIdList[tempFloorIndex]
  83. },
  84. removeBottom() {
  85. let tempFloorIdList = []
  86. let tempFloorIndex = 0
  87. let clickCount = 0
  88. this.floors.map(el => {
  89. tempFloorIdList.push(el.id)
  90. })
  91. console.log(tempFloorIdList)
  92. tempFloorIdList.forEach((el, index) => {
  93. if (el == this.floorId) {
  94. tempFloorIndex = index
  95. if (tempFloorIndex == tempFloorIdList.length - 2) {
  96. this.showBottomButton = false
  97. }
  98. if (tempFloorIndex != tempFloorIdList.length - 1) {
  99. tempFloorIndex++
  100. clickCount += 1
  101. let fontGroup = document.querySelector('.font-group')
  102. fontGroup.style.top += clickCount * 40 + 'px'
  103. this.showTopButton = true
  104. }
  105. }
  106. })
  107. this.floorId = tempFloorIdList[tempFloorIndex]
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="less" scoped>
  113. .floor-box {
  114. position: fixed;
  115. top: 154px;
  116. right: 32px;
  117. .floor-list {
  118. position: fixed;
  119. right: 32px;
  120. top: 208px;
  121. width: 40px;
  122. background: #ffffff;
  123. text-align: center;
  124. .floors {
  125. position: fixed;
  126. right: 32px;
  127. top: 234px;
  128. width: 40px;
  129. height: 140px;
  130. background: #ffffff;
  131. text-align: center;
  132. overflow: hidden;
  133. display: flex;
  134. flex-direction: column;
  135. .font-group {
  136. position: fixed;
  137. right: 36px;
  138. top: 234px;
  139. width: 36px;
  140. background: #ffffff;
  141. text-align: center;
  142. display: flex;
  143. flex-direction: column;
  144. .eq-floor {
  145. width: 36px;
  146. height: 28px;
  147. line-height: 28px;
  148. text-align: center;
  149. background: #fff;
  150. display: block;
  151. cursor: pointer;
  152. font-size: 14px;
  153. margin-left: 2px;
  154. border-radius: 4px;
  155. }
  156. .isActive {
  157. color: #025baa;
  158. background: #e1f2ff;
  159. }
  160. }
  161. }
  162. .i-style1 {
  163. right: 32px;
  164. position: fixed;
  165. top: 210px;
  166. width: 40px;
  167. height: 28px;
  168. background: #fff;
  169. text-align: center;
  170. line-height: 28px;
  171. }
  172. .i-style2 {
  173. right: 32px;
  174. position: fixed;
  175. top: 374px;
  176. width: 40px;
  177. height: 28px;
  178. background: #fff;
  179. text-align: center;
  180. line-height: 28px;
  181. }
  182. }
  183. }
  184. </style>