mobile_h5/custom/components/my-fab/my-fab.uvue

<template>
	<view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				horizontal: 'right',
				vertical: 'top',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#c5c5c5',
					iconColor: '#fff',
					icon: 'closeempty'
				},
				content: [
					/* {
						iconPath: '/static/image.png',
						selectedIconPath: '/static/image-active.png',
						text: '相册',
						active: false
					},
					{
						iconPath: '/static/home.png',
						selectedIconPath: '/static/home-active.png',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/star.png',
						selectedIconPath: '/static/star-active.png',
						text: '收藏',
						active: false
					} */
				]
			}
		},
		methods: {
			trigger(e) {
				/* console.log(e)
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				}) */
			},
			fabClick() {
				window.location.href = 'action://to_home/';
				/* uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				}) */
			},
		}
	}
</script>

<style>
	/deep/ .uni-fab__circle {
		opacity: 60%;
		width: 35px;
		height: 35px;
	}

	/deep/ .fab-circle-icon {
		font-size: 20px !important;
	}
</style>