TMUI 3.1.05
Search K

Appearance

On this page

组件库文档 tmui.design ​

悬浮按钮 FloatButton ​

用于展示悬浮在页面上层的按钮组件，用于展示常用功能。

🌶️ 悬浮按钮 FloatButton 示例 ​

查看模拟效果＋
示例模板
vue
<template>
    <tm-app>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-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="font-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="font-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="font-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-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
followThemeBooleantrue是否跟随主题
positionStringbr主按钮的位置 可选：bc, bl, br, tc, tl, tr
actionsPosStringtop子菜单弹出的位置 可选：left, right, top, bottom
widthNumber112按钮宽度
heightNumber112按钮高度
offsetArray[32, 32]按钮位置
actionsArray[]子按钮组数据
btnObject{}*主按钮对象数据
showActionsBooleanfalse是否默认显示子菜单
clickHidnActionsBooleantrue点击子菜单后，是否需要隐藏
disabledScrollToBooleantrue默认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
}

🌹 事件 ​

事件名参数返回数据描述
click
change

🌽 slot插槽 ​

默认default

🥗 ref方法 ​

无

💏 文档贡献 ​

此页文档由Kyour贡献，如果对该框架感兴趣的可以参与我们一同进步！