horzi_rai_wxa/components/suspen_button.vue

<template>
  <view class="suspen-button">
    <view
      class="px-suspen-button"
      :style="{ top: mobileTop, left: mobileLeft }"
      @touchmove.stop.prevent="onTouchMove"
      @touchend.stop.prevent="ontouchend"
    >
      <view :class="['center-button', 'px-button', { active: open }]" @click.stop="onOpen">
        <slot name="center"> </slot>
      </view>
      <view :class="['top-button', 'px-button', 'ot-button', open && 'active-top', !first && !open && 'hidden-top']">
        <slot name="top"> </slot>
      </view>
      <view :class="['left-button', 'px-button', 'ot-button', open && 'active-left', !first && !open && 'hidden-left']">
        <slot name="bottom"> </slot>
      </view>
      <view :class="['bottom-button', 'px-button', 'ot-button', open && 'active-bottom', !first && !open && 'hidden-bottom']">
        <slot name="left"> </slot>
      </view>
      <view class="px-suspen-close" @click="closeButtonHandler">
        <image class="px-suspen-close-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close-icon.png"></image>
      </view>
    </view>
    <view :class="[open ? 'mask-show' : '']" @click.stop="onOpen"> </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {},
    type: {
      type: String,
      default: "",
    },
    showSingInImg: {},
  },
  data() {
    return {
      first: true, //样式的一个切换
      open: false,
      mobileTop: "",
      mobileLeft: "",
      windowHeight: "",
      windowWidth: "",
      isLeft: "",
    };
  },
  mounted() {
    uni.getSystemInfo({
      success: (res) => {
        let width = res.windowWidth;
        let rate = 750.0 / width;
        this.windowHeight = res.windowHeight;
        this.windowWidth = width;
      },
    });
  },
  methods: {
    onOpen() {
      this.open = !this.open;
      this.first = false;
    },
    onTouchMove(e) {
      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;
      if (x < 0) {
        x = 0;
      } else if (x > this.windowWidth - this.size / this.rate) {
        x = this.windowWidth - this.size / this.rate;
      }
      this.isLeft = x;
      this.mobileLeft = x + "px";
      this.mobileTop = y + "px";
    },
    ontouchend() {
      if (!this.isLeft) return;
      this.mobileLeft = this.windowWidth - 85 + "px";
      this.isLeft = "";
    },

    // 点击了取消的按钮
    closeButtonHandler() {
      this.$emit("update:show", false);
      this.$emit("update:showSingInImg", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.suspen-button {
  width: 100%;
  height: 100%;
}
.mask-show {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.3s;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 90;
  transition: all 0.3s ease-in-out 0s;
  transform: scale(1, 1);
}
.px-suspen-button {
  position: fixed;
  z-index: 99;
  bottom: 320rpx;
  right: 180rpx;
}
.px-suspen-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rpx;
  height: 60rpx;
  z-index: 99;
  top: -38rpx;
  left: 108rpx;
  .px-suspen-close-img {
    width: 35rpx;
    height: 35rpx;
  }
}
.px-button {
  position: absolute;
  border-radius: 50%;
  top: 0rpx;
  left: 0rpx;
  height: 120rpx;
  width: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
  }

  &.center-button {
    z-index: 1000;
  }

  &.ot-button {
    display: none;
    opacity: 0;

    &.active-top {
      animation: 0.5s ease top forwards;
      display: flex;
    }

    &.hidden-top {
      animation: 0.5s ease hidetop forwards;
      display: flex;
    }

    &.active-left {
      animation: 0.5s ease left forwards;
      display: flex;
    }

    &.hidden-left {
      animation: 0.5s ease hideleft forwards;
      display: flex;
    }

    &.active-bottom {
      animation: 0.5s ease bottom forwards;
      display: flex;
    }

    &.hidden-bottom {
      animation: 0.5s ease hidebottom forwards;
      display: flex;
    }
  }
}

@keyframes center {
  //中间的按钮
  0% {
  }

  100% {
    transform: rotate(315deg);
    opacity: 1;
  }
}

@keyframes bottom {
  //底部的按钮
  0% {
    opacity: 0;
  }

  100% {
    top: 80rpx;
    left: -126rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes left {
  0% {
    opacity: 0;
  }

  100% {
    top: 0rpx;
    left: -180rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes top {
  //头部的按钮
  0% {
    opacity: 0;
  }

  100% {
    top: -90rpx;
    left: -126rpx;
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes hideleft {
  0% {
    top: 0rpx;
    left: -180rpx;
    opacity: 1;
  }

  100% {
    top: 0rpx;
    left: 0rpx;
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes hidebottom {
  0% {
    top: 100rpx;
    left: -120rpx;
    opacity: 1;
  }

  100% {
    top: 0rpx;
    left: 0rpx;
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes hidetop {
  0% {
    top: -100rpx;
    left: -120rpx;
    opacity: 1;
  }

  100% {
    top: 0rpx;
    left: 0rpx;
    transform: rotate(360deg);
    opacity: 0;
  }
}
</style>