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