vue h5 固定位置的悬浮按钮

记录用

App.vue

<template>
  <div class="app">
    <router-view/>
   
    <div class="contact" v-if="user && user.detail && user.detail.custManagerTel"  @click="contact = !contact" :class="{'hide': !contact, 'show': contact}">
      <div class="btn" >
        <div>联系</div><div>我们</div>
      </div>
      <div class="context">
        <div style="width: 100%;">请联系您的专属客户经理</div>
        <div style="width: 100%;">手机号码: <a :href="`tel:${user.detail.custManagerTel}`">{{user.detail.custManagerTel}}</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
import { mapActions, mapGetters } from "vuex";

export default {
  name: "app",
  data() {
    return {
      contact: false
    };
  },
  components: { Tabbar, TabbarItem },
  mounted() {
  },
  computed: {
    ...mapGetters(['user']),
    tabShow(){return this.$store.getters.tabShow}
  },
  methods: {
    
  }
};
</script>
<style scoped lang="less" >
  .app{
    display: flex;
    flex: 1;
    height: 100%;
    
    flex-direction: column;
  }

  .contact{
    position:fixed;
    right: 0px;
    bottom: 60px;
    height: 56px;
    
    overflow:hidden;
    transition: width .6s;

    .btn{
      font-size: 14px;
      text-align: center;
      border-radius: 10px 0px 0px 10px;
      padding: 6px 5px;
      background-color: #3c93ef35;
    }
    .context{
      overflow:hidden;
      background-color: #3c93ef35;
      padding: 6px 5px;
      border-radius: 10px 0px 0px 10px;
      font-size: 14px;
      transition: all 5s;
      > div{
        height: 20px;
        overflow:hidden;
      }
    }


    &.hide{
      width: 40px;
      .btn{
        display: block;
      }
      .context{
        display: none;
      }
    }
    &.show{
      width: 170px;
      .btn{
        display: none;
      }
      .context{
        display: block;
      }
    }

  }
</style>