利用vue实现悬浮收缩功能

1.在data中定义模拟数组(注：根据数组需求可自行删改)

 template: [
        {
          category: "float-button",
          content: {
            image: "",
            list: [
              {
                btnimage: require("@/assets/images/boming.png"),
                image: require("@/assets/images/boming.png"),
                name: "分享报名",
                page: ["/pages/index/index", "/pages/index/category"],
                page_name: ["1", "2"],
                path: "/tempower",
                path_name: "",
                path_type: 1,
                style: 1,
              },
              {
                btnimage: require("@/assets/images/kechenng.png"),
                image: require("@/assets/images/kechenng.png"),
                name: "分享课程",
                page: ["/pages/index/index", "/pages/index/category"],
                page_name: ["1", "2"],
                path: "/studypower",
                path_name: "",
                path_type: 1,
                style: 2,
              },
              {
                btnimage: require("@/assets/images/xinxi.png"),
                image: require("@/assets/images/xinxi.png"),
                name: "修改信息",
                page: ["/pages/index/index", "/pages/index/category"],
                page_name: ["1", "2"],
                path: "/editinfo",
                path_name: "",
                path_type: 1,
                style: 3,
              },
            ],
          },
        },
      ],
      showBtnList: false,//按钮显示隐藏
      modalImg: "",//按钮的图片  可以设置成为div
      showBtn: false,//按钮
      isclick: true,//控制小红点
      temfos: "",//页面传参

2.子组件接参

 props: {
    btninfos: {
      default: null,
    },
  },

3.html代码

 <div class="shopro-float-btn" v-if="floatList && floatList.length">
    <div
      :class="{ 'btn-mark': showBtnList }"
      @touchmove.prevent="false"
      @mousewheel.prevent
      @click="hideBtnModal"
    ></div>
    <div class="cu-btn wechat-btn" @click="onBtn">
      <div class="wechat_img">
        <span></span>
        更多
      </div>
    </div>
    <div :class="showBtnList ? 'float--active' : 'float-list-box'">
      <div
        class="btn-img-box y-f"
        @click="onBtnItem(item,index)"
        v-for="(item,index) in floatList"
        :key="index"
      >
        <div class="btn-item">
          <span v-if="index==0&&isclick==true"></span>
          <img class="btn-img" :src="item.btnimage" mode="aspectFill" />
          <div class="btn-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>

4.js代码

 computed: {
    floatData() {
      if (this.template) {
        return this.template[0].content;
      }
      return null;
    },
    floatList() {
      var arr = this.template[0].content.list;
      return arr;
    },
  },
  mounted() {
    console.log(this.btninfos, "btninfos+++");
  },
  created() {
    if (sessionStorage.getItem("isclick")) {
      this.isclick = sessionStorage.getItem("isclick");
    }
  },
  methods: {
    hideBtnModal() {
      this.showBtnList = false;
    },
    onBtnItem(item, index) {
      console.log(item, index);
      if (index == 0 && item.path != "") {
        this.isclick = false;
        sessionStorage.setItem("isclick", this.isclick);
        this.$router.push(item.path);
        return;
      }
      if (index == 2 && item.path != "") {
        let editname = JSON.parse(sessionStorage.getItem("teminfo")).team_name;
        this.$router.push(item.path + "?editname=" + editname);
        return;
      }
      if (item.path) {
        this.$router.push(item.path);
      } else {
        this.$msg.inform("暂未开放~");
      }
    },
    onBtn() {
      if (this.floatList.length == 1) {
        this.modalImg = this.floatList[0].image;
        this.floatList[0].style == 2
          ? this.$router.push(this.floatList[0].path)
          : (this.showModal = true);
      } else {
        this.showBtnList = !this.showBtnList;
      }
    },
  },

5.style样式

<style scoped>
.btn-mark {
  z-index: -1;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgb(22, 22, 22, 0.7);
}
.cu-modal {
  z-index: 999999;
}
.shopro-float-btn {
  position: fixed;
  bottom: 220px;
  right: 15px;
  z-index: 888;
}
.float--active {
  position: absolute;
  bottom: 40px;
  left: 0;
  transform: scale(1);
  transition: all 0.2s linear;
}
.float-list-box {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0);
  transform-origin: bottom;
  opacity: 0;
  transition: all 0.2s linear;
}
.btn-item {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}
.btn-img {
  width: 30px;
  height: 30px;
  display: block;
  margin: auto;
}
.btn-name {
  font-size: 10px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.wechat-btn {
  box-shadow: 0px 0px 10px rgba(199, 199, 199, 0.22);
  border-radius: 50%;
  background: none;
  padding: 0;
}
.wechat_img {
  background: #69e46f;
  color: #fff;
  box-shadow: 0 0 10px rgb(141, 138, 138);
  border-radius: 50%;
  font-size: 14px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.wechat_img span,
.btn-item span {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  background: rgb(250, 28, 28);
  border-radius: 50%;
}
.modal-img {
  display: block;
  width: 305px;
}
.img-box {
  position: relative;
}
.cuIcon-roundclose {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: -40px;
  color: #fff;
  font-size: 30px;
  z-index: 99;
}
</style>

6.实现的结果展示