book-hi/components/floating-activity.vue

<template>
  <floating-drag
    :visible="visible"
    :initialPosition="initialPosition"
    :width="size"
    :height="size"
    @click="handleClick"
    @position-change="onPositionChange"
  >
    <view class="floating-btn">
      <image src="/static/img/activity.png" class="icon"></image>
    </view>
  </floating-drag>
</template>

<script>
import FloatingDrag from "./floating-drag.vue";

export default {
  name: "FloatingButton",
  components: {
    FloatingDrag,
  },
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: true,
    },
    // 初始位置
    initialPosition: {
      type: Object,
      default: () => ({
        left: "auto",
        right: 0,
        bottom: "30%",
      }),
    },
    // 按钮大小
    size: {
      type: [Number, String],
      default: 200,
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: "#007AFF",
    },
    // 图标
    icon: {
      type: String,
      default: "",
    },
    // 文本
    text: {
      type: String,
      default: "按钮",
    },
  },
  methods: {
    // 处理点击事件
    handleClick() {
      this.$emit("click");
    },

    // 处理位置变更事件
    onPositionChange(position) {
      this.$emit("position-change", position);
    },
  },
};
</script>

<style lang="scss" scoped>
.floating-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .icon {
    width: 100%;
    height: 100%;
  }

  text {
    color: #ffffff;
    font-size: 28rpx;
    text-align: center;
    font-weight: 500;
  }
}
</style>