uniapp组件-uni-fab悬浮按钮

谁借莪１个温暖的怀抱￠ 2021-07-25 14:28 2445阅读 1赞

官网示例：[https://ext.dcloud.net.cn/plugin?id=144][https_ext.dcloud.net.cn_plugin_id_144]

## 效果图： ##

![20210301204325400.gif][]

## 代码实现： ##

<template>
    	<view>
    		<uni-fab
    			:pattern="pattern"
    			:content="content"
    			horizontal="right"
    			vertical="top"
    			direction="horizontal"
    			:popMenu="true"
    			@trigger="trigger"
    			@fabClick="fabClick"
    		/>
    	</view>
    </template>
    
    <script>
    export default {
    	components: {},
    	data() {
    		return {
    			pattern: {
    				color: 'gray',
    				backgroundColor: '#FFFFFF',
    				selectedColor: '#007AFF',
    				buttonColor:'orange'
    			},
    			content: [
    				{
    					iconPath: '/static/component.png',
    					selectedIconPath: '/static/componentHL.png',
    					text: '组件',
    					active: false
    				},
    				{
    					iconPath: '/static/api.png',
    					selectedIconPath: '/static/apiHL.png',
    					text: 'API',
    					active: true
    				},
    				{
    					iconPath: '/static/template.png',
    					selectedIconPath: '/static/templateHL.png',
    					text: '模版',
    					active: false
    				}
    			]
    		};
    	},
    	methods: {
    		trigger(e) {
    			uni.showModal({
    				title: '提示',
    				content:`激活状态：${e.item.active};选中项：${e.item.text}`,
    				success(res) {
    					if (res.confirm) {
    						console.log('用户点击确定');
    					} else if (res.cancel) {
    						console.log('用户点击取消');
    					}
    				}
    			});
    		},
    		fabClick() {
    			uni.showToast({
    				title: '点击了悬浮按钮',
    				icon: 'none'
    			});
    		}
    	}
    };
    </script>

当不指定pattern属性时，其样式为：

![20210301204628512.png][]

当direction="vertical"时，其样式为：

![20210301204737256.png][]

当:popMenu="false"时，组件将不可展开

[https_ext.dcloud.net.cn_plugin_id_144]: https://ext.dcloud.net.cn/plugin?id=144
[20210301204325400.gif]: https://img-blog.csdnimg.cn/20210301204325400.gif
[20210301204628512.png]: https://img-blog.csdnimg.cn/20210301204628512.png
[20210301204737256.png]: https://img-blog.csdnimg.cn/20210301204737256.png