Levitated Sphere

一个基于 Vue3 的可拖拽悬浮球组件。

安装

npm install levitated-sphere

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import LevitatedSphere from 'levitated-sphere'

const app = createApp(App)
app.use(LevitatedSphere)

局部注册

import { DragBall } from 'levitated-sphere'

export default {
  components: {
    DragBall
  }
}

基本用法

<template>
  <DragBall
    :width="70"
    :height="70"
    :distanceRight="36"
    :distanceBottom="100"
    :draggable="true"
    :borderRadius="'50%'"
    :autoHide="true"
    :autoHideDelay="10000"
    @click="onBallClick"
  >
    <!-- 你可以自定义内容 -->
    <div>自定义内容</div>
  </DragBall>
</template>

<script setup>
function onBallClick() {
  alert('点击了悬浮球！')
}
</script>

属性说明

| 属性名 | 类型 | 默认值 | 说明 | |------------------|-------------------|-----------|--------------------------------------| | width | Number | 70 | 悬浮球宽度（px） | | height | Number | 70 | 悬浮球高度（px） | | distanceRight | Number | 36 | 距离右侧的距离（px） | | distanceBottom | Number | 100 | 距离底部的距离（px） | | draggable | Boolean | true | 是否可拖拽 | | customStyle | Object | {} | 自定义样式（对象形式） | | borderRadius | String | '50%' | 圆角（如 '50%'、'10px' 等） | | autoHide | Boolean | false | 是否启用自动隐藏 | | autoHideDelay | Number | 10000 | 自动隐藏延迟（毫秒，10秒=10000） |

事件说明

| 事件名 | 说明 | |--------|--------------| | click | 点击悬浮球时触发（不包括拖拽） |

插槽

| 名称 | 说明 | |--------|--------------------| | 默认 | 自定义悬浮球内容 |