vue中js让悬浮菜单div循环上下移动

电脑版发表于：2020/7/28 17:57

<img src="https://img.tnblog.net/arcimg/aojiancc2/d7508ebb427e4c449a0389eddd2b5709.gif" width="150px">

### 封装的方法：
```
runEle() {
  const thisTemp = this

  const suspendmenuentrydiv = document.getElementById('suspendmenuentrydiv')
  const initValue = 66
  // 初始化一个不然好像获取不到
  suspendmenuentrydiv.style.bottom = initValue + 'px'

  let flag = true // 切换条件
  const num = 50 // 加到最大值
  let start = 0 // 起始值
  let isMove = true

  // 鼠标放上去就停止移动
  suspendmenuentrydiv.onmouseover = function() {
    isMove = false
  }
  // 鼠标移出就继续移动
  suspendmenuentrydiv.onmouseout = function() {
    isMove = true
    // 移出的时候把菜单设置为关闭
    // thisTemp.isShow = false
  }
  suspendmenuentrydiv.onmouseleave = function() {
    isMove = true
    // thisTemp.isShow = false
  }

  setInterval(function() {
    if (isMove) {
        if (flag) {
          start = start + 1
          if (start === num) {
              flag = false
          }
        } else {
          start = start - 1
          if (start === 0) {
              flag = true
          }
        }
        // 移出中把菜单设置为关闭试试
        thisTemp.isShow = false
        suspendmenuentrydiv.style.bottom = (initValue + start) + 'px'
    }
  }, 90)
}
```
使用的时候调用一下方法即可
```
mounted() {
  this.runEle()
}
```
### 完整的代码，贴一下
```

<template>
  <div>
    
    <div v-drag id="suspendmenuentrydiv" class="realTranslationInfos">
      <div class="RealtranslationBox">
        <el-collapse-transition>
          <div v-show="isShow">
            <div style="margin-top: 12px;text-align: center;">
              <img
                draggable="false"
                src="@/assets/imgs/chat/xiaozu.png"
                alt=""
                width="56px"
                height="56px"
                @click="openChatMain()"
              >
              <div>
                小足学习助手
              </div>
            </div>
            <div style="margin-top: 10px;text-align: center;margin-bottom: 10px;">
              <img
                draggable="false"
                src="@/assets/imgs/chat/feedback2.png"
                alt=""
                width="56px"
                height="56px"
                @click="openFeedbackDialog()"
              >
              <div>
                用户反馈
              </div>
            </div>
          </div>
        </el-collapse-transition>
        
        <div style="height:66px;text-align: center;">
          <img
            draggable="false"
            src="@/assets/imgs/chat/entry.png"
            alt=""
            width="66px"
            height="66px"
            @click="showMneu()">
        </div>
      </div>
    </div>
    

    
    <FeedbackDialog ref="feedbackDialog" data-from-type="allin" />
  </div>
</template>

<script>
import FeedbackDialog from '@/pages/feedback/feedbackDialog.vue'
// collapse 展开折叠
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
    // 组件名字
    name: 'FeedBack',
    components: {
        FeedbackDialog
    },
    // 组件参数
    props: {
        id: {
            type: String,
            default: ''
        },
        dataFromType: {
            type: [Number, String],
            default: 'allin'
        }
    },
    data() {
        return {
            isShow: false,
            // 用来给自己封装的弹窗组件传递参数
            dialogVisible: false
        }
    },
    mounted() {
      this.runEle()
    },
    // 组件方法
    methods: {
        runEle() {
          const thisTemp = this

          const suspendmenuentrydiv = document.getElementById('suspendmenuentrydiv')
          const initValue = 66
          // 初始化一个不然好像获取不到
          suspendmenuentrydiv.style.bottom = initValue + 'px'

          let flag = true // 切换条件
          const num = 50 // 加到最大值
          let start = 0 // 起始值
          let isMove = true

          // 鼠标放上去就停止移动
          suspendmenuentrydiv.onmouseover = function() {
            isMove = false
          }
          // 鼠标移出就继续移动
          suspendmenuentrydiv.onmouseout = function() {
            isMove = true
            // 移出的时候把菜单设置为关闭
            // thisTemp.isShow = false
          }
          suspendmenuentrydiv.onmouseleave = function() {
            isMove = true
            // thisTemp.isShow = false
          }

          setInterval(function() {
            if (isMove) {
                if (flag) {
                  start = start + 1
                  if (start === num) {
                      flag = false
                  }
                } else {
                  start = start - 1
                  if (start === 0) {
                      flag = true
                  }
                }
                // 移出中把菜单设置为关闭试试
                thisTemp.isShow = false
                suspendmenuentrydiv.style.bottom = (initValue + start) + 'px'
            }
          }, 90)
        },
        openFeedbackDialog() {
            // 调用子组件的方法打开弹窗
            this.$refs.feedbackDialog.openFeedbackDialog(this.dataFromType)
        },
        showMneu() {
            this.isShow = !this.isShow
        },
        openChatMain() {
            const page = this.$router.resolve({
                name: 'chatmain'    // 这里是跳转页面的name
             })

             // console.log(page.href)
             window.open(page.href, '_blank') // 打开新的页面
        }
    }
}
</script>
<style scoped="scoped" lang="scss">
.realTranslationInfos {
    width: 60px;
    height: 60px;
    // background: red;
    position: fixed;
    // position: absolute;
    bottom: 66px;
    right: 23px;
    width:80px;

    // bottom: 122px;
    // right: -30px;
    .translationContent {
        min-height: 100px;
        line-height: 23px;
        width: 338px;
        padding: 18px 74px 19px 19px;
        background: #004CB3;
        opacity: 0.80;
        border-radius: 12px;
        color: #fff;
        position: fixed;
        // position: absolute;
        right: 58px;
        bottom: 22px;
        z-index: 99999;
    }

    .RealtranslationBox {
        // display: flex;
        align-items: center;
        position: absolute;
        right: 2px;
        bottom: 5px;
        z-index: 99999;

        background: #E7F4FF;
        border-radius: 37px;

        img {
            cursor: pointer;
        }
    }
}
</style>
```

剑轩

vue中js让悬浮菜单div循环上下移动

{{item.title}}