floating-ball

快速使用

方式 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",
    },
  ],
});