💬 适用于 Vue2/3 的浮动气泡组件
npm install @viarotel-org/float-bubbleshell
npm install @viarotel-org/float-bubble
`
Example
`js
// vue3
import FloatBubble from '@viarotel-org/float-bubble'
// vue2.7 以上
import FloatBubble from '@viarotel-org/float-bubble/vue2s'
// vue2.6 以下
import FloatBubble from '@viarotel-org/float-bubble/vue2'
// 导入样式
import '@viarotel-org/float-bubble/style'
// vue3
app.use(FloatBubble)
// vue2/2.7
Vue.use(FloatBubble)
`
`html
ref="floatBubble"
parent=".float-bubble-container"
:magnet="magneted"
:position="{
right: 24,
bottom: 'center',
}"
@adsorb="onAdsorb"
@unadsorb="onUnadsorb"
/>
`
Theme
组件预设了默认的菜单主题通过以下的方法使用
注意: 如果通过 use 方式加载的组件那么 则已自动挂载 否则需要从包中手动安装该组件
`html
ref="floatBubble"
parent=".float-bubble-container"
:magnet="magneted"
:gap="0"
:position="{
top: 'center',
right: 0,
}"
>
`
Props
`js
// FloatBubble 的默认 props
const defaultProps = {
offset: {
type: Object,
default: () => ({
x: 0,
y: 0,
}),
},
position: {
type: Object,
default: () => ({
bottom: 24, // "center"
right: 24,
}),
},
gap: {
type: [Number, Object],
default: 24,
},
parent: {
type: String,
default: 'body',
},
magnet: {
type: Boolean,
default: true,
},
text: {
type: String,
default: '',
},
image: {
type: String,
default: '',
},
size: {
type: String,
default: '50px',
},
bubbleClass: {
type: [String, Object],
default: '',
},
}
// FloatBubbleTheme 默认的 Props
const themeProps = {
adsorbed: {
type: Boolean,
default: false,
},
adsorbType: {
type: String,
default: '',
},
setAdsorbed: {
type: Function,
default: () => () => {},
},
updateAdsorb: {
type: Function,
default: () => () => {},
},
data: {
type: Array,
default: () => [],
demo: [
{
hover: '帮助中心',
text: '帮助',
icon: 'iconfont icon-help',
class: 'text-[16px]',
click: () => {},
},
{
hover: '反馈问题',
text: '反馈',
icon: 'iconfont icon-fankui',
class: 'text-[16px]',
click: () => {},
},
],
},
}
``