华玥组件库

中文

English

中文

English

Appearance

FloatButton 悬浮按钮组件 ​

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

温馨提示

组件是华悦作者独自开发

📌平台差异说明 ​

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

🏯基本使用示例 ​

html
<!-- 全局使用 -->
<hy-float-button></hy-float-button>
<!-- 单个组件引入 -->
<HyFloatButton></HyFloatButton>
ts
import { HyFloatButton } from "hy-app"

悬浮按钮默认按钮 ​

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 ​

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

gap ​

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

Events ​

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

Slots ​

插槽名说明接收值
default按钮内容-
06:21

  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：下中； ↩︎