OmniCard/mpuniapp/pages/uni-ui/fab-button/fab-button.uvue

<template>
	<view style="flex: 1;position: relative;padding: 15px 15px 0 15px;">
		<text class="label first-label">标准uni-fab-button</text>
		<uni-fab-button></uni-fab-button>
		<text class="label">自定义fab样式</text>
		<uni-fab-button class="custom-class"></uni-fab-button>
		<text class="label">自定义plus样式</text>
		<uni-fab-button plus-class="custom-plus-class"></uni-fab-button>
		<text class="label">自定义fab和plus样式，变成一个16px的纯+</text>
		<uni-fab-button class="transparent" plus-class="black-plus"></uni-fab-button>
		<text class="label">可移动uni-fab-button</text>
		<view class="move-fab-placeholder">
			<view id="move-fab" class="move-fab" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="updateMoveData" @touchcancel="updateMoveData">
				<uni-fab-button></uni-fab-button>
			</view>
		</view>
		<view
			class="right-bottom"
			:class="rightBottomFabPressed ? 'fab-pressed' : ''"
			@touchstart="rightBottomFabPressed = true"
			@touchend="rightBottomFabPressed = false"
			@touchcancel="rightBottomFabPressed = false">
			<uni-fab-button @click="handleClick"></uni-fab-button>
		</view>
	</view>
</template>

<script setup lang="uts">
	type Data = {
		dx : number
		dy : number
		left : number
		top : number
	}

	const data = reactive<Data>({
		dx: 0,
		dy: 0,
		left: 15,
		top: 47
	})
	let sx = 0
	let sy = 0
	let mx = 0
	let my = 0
	let baseLeft = 15
	let baseTop = 47
	const rightBottomFabPressed = ref(false)

	function handleClick() {
		uni.showToast({
			title: '点击了右下角的fab',
			icon: 'none'
		})
	}

	function updateMoveData() {
		data.left = baseLeft + mx
		data.top = baseTop + my
		data.dx = mx
		data.dy = my
	}

	function updateMovePos(element : UniElement) {
		element.style.setProperty('position', 'fixed')
		element.style.setProperty('left', baseLeft + 'px')
		element.style.setProperty('top', baseTop + 'px')
		element.style.setProperty('transform', 'translate(' + mx + 'px,' + my + 'px)')
	}

	function onTouchStart(e : UniTouchEvent) {
		sx = e.touches[0].clientX
		sy = e.touches[0].clientY
		updateMovePos(e.currentTarget as UniElement)
	}

	function onTouchMove(e : UniTouchEvent) {
		mx = e.touches[0].clientX - sx + mx
		my = e.touches[0].clientY - sy + my
		sx = e.touches[0].clientX
		sy = e.touches[0].clientY
		updateMovePos(e.currentTarget as UniElement)
	}

	onReady(() => {
		uni.createSelectorQuery()
			.select('.move-fab-placeholder')
			.boundingClientRect((rect) => {
				if (rect != null) {
					const nodeInfo = rect as NodeInfo
					baseLeft = nodeInfo.left != null ? nodeInfo.left : baseLeft
					baseTop = nodeInfo.top != null ? nodeInfo.top : baseTop
					data.left = baseLeft
					data.top = baseTop
				}
			})
			.exec()
	})

	defineExpose({
		data
	})
</script>

<style>
	.label {
		color: var(--text-color, #333333);
		margin-top: 24px;
		margin-bottom: 12px;
	}
	.first-label {
		margin-top: 0;
	}
	.custom-class{
		background-color: green;
		width: 20px;
		height: 20px;
	}
	.custom-plus-class {
		background-color: brown;
		width: 80%;
		height: 5px;
		border-radius: 0px;
	}
	.transparent {
		width: 16px;
		height: 16px;
		background-color: transparent;
		box-shadow: none;
	}
	.black-plus {
		background-color: black;
		width: 100%;
		height: 2px;
		border-radius: 0px;
	}
	.move-fab-placeholder {
		width: 44px;
		height: 44px;
	}
	.move-fab {
		width: 44px;
		height: 44px;
	}
	.right-bottom {
		position: absolute;
		right: 44px;
		bottom: 44px;
		width: 44px;
		height: 44px;
		opacity: 1;
		transform: scale(1);
		transform-origin: center center;
		transition-property: transform, opacity;
		transition-duration: 140ms;
		transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
	}
	.fab-pressed {
		opacity: 0.9;
		transform: scale(0.95);
	}
</style>