悬浮按钮

1. 说明

整体样式是基于Vant框架基础进行搭建

2. 组件实现 MyFabBtn.vue

<!-- 组件模板 -->
<template>
  <div
    class="fabbtn animation"
    :style="{ height: isShow ? (btnNumber + 1) * 50 + btnNumber - 1 + 'px' : '50px' }"
  >
    <div
      class="content animation"
      :style="{ height: isShow ? btnNumber * 50 + btnNumber - 1 + 'px' : '0' }"
    >
      <template v-for="(item, index) in labels" :key="index">
        <div
          v-if="isShow"
          :style="{ color: item.color }"
          class="item item-fab"
          :class="[
            index == 0
              ? 'item-top'
              : index == btnNumber - 1
              ? 'item-bottom'
              : 'item-center',
            isShow ? 'item-fab-active' : '',
          ]"
          @click="tapClick(index)"
        >
          {{ item.label }}
        </div>
      </template>
    </div>
    <div class="item submit" @click="tapSubmit">
      {{ isShow ? "取消" : text }}
    </div>
  </div>
</template>

<script>
import { ref, toRefs } from "vue";
import {} from "vant";
export default {
  props: {
    text: String,
    labels: Array,
  },
  emits: ["tap"], //抛出的事件名
  setup(props, context) {
    const { labels } = toRefs(props);
    let btnNumber = labels.value.length;
    console.log(btnNumber);
    let isShow = ref(false);

    const tapClick = (index) => {
      context.emit("tap", index);
    };

    const tapSubmit = () => {
      isShow.value = !isShow.value;
    };
    return { isShow, btnNumber, tapSubmit, tapClick };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.fabbtn {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: center;
  z-index: 10;
  width: 50px;
  height: 50px;
  bottom: 50px;
  right: 30px;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  width: 50px;
  height: 50px;
  color: #909399;
  flex: 1;
}
.item-top {
  height: 55px!important;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom: 1px solid #eee;
}
.item-center {
  border-bottom: 1px solid #eee;
}
.item-bottom {
  height: 45px!important;
}
.submit {
  background: #409eff;
  color: #fff;
  border-radius: 25px;
  height: 50px !important;
}
.animation {
  transition-property: height;
  transition-duration: 0.2s;
}

.item-fab {
  opacity: 0;
  transition: opacity 1s;
}
.item-fab-active {
  opacity: 1;
}
</style>

3. 组件使用

<template>
  <van-nav-bar title="测试页面" fixed placeholder safe-area-inset-top></van-nav-bar>

  <my-fab-btn text="确定" :labels="btns" @tap="tapClick" />
</template>

<script>
import { NavBar } from "vant";
import MyFabBtn from "../../components/example/MyFabBtn.vue";
export default {
  components: {
    MyFabBtn,
    [NavBar.name]: NavBar,
  },
  setup() {
    let btns = [{
        label:'评论',
        color:'#409EFF'
    },{
        label:'微信',
        color:'#F56C6C'
    },{
        label:'微博',
        color:'#409EFF'
    },{
        label:'QQ',
        color:'#E6A23C'
    },{
        label:'简书',
        color:'#67C23A'
    }];

    const tapClick=(index)=>{
        console.log(index);
        //根据索引实现点击按钮
    }
    return { btns ,tapClick};
  },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped></style>