华玥组件库

中文

English

中文

English

Appearance

FloatButton 悬浮按钮组件 ​

悬浮动作按钮组件，按下可显示一组动作按钮。

📌平台差异说明 ​

APP(vue)H5微信小程序支付宝小程序
✔✔✔✔

🏯基本使用示例 ​

html
<!-- 全局使用 -->
<hy-float-button></hy-float-button>

悬浮按钮默认按钮 ​

html
<template>
  <hy-float-button
    text="客服"
    :icon="IconConfig.CUSTOMER_SERVICE"
    iconSize="25"
  ></hy-float-button>
</template>

悬浮按钮显示菜单栏 ​

html
<template>
  <hy-float-button :menus="menus_1"></hy-float-button>
  <hy-float-button :menus="menus_2"></hy-float-button>
</template>

<script setup>
  const menus_1 = ["菜单1", "菜单2", "菜单3"];
  const menus_2 = [
    { label: "菜单1", url: "/pages/keFu/index" },
    { label: "菜单2" },
    { label: "菜单3" },
  ];
</script>

悬浮按钮大小 ​

  • 通过设置size实现悬浮按钮大小
    • small小按钮
    • medium中按钮
    • large大按钮
    • 输入数字或数字单位自定义按钮大小
html
<template>
  <hy-float-button size="small"></hy-float-button>
  <hy-float-buttton size="medium"></hy-float-buttton>
  <hy-float-buttton size="large"></hy-float-buttton>
  <hy-float-buttton :size="20"></hy-float-buttton>
  <hy-float-buttton size="50rpx"></hy-float-buttton>
</template>

悬浮按钮形状 ​

  • 通过设置shape设置悬浮按钮不同形状
    • circle圆形
    • square方形
html
<template>
  <hy-float-button shape="circle"></hy-float-button>
  <hy-float-buttton shape="square"></hy-float-buttton>
</template>

悬浮按钮打开方向 ​

  • 通过设置direction设置悬浮按钮打开展示不同方向
    • column向上展示
    • row横向展示

      注意

      横向展示默认向右展开 如果left值大于一半屏幕，横向展示会向左展开

html
<template>
  <hy-float-button :menus="menus" direction="column"></hy-float-button>
  <hy-float-button :menus="menus" direction="row"></hy-float-button>
  <hy-float-button :menus="menus" left="80vw" direction="row"></hy-float-button>
</template>

<script setup>
  const menus = ["菜单1", "菜单2", "菜单3"];
</script>

是否浮动 ​

  • 通过设置float设置悬浮按钮是否浮动
html
<template>
  <hy-float-button :float="true"></hy-float-button>
</template>

显示阴影 ​

  • 通过设置shadow设置悬浮按钮是否显示阴影
html
<template>
  <hy-float-button :shadow="true"></hy-float-button>
</template>

设置透明度 ​

  • 通过设置opacity设置悬浮按钮是否浮动
html
<template>
  <hy-float-button :opacity="0.1"></hy-float-button>
</template>

API ​

FloatButton Props ​

| 参数 | 说明 | 类型 | 默认值 | | ----------- | -------------------------------------------- | ----------------------- | ---------------------------------------------- | --- | --- | | menus | 菜单栏集合 | (string\|AnyObject)[] | - | | direction | 打开方向[1] | row|column | column | | icon | 按钮显示的图标 | string | PLUS | | iconSize | 按钮图标大小，数值默认单位px | number|string | - | | iconColor | 按钮图标颜色 | string | #FFFFFF | | gap | 悬浮按钮与可视区域边缘的间距，数值默认单位px | Object | { left: 16, right: 16, top: 16, bottom: 40 } | | zIndex | 层级 | number | 10086 | | bgColor | 按钮背景颜色 | string | - | | text | 按钮文字 | string | - | | fontSize | 按钮文字大小，数值默认单位px | number|string | 12px | | textColor | 按钮文字的颜色 | string | - | | size | 按钮的尺寸[2] | string | medium | | shape | 按钮的形状[3] | circle|square | circle | | opacity | 按钮的透明度 | number | 1 | | shadow | 是否显示阴影 | boolean | true | | float | 是否显示漂浮的动画 | boolean | true | | fixed | 是否固定位置 | boolean | true | | draggable | 悬浮按钮能否拖动 | boolean | true | | position | 悬浮按钮位置[4] | string | 'right-bottom' | | | | expandable | 用于控制点击时是否展开菜单 | boolean | true | | customStyle | 自定义需要用到的外部样式 | CSSProperties | - | | customClass | 自定义外部类名 | string | - |

gap ​

参数说明类型默认值
left距离左边最小距离number16
right距离右边最小距离number16
top距离顶部最小距离number16
bottom距离底部最小距离number40

Events ​

事件名说明回调参数
click点击按钮-
clickItem点击菜单栏temp：菜单栏数据，index: 索引

Slots ​

插槽名说明接收值
default按钮内容-
07:02

  1. row：横向；column：纵向 ↩︎

  2. circle：两边为半圆；square：方形带圆角 ↩︎

  3. normal：默认尺寸；large：大尺寸； small：小尺寸, number：任意大小; ↩︎

  4. left-top：左上；left-bottom：左下；right-top：右上；right-bottom：右下；left-center：左中；right-center：右中；top-center：上中；bottom-center：下中； ↩︎