Package Exports

vue3-floating-ball
vue3-floating-ball/es/index.js
vue3-floating-ball/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-floating-ball) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`vue3-floating-ball`

A vue3 component for floating ball

Install

// npm
npm i --save vue3-floating-ball
// yarn
yarn add -D vue3-floating-ball
// pnpm
pnpm add -D vue3-floating-ball

Usage

Codesandbox


// App.vue
<script setup>
import { ref } from 'vue';

const theme = ref('#42b883');
const position = ref('top left');
const column = ref(2);
const events = ref([
  { icon: 'H', text: 'home', handle: (e) => console.log(e) },
  {
    icon: 'O',
    text: 'home2',
    handle: (e) => console.log(e),
  },
  {
    icon: 'M',
    text: 'home3',
    handle: (e) => console.log(e),
  }
])
</script>

<template>
  <floating-ball :theme="theme" :position="position" :events="events" :column="column" />
</template>

// main.js
import { createApp } from 'vue'
import FloatingBall from 'vue3-floating-ball';

createApp(App).use(FloatingBall).mount('#app')

DOCS

props

Name	Description	Type	default
theme	set floating ball primary color	String	#42b883
position	set floating ball init position.(top/bottom/left/right)	String	top left
column	set floating ball column of popover.(max: 4)	Number	2
canMove	control the floating ball can move by mouse	Boolean	true
events	events will be displayed on the floating ball popover	Array	[]

EventItem props

Name	Description	Type	default
icon	event icon	String / v-slot:icon="{ item }"	-
text	event name	String / v-slot:text="{ item }"	-
handle	event	(item: EventItem) => void	-

useFBCore() and `$fb`

useFBCore() hook and $fb both return floating ball core instance, u can do anything of floating ball

vue3-floating-ball