123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <template>
- <div class='floor-box'>
- <div class='floor-list'>
- <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
- <a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
- <span class='floors'>
- <span class='font-group'>
- <span
- class='eq-floor'
- v-for='(item,index) in floors'
- :class='item.id==floorId?"isActive":""'
- :key='index'
- @click='tabFloor(item)'
- >{{item.floorName}}</span>
- </span>
- </span>
- <a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
- <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- floorId: 'f1',
- floorName: 'F3',
- showTopButton: true,
- showBottomButton: true
- }
- },
- props: {
- floors: {
- default: []
- }
- },
- methods: {
- tabFloor(item) {
- this.showTopButton = true
- this.showBottomButton = true
- this.floorId = item.id
- this.floorName = item.floorName
- this.$emit('emitFloor', item)
- let tempFloorIdList = []
- this.floors.map(el => {
- tempFloorIdList.push(el.id)
- })
- tempFloorIdList.forEach((el, index) => {
- if (item.id == el) {
- if (index == 0) {
- this.showTopButton = false
- }
- if (index == this.floors.length - 1) {
- this.showBottomButton = false
- }
- }
- })
- },
- removeTop() {
- let tempFloorIdList = []
- let tempFloorIndex = 0
- let clickCount = 0
- this.floors.map(el => {
- tempFloorIdList.push(el.id)
- })
- tempFloorIdList.forEach((el, index) => {
- if (el == this.floorId) {
- tempFloorIndex = index
- if (tempFloorIndex == 1) {
- this.showTopButton = false
- }
- if (tempFloorIndex != 0) {
- tempFloorIndex--
- clickCount += 1
- let fontGroup = document.querySelector('.font-group')
- fontGroup.style.top = 254 - clickCount * 40 + 'px'
- this.showBottomButton = true
- }
- console.log(tempFloorIndex)
- }
- })
- this.floorId = tempFloorIdList[tempFloorIndex]
- },
- removeBottom() {
- let tempFloorIdList = []
- let tempFloorIndex = 0
- let clickCount = 0
- this.floors.map(el => {
- tempFloorIdList.push(el.id)
- })
- console.log(tempFloorIdList)
- tempFloorIdList.forEach((el, index) => {
- if (el == this.floorId) {
- tempFloorIndex = index
- if (tempFloorIndex == tempFloorIdList.length - 2) {
- this.showBottomButton = false
- }
- if (tempFloorIndex != tempFloorIdList.length - 1) {
- tempFloorIndex++
- clickCount += 1
- let fontGroup = document.querySelector('.font-group')
- fontGroup.style.top += clickCount * 40 + 'px'
- this.showTopButton = true
- }
- }
- })
- this.floorId = tempFloorIdList[tempFloorIndex]
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .floor-box {
- position: fixed;
- top: 154px;
- right: 32px;
- .floor-list {
- position: fixed;
- right: 32px;
- top: 208px;
- width: 40px;
- background: #ffffff;
- text-align: center;
- .floors {
- position: fixed;
- right: 32px;
- top: 234px;
- width: 40px;
- height: 140px;
- background: #ffffff;
- text-align: center;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- .font-group {
- position: fixed;
- right: 36px;
- top: 234px;
- width: 36px;
- background: #ffffff;
- text-align: center;
- display: flex;
- flex-direction: column;
- .eq-floor {
- width: 36px;
- height: 28px;
- line-height: 28px;
- text-align: center;
- background: #fff;
- display: block;
- cursor: pointer;
- font-size: 14px;
- margin-left: 2px;
- border-radius: 4px;
- }
- .isActive {
- color: #025baa;
- background: #e1f2ff;
- }
- }
- }
- .i-style1 {
- right: 32px;
- position: fixed;
- top: 210px;
- width: 40px;
- height: 28px;
- background: #fff;
- text-align: center;
- line-height: 28px;
- }
- .i-style2 {
- right: 32px;
- position: fixed;
- top: 374px;
- width: 40px;
- height: 28px;
- background: #fff;
- text-align: center;
- line-height: 28px;
- }
- }
- }
- </style>
|