浮动气泡

浮动气泡组件。

移动方向

通过 direction 属性设置移动方向，可选的值有：

• all —— 四周都可移动。
• horizontal —— 只能横向移动。
• vertical —— 只能纵向移动。
• none —— 禁止移动。

提示

动态切换移动方向后，气泡会默认回到初始位置。

<template>
	<pure-radio-group v-model="direction">
		<pure-radio class="radio" label="四周" value="all" theme="primary" ghost></pure-radio>
		<pure-radio class="radio" label="横向" value="horizontal" theme="primary" ghost></pure-radio>
		<pure-radio class="radio" label="纵向" value="vertical" theme="primary" ghost></pure-radio>
		<pure-radio class="radio" label="禁止" value="none" theme="primary" ghost></pure-radio>
	</pure-radio-group>

	<!-- 浮动气泡 -->
	<pure-float-bubble :direction="direction"></pure-float-bubble>
</template>

<script setup>
import { ref } from "vue";

// 移动方向
const direction = ref("all");
</script>

自定义图标

通过 iconName 自定义按钮图标。

<template>
	<pure-float-bubble iconName="__index"></pure-float-bubble>
</template>

按钮文字

通过 text 属性可以设置按钮文字。

<template>
	<pure-float-bubble text="主页"></pure-float-bubble>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
direction	String	all	可移动方向
width	String	50px	气泡按钮宽度
height	String	50px	气泡按钮高度
iconName	String	__home	气泡按钮图标名称
text	String		气泡按钮文本
left	String		气泡按钮布局位置 left 的值
right	String	10px	气泡按钮布局位置 right 的值
top	String		气泡按钮布局位置 top 的值
bottom	String	35%	气泡按钮布局位置 bottom 的值
inertia	Boolean	false	是否带有惯性
outOfBounds	Boolean	false	超过可移动区域后，是否还可以移动
damping	Number	20	阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
disabled	Boolean	false	是否禁用
animation	Boolean	false	是否使用动画

事件

名称	参数	说明
onClick		点击事件
onChange		拖动过程中触发的事件 参考

插槽

名称	参数	说明
#default		默认，按钮内容

样式变量

名称	说明
--pure-float-bubble-width	浮动按钮宽度
--pure-float-bubble-height	浮动按钮高度
--pure-float-bubble-background	浮动按钮背景
--pure-float-bubble-border-radius	浮动按钮圆角大小
--pure-float-bubble-shadow	浮动按钮阴影
--pure-float-bubble-color	浮动按钮文本颜色
--pure-float-bubble-font-size	浮动按钮文本大小
--pure-float-bubble-border	浮动按钮边框样式
--pure-float-bubble-border-width	浮动按钮边框粗细
--pure-float-bubble-border-style	浮动按钮边框类型
--pure-float-bubble-border-color	浮动按钮边框颜色
--pure-float-bubble-gap	浮动按钮内容之间的间距
--pure-float-bubble-left	浮动按钮位置 left
--pure-float-bubble-right	浮动按钮位置 right
--pure-float-bubble-top	浮动按钮位置 top
--pure-float-bubble-bottom	浮动按钮位置 bottom
--pure-float-bubble-left	浮动按钮位置 left
--pure-float-bubble-z-index	浮动按钮层级大小
--pure-float-bubble-icon-font-size	浮动按钮图标字体大小
--pure-float-bubble-icon-color	浮动按钮图标字体颜色
--pure-float-bubble-text-font-size	浮动按钮文字字体大小
--pure-float-bubble-text-color	浮动按钮文字字体颜色