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

FloatingBubble \u6D6E\u52A8\u6C14\u6CE1

\n

\u4ECB\u7ECD

\n

\u60AC\u6D6E\u5728\u9875\u9762\u8FB9\u7F18\u7684\u53EF\u70B9\u51FB\u6C14\u6CE1\u3002\u8BF7\u5347\u7EA7 vant \u5230 >= 4.6.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u6D6E\u52A8\u6C14\u6CE1\u9ED8\u8BA4\u5C55\u793A\u5728\u53F3\u4E0B\u89D2\uFF0C\u5E76\u5141\u8BB8\u5728 y \u8F74\u65B9\u5411\u4E0A\u4E0B\u62D6\u62FD\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 icon \u5C5E\u6027\u8BBE\u7F6E\u6C14\u6CE1\u7684\u56FE\u6807\u3002

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

\u81EA\u7531\u62D6\u62FD\u548C\u78C1\u5438

\n

\u5141\u8BB8 x \u548C y \u8F74\u65B9\u5411\u62D6\u62FD\uFF0C\u5438\u9644\u5230 x \u8F74\u65B9\u5411\u6700\u8FD1\u4E00\u8FB9\u3002

\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

\u53CC\u5411\u7ED1\u5B9A

\n

\u4F7F\u7528 v-model:offset \u63A7\u5236 FloatingBubble \u7684\u4F4D\u7F6E\u3002

\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
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model:offset\u63A7\u5236\u6C14\u6CE1\u4F4D\u7F6EOffsetType\u9ED8\u8BA4\u53F3\u4E0B\u89D2\u5750\u6807
axis\u62D6\u62FD\u7684\u65B9\u5411\uFF0Cxy \u4EE3\u8868\u81EA\u7531\u62D6\u62FD\uFF0Clock \u4EE3\u8868\u7981\u6B62\u62D6\u62FD\'x\' | \'y\' | \'xy\' | \'lock\'y
magnetic\u81EA\u52A8\u78C1\u5438\u7684\u65B9\u5411\'x\' | \'y\'-
icon\u6C14\u6CE1\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027string-
gap\u6C14\u6CE1\u4E0E\u7A97\u53E3\u7684\u6700\u5C0F\u95F4\u8DDD\uFF0C\u5355\u4F4D\u4E3A pxnumber24
teleport\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027string | Elementbody
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1MouseEvent
offset-change\u7531\u7528\u6237\u62D6\u62FD\u5BFC\u81F4\u4F4D\u7F6E\u6539\u53D8\u540E\u89E6\u53D1{x: string, y: string}
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E
default\u81EA\u5B9A\u4E49\u6C14\u6CE1\u663E\u793A\u5185\u5BB9
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

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

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\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
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--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,l))}}}]);