/*! For license information please see 128.61634dbd.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["128"],{77979:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

FloatingBubble

\n

Intro

\n

Clickable bubbles that hover around the edge of the page. Please upgrade vant to >= v4.6.0 before using this component.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { FloatingBubble } from 'vant';\n\nconst app = createApp();\napp.use(FloatingBubble);\n
\n

Usage

\n

Basic Usage

\n

The floating bubble is displayed by default in the bottom right corner and allows vertical dragging in the y-axis direction. You can set the icon of the bubble using the icon prop.

\n
<van-floating-bubble icon="chat" @click="onClick" />\n
\n
import { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const onClick = () => {\n      showToast('Click Bubble');\n    };\n    return { onClick };\n  },\n};\n
\n

Free Magnetic

\n

Allow x and y drags to attach to the nearest side of the x axis.

\n
<van-floating-bubble\n  axis="xy"\n  icon="chat"\n  magnetic="x"\n  @offset-change="onOffsetChange"\n/>\n
\n
import { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const onOffsetChange = (offset) => {\n      showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);\n    };\n    return { onOffsetChange };\n  },\n};\n
\n

Use v-model

\n

Use v-model:offset control the position.

\n
<van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const offset = ref({ x: 200, y: 400 });\n    return { offset };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-model:offsetControl bubble positionOffsetTypeDefault right-bottom coordinate
axisDrag direction, xy stands for free drag, lock stands for disable drag\'x\' | \'y\' | \'xy\' | \'lock\'y
magneticDirection of automatic magnetic absorption\'x\' | \'y\'-
iconBubble iconstring-
gapMinimum gap between the bubble and the window, unit pxnumber24
teleportSpecifies a target element where BackTop will be mountedstring | Elementbody
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickTriggered when a component is clickedMouseEvent
offset-changeTriggered when the position changes due to user dragging{x: string, y: string}
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultCustomize the bubble display content
\n

Types

\n

The component exports the following type definitions:

\n
export type {\n  FloatingBubbleProps,\n  FloatingBubbleAxis,\n  FloatingBubbleMagnetic,\n  FloatingBubbleOffset,\n} from 'vant';\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-floating-bubble-size48px-
--van-floating-bubble-initial-gap24px-
--van-floating-bubble-icon-size28px-
--van-floating-bubble-backgroundvar(--van-primary-color)-
--van-floating-bubble-colorvar(--van-background-2)-
--van-floating-bubble-z-index999-
--van-floating-bubble-border-radius--van-floating-bubble-border-radius-
\n
'},null,8,e))}}}]);