利用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代码

 

    

    

      

        
        更多
      
    
    

      

        

          
          
          
{{ item.name }}
        
      
    
  

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样式

6.实现的结果展示