快速使用

方式 1 npm i floating-ball

import FloatingBall from "floating-ball";
const floatingBall = new FloatingBall({
  panelEvents: [
    {
      actionType: "text",
      actionText: "负责人：张老师\n1560000111",
    },
    {
      actionType: "link",
      actionText: "校园智能助手",
      actionLink: "https://yiyan.baidu.com/welcome",
    },
  ],
});
// 可在页面销毁时调用一下方法移除悬浮球
floatingBall.removeFloatingBall();

| 入参 | 是否必填 | 描述 | 类型 | | ----------- | :------: | ------------------------------------ | :---------: | | icon | 否 | 悬浮球图标 | string | | bottom | 否 | 悬浮球距离底部偏移量 | number | | right | 否 | 悬浮球距离右侧偏移量 | number | | scrollEl | 否 | 页面滚动元素 | HTMLElement | | width | 否 | 浮球宽度 | number | | height | 否 | 浮球高度 | number | | panelEvents | 否 | 悬浮球面板详情（不传则不会显示面板） | Array |

panelEvents 元素类型

| 入参 | 是否必填 | 描述 | 类型 | | ---------- | ------------------------- | ---------------- | ---------------- | | actionType | 是 | 面板元素类型 | "link" 或 "text" | | actionLink | actionType 为 link 时必填 | 面板元素跳转链接 | string | | actionText | 是 | 面板元素文案 | string |

方式 2 script 引入

<script src="https:XXXXX/index.umd.js"></script>

<script>
  const floatingBall = new window.floatingBall({
    panelEvents: [
      {
        actionType: "text",
        actionText: "负责人：张老师\n1560000111"
      },
      {
        actionType: "link",
        actionText: "校园智能助手",
        actionLink: "https://yiyan.baidu.com/welcome"
      }
    ]})
</script>

方式 3 在项目中引入打包后的文件,

import FloatingBall from "@/utils/floating-ball";

const floatingBall = new FloatingBall({
  panelEvents: [
    {
      actionType: "text",
      actionText: "负责人：张老师\n1560000111",
    },
    {
      actionType: "link",
      actionText: "校园智能助手",
      actionLink: "https://yiyan.baidu.com/welcome",
    },
  ],
});