vue实现悬浮菜单，点击悬浮菜单可以展开。点击图片菜单进行页面跳转与弹窗打开

电脑版发表于：2023/2/16 22:22

### 代码如下
```

<template>
  <div>
    
    <div v-drag 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">
          <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="1" />
  </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: 0
        }
    },
    data() {
        return {
            isShow: false,
            // 用来给自己封装的弹窗组件传递参数
            dialogVisible: false
        }
    },
    mounted() {
    },
    // 组件方法
    methods: {
        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: 96px;
    right: 23px;

    // 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>
```
el-collapse-transition是element-ui封装的一个带点小动画的组件。悬浮菜单支持拖动，参考：xx

**要想这个悬浮菜单，在每个页面都可以用，只需要在App.vue通过组件引用即可**
```
<template>
  <div id="app">
    <router-view />
    <div v-if="locaUrl.indexOf('/chatmain')==-1&&locaUrl.indexOf('/login')==-1">
      <Suspendmenuentry />
    </div>
  </div>
</template>

<script>
// import Chatentry from '@/pages/chat/chatentry.vue'
import Suspendmenuentry  from '@/pages/suspendmenuentry.vue'

import Vue from 'vue'
export default {
  name: 'App',
  components: {
    Suspendmenuentry
  },
  data() {
    return {
       locaUrl: ''
    }
  },
  mounted() {
    this.locaUrl = location.href
    // console.log(this.$route)
    // console.log(this.$route.path)
    // console.log(this.$router)
  }
}
</script>

<style>
#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
body {
  margin: 0;
}
</style>
```
v-if是全局引用后过滤掉两个特殊的页面，不需要这个悬浮菜单的页面

剑轩

vue实现悬浮菜单，点击悬浮菜单可以展开。点击图片菜单进行页面跳转与弹窗打开

{{item.title}}