组件库文档 tmui.design
悬浮按钮 FloatButton
用于展示悬浮在页面上层的按钮组件，用于展示常用功能。
🌶️ 悬浮按钮 FloatButton 示例
查看模拟效果＋
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text
:font-size="24"
_class="text-weight-b"
label="悬浮按钮一共4*6=24个位置可选.从3.0.89开始已经重构,兼容性得到完美适配.但注意在h5使用时,显示顶部时,注意要自己让出导航条高度."
></tm-text>
</tm-sheet>
<tm-sheet :shadow="3" :round="3" :height="1600" :margin="[32, 0, 32, 0]">
<tm-text :font-size="24" _class="text-weight-b pb-24" label="主按钮位置"></tm-text>
<tm-radio-group v-model="pos">
<tm-radio :value="item" :label="item" v-for="(item, index) in ['bc', 'bl', 'br', 'tc', 'tl', 'tr']"></tm-radio>
</tm-radio-group>
<tm-text :font-size="24" _class="text-weight-b py-24" label="子菜单弹出方向"></tm-text>
<tm-radio-group v-model="ac_pos">
<tm-radio :value="item" :label="item" v-for="(item, index) in ['top', 'left', 'bottom', 'right']"></tm-radio>
</tm-radio-group>
<tm-text :font-size="24" _class="text-weight-b py-32" label="请滚动页面到尾部,点击右下角按钮置顶页面功能."></tm-text>
</tm-sheet>
<tm-float-button
:disabledScrollTo="false"
position="br"
:btn="{ icon: 'tmicon-angle-up', linear: '', color: 'white', label: '置顶' }"
></tm-float-button>
<tm-float-button
showActions
:actions="fabActions"
:actionsPos="ac_pos"
:position="pos"
:btn="{ icon: 'tmicon-plus', linear: 'bottom', color: 'green' }"
></tm-float-button>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmFloatButton from '@/tmui/components/tm-float-button/tm-float-button.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
const pos = ref('bc')
const ac_pos = ref('top')
const fabActions = [
{ icon: 'tmicon-ios-sunny', color: 'pink', linear: 'top', label: '文字' },
{ icon: 'tmicon-md-power', color: 'red', label: '关闭' }
]
</script>🌶️ 兼容性
| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
|---|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| followTheme | Boolean | true | 是否跟随主题 |
| position | String | br | 主按钮的位置 可选：bc, bl, br, tc, tl, tr |
| actionsPos | String | top | 子菜单弹出的位置 可选：left, right, top, bottom |
| width | Number | 112 | 按钮宽度 |
| height | Number | 112 | 按钮高度 |
| offset | Array | [32, 32] | 按钮位置 |
| actions | Array | [] | 子按钮组数据 |
| btn | Object | {} | *主按钮对象数据 |
| showActions | Boolean | false | 是否默认显示子菜单 |
| clickHidnActions | Boolean | true | 点击子菜单后，是否需要隐藏 |
| disabledScrollTo | Boolean | true | 默认true禁用，是否开启置顶功能（nvue不支持） |
| scrollTo | 见下方 | （nvue不支持）置顶参数详见解释置顶参数见官网 |
scrollTo:{scrollTop:number,selector:string,duration:number} | {scrollTop:0,selector:'',duration:300}
如果clickHidnActions为false,点击子按钮后不会隐藏按钮。始终保持展开子按钮
btn主按钮和子按钮数据格式如下：
ts
//按钮的位置
export enum positionType {
tl = 'tl',
tc = 'tc',
tr = 'tr',
bl = 'bl',
bc = 'bc',
br = 'br',
}
//子菜单弹出的位置
export enum popDir {
l = 'left',
t = 'top',
b = 'bottom',
r = 'right'
}
export interface actionsItem {
icon:string,
label?:string,
iconSize?:number,
fontSize?:number,
color?:string,//背景
fontColor?:string,
linear?:string,
linearDeep?:string,
/** 按钮开放值，注意，如果你是想要获取电话，头像，昵称等回调事件，统一调取各自的callback */
openType?:string,
/** 开放平台的回调函数 */
callback?:Function<event:any,item:actionsItem>,//返回的参数就是各开放平台的参数。
}🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| click | 主按钮点击 | ||
| change | index, item | 子按钮点击 |
🌽 slot插槽
默认default
🥗 ref方法
无
💏 文档贡献
此页文档由Kyour贡献，如果对该框架感兴趣的可以参与我们一同进步！