van-floating-bubble使用

官方说明：悬浮在页面边缘的可点击气泡。请升级 vant 到 >= 4.6.0 版本来使用该组件。
在项目中使用的代码：

<van-floationg-bubble
	v-model:offset="state.offset"
	axis="xy"
	:gap="0"
	>
	<img src="xxx" />
	<p>xxxx</p>
</van-floating-bubble>

首先说说offset，官方的用法是const offset = ref({ x: 200, y: 400 })，这里x指的是距离屏幕最左侧的像素值，但是每个手机的宽度不一样，设计稿一般喜欢以右边为基准设置悬浮球，这样就导致x不能设置为固定的，我项目中offset这样处理：

const state = reactive({
offset: {x:document.body.clientWidth*286/375,y:504}
})

这里的286是设计稿上对应于左侧的像素值。
接下来就是样式，由于这个van-floating-bubble在dom中是和整个vue实例平级的，所以样式不能写在scoped里面，另起一个style写样式，又不想他影响别的vue组件，所以在van-floating-bubble里面再包一个盒子，class类名唯一，template中修改成下面的：

<van-floationg-bubble
	v-model:offset="state.offset"
	axis="xy"
	:gap="0"
	>
		<div class="van-floating-bubble-home">
			<img src="xxx" />
			<p>xxxx</p>
		</div>
</van-floating-bubble>

样式如下：

<style lang="scss">
.van-floating-bubble {
	width: fit-content!important;
	height: fit-content!important;
	background: none!important;
	.van-floating-bubble-home {
		// 此处可以自定义样式
	}
}
</style>

Done~