329 lines
10 KiB
Vue
329 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="u-fab"
|
|||
|
|
:style="$u.toStyle(fabStyle, customStyle)"
|
|||
|
|
:class="[customClass]"
|
|||
|
|
@touchstart="handleTouchstart"
|
|||
|
|
@touchmove.stop.prevent="handleTouchmove"
|
|||
|
|
@touchend="handleTouchend"
|
|||
|
|
>
|
|||
|
|
<view class="u-fab-trigger" id="trigger">
|
|||
|
|
<slot name="trigger">
|
|||
|
|
<u-button
|
|||
|
|
custom-class="u-fab-trigger-btn"
|
|||
|
|
custom-style="width:112rpx;height:112rpx;border-radius:112rpx;"
|
|||
|
|
:type="type"
|
|||
|
|
:disabled="disabled"
|
|||
|
|
:throttle-time="0"
|
|||
|
|
@click="handleBtnClick"
|
|||
|
|
>
|
|||
|
|
<u-icon :name="expansion ? 'close' : 'plus'" size="36rpx"></u-icon>
|
|||
|
|
</u-button>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-fab-actions" id="actions" :class="{ 'u-fab-actions__show': expansion }" :style="actionsStyle">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-fab',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { directionConfig, FabProps } from './types';
|
|||
|
|
import { computed, getCurrentInstance, onMounted, reactive, ref, useSlots, watch } from 'vue';
|
|||
|
|
import { $u } from '../../';
|
|||
|
|
|
|||
|
|
const props = defineProps(FabProps);
|
|||
|
|
const emit = defineEmits(['trigger']);
|
|||
|
|
|
|||
|
|
const slots = useSlots();
|
|||
|
|
const instance = getCurrentInstance();
|
|||
|
|
const sysInfo = $u.sys();
|
|||
|
|
const dragging = ref(true);
|
|||
|
|
const minLeft = ref(0);
|
|||
|
|
const maxLeft = ref(0);
|
|||
|
|
const minTop = ref(0);
|
|||
|
|
const maxTop = ref(0);
|
|||
|
|
const expansion = ref(false);
|
|||
|
|
const direction = ref(props.direction);
|
|||
|
|
const effectiveWindowHeight = ref(sysInfo.windowHeight);
|
|||
|
|
// #ifdef H5
|
|||
|
|
effectiveWindowHeight.value = sysInfo.windowTop + sysInfo.windowHeight;
|
|||
|
|
// #endif
|
|||
|
|
const position = reactive({
|
|||
|
|
top: 0,
|
|||
|
|
left: 0
|
|||
|
|
});
|
|||
|
|
const actions = ref();
|
|||
|
|
const btnInfo = ref({
|
|||
|
|
width: 56,
|
|||
|
|
height: 56
|
|||
|
|
});
|
|||
|
|
const start = reactive({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 计算悬浮按钮样式
|
|||
|
|
const fabStyle = computed(() => {
|
|||
|
|
const style: Record<string, any> = {
|
|||
|
|
transition: dragging.value ? 'none' : 'all 0.3s ease',
|
|||
|
|
zIndex: props.zIndex,
|
|||
|
|
left: `${position.left}px`,
|
|||
|
|
top: `${position.top}px`
|
|||
|
|
};
|
|||
|
|
return style;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 动画样式
|
|||
|
|
const actionsStyle = computed(() => {
|
|||
|
|
const config = directionConfig[direction.value];
|
|||
|
|
const base: Record<string, any> = {
|
|||
|
|
[config.opposite]: '100%',
|
|||
|
|
[config.sizeKey]: '100%',
|
|||
|
|
[config.positionKey]: 0,
|
|||
|
|
flexDirection: config.flexBase,
|
|||
|
|
transition: 'all 0.28s cubic-bezier(0.3, 0, 0.2, 1)'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 展开/收缩动画：根据方向设置初始偏移
|
|||
|
|
const offset = 12; // rpx/px 相对轻微偏移，视觉更顺滑
|
|||
|
|
if (expansion.value) {
|
|||
|
|
base.transform = 'translate3d(0,0,0) scale(1)';
|
|||
|
|
base.opacity = 1;
|
|||
|
|
} else {
|
|||
|
|
// 隐藏时做一个方向上的微位移并缩放以优化动画感
|
|||
|
|
if (direction.value === 'top') base.transform = `translate3d(0, ${offset}px, 0) scale(0.96)`;
|
|||
|
|
else if (direction.value === 'bottom') base.transform = `translate3d(0, -${offset}px, 0) scale(0.96)`;
|
|||
|
|
else if (direction.value === 'left') base.transform = `translate3d(${offset}px, 0, 0) scale(0.96)`;
|
|||
|
|
else base.transform = `translate3d(-${offset}px, 0, 0) scale(0.96)`;
|
|||
|
|
base.opacity = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return base;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => [props.position, props.gap],
|
|||
|
|
() => {
|
|||
|
|
initPosition();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.direction,
|
|||
|
|
() => {
|
|||
|
|
if (expansion.value) direction.value = calcDirection();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// helper：支持 gap 为 number 或对象形式
|
|||
|
|
function getGap(side: 'top' | 'left' | 'right' | 'bottom') {
|
|||
|
|
const g = props.gap as any;
|
|||
|
|
if (typeof g === 'number') return g;
|
|||
|
|
if (g && typeof g === 'object' && g[side] !== undefined) return Number(g[side]);
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拖动开始事件
|
|||
|
|
function handleTouchstart(e: TouchEvent) {
|
|||
|
|
if (props.disabled || !props.draggable) return;
|
|||
|
|
|
|||
|
|
const touches = e.touches[0];
|
|||
|
|
start.x = touches.clientX;
|
|||
|
|
start.y = touches.clientY;
|
|||
|
|
dragging.value = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拖动移动事件
|
|||
|
|
function handleTouchmove(e: TouchEvent) {
|
|||
|
|
if (props.disabled || !props.draggable) return;
|
|||
|
|
|
|||
|
|
const touches = e.touches[0];
|
|||
|
|
const deltaX = touches.clientX - start.x;
|
|||
|
|
const deltaY = touches.clientY - start.y;
|
|||
|
|
|
|||
|
|
position.left += deltaX;
|
|||
|
|
position.top += deltaY;
|
|||
|
|
|
|||
|
|
start.x = touches.clientX;
|
|||
|
|
start.y = touches.clientY;
|
|||
|
|
|
|||
|
|
// 设置边界，防止拖出边界
|
|||
|
|
position.left = Math.max(minLeft.value, Math.min(maxLeft.value, position.left));
|
|||
|
|
position.top = Math.max(minTop.value, Math.min(maxTop.value, position.top));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拖动结束事件
|
|||
|
|
function handleTouchend() {
|
|||
|
|
if (props.disabled || !props.draggable) return;
|
|||
|
|
|
|||
|
|
dragging.value = false;
|
|||
|
|
|
|||
|
|
// 如果 autoStick 为 false，则释放后不进行自动吸边，仅做边界限制
|
|||
|
|
if (props.autoStick === false) {
|
|||
|
|
position.left = Math.max(minLeft.value, Math.min(maxLeft.value, position.left));
|
|||
|
|
position.top = Math.max(minTop.value, Math.min(maxTop.value, position.top));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const middle = sysInfo.windowWidth / 2;
|
|||
|
|
const buttonCenter = position.left + btnInfo.value.width / 2;
|
|||
|
|
|
|||
|
|
// 自动吸边，按钮中心位置大于视口的一半时，自动依附在右边，不然就是左边
|
|||
|
|
position.left =
|
|||
|
|
buttonCenter > middle ? sysInfo.windowWidth - btnInfo.value.width - getGap('right') : getGap('left');
|
|||
|
|
|
|||
|
|
if (expansion.value) direction.value = calcDirection();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按钮点击事件
|
|||
|
|
function handleBtnClick() {
|
|||
|
|
if (slots?.default) {
|
|||
|
|
expansion.value = !expansion.value;
|
|||
|
|
if (expansion.value) direction.value = calcDirection();
|
|||
|
|
} else {
|
|||
|
|
emit('trigger');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算方向
|
|||
|
|
function calcDirection() {
|
|||
|
|
if (!actions.value) return props.direction;
|
|||
|
|
|
|||
|
|
let dir = props.direction;
|
|||
|
|
|
|||
|
|
const actionsHeight = actions.value?.height || 0;
|
|||
|
|
const actionsWidth = actions.value?.width || 0;
|
|||
|
|
|
|||
|
|
// 菜单展开时，如果位置不够，则反转方向
|
|||
|
|
if (dir === 'top') {
|
|||
|
|
// 按钮上方剩余空间: 按钮顶部 - 顶部边距
|
|||
|
|
if (position.top - minTop.value < actionsHeight) dir = 'bottom';
|
|||
|
|
} else if (dir === 'bottom') {
|
|||
|
|
// 按钮下方剩余空间: 有效窗口高度 - (按钮顶部 + 按钮高 + 边距)
|
|||
|
|
const bottom = effectiveWindowHeight.value - (position.top + btnInfo.value.height + getGap('bottom'));
|
|||
|
|
if (bottom < actionsHeight) dir = 'top';
|
|||
|
|
} else if (dir === 'left') {
|
|||
|
|
// 按钮左侧剩余空间: 有效窗口宽度 - 边距
|
|||
|
|
if (position.left - getGap('left') < actionsWidth) dir = 'right';
|
|||
|
|
} else if (dir === 'right') {
|
|||
|
|
// 按钮右侧剩余空间: 有效窗口宽度 - (按钮左侧 + 按钮宽 + 边距)
|
|||
|
|
const right = sysInfo.windowWidth - (position.left + btnInfo.value.width + getGap('right'));
|
|||
|
|
if (right < actionsWidth) dir = 'left';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return dir;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化位置
|
|||
|
|
function initPosition() {
|
|||
|
|
// 根据 props.position 计算初始 left/top
|
|||
|
|
const pos = props.position || 'right-bottom';
|
|||
|
|
const winW = sysInfo.windowWidth;
|
|||
|
|
const winH = effectiveWindowHeight.value;
|
|||
|
|
|
|||
|
|
switch (pos) {
|
|||
|
|
case 'left-top':
|
|||
|
|
position.left = getGap('left');
|
|||
|
|
position.top = getGap('top') + sysInfo.windowTop;
|
|||
|
|
break;
|
|||
|
|
case 'right-top':
|
|||
|
|
position.left = winW - btnInfo.value.width - getGap('right');
|
|||
|
|
position.top = getGap('top') + sysInfo.windowTop;
|
|||
|
|
break;
|
|||
|
|
case 'left-bottom':
|
|||
|
|
position.left = getGap('left');
|
|||
|
|
position.top = winH - btnInfo.value.height - getGap('bottom');
|
|||
|
|
break;
|
|||
|
|
case 'right-bottom':
|
|||
|
|
position.left = winW - btnInfo.value.width - getGap('right');
|
|||
|
|
position.top = winH - btnInfo.value.height - getGap('bottom');
|
|||
|
|
break;
|
|||
|
|
case 'left-center':
|
|||
|
|
position.left = getGap('left');
|
|||
|
|
position.top = Math.round((winH - btnInfo.value.height) / 2);
|
|||
|
|
break;
|
|||
|
|
case 'right-center':
|
|||
|
|
position.left = winW - btnInfo.value.width - getGap('right');
|
|||
|
|
position.top = Math.round((winH - btnInfo.value.height) / 2);
|
|||
|
|
break;
|
|||
|
|
case 'top-center':
|
|||
|
|
position.left = Math.round((winW - btnInfo.value.width) / 2);
|
|||
|
|
position.top = getGap('top') + sysInfo.windowTop;
|
|||
|
|
break;
|
|||
|
|
case 'bottom-center':
|
|||
|
|
position.left = Math.round((winW - btnInfo.value.width) / 2);
|
|||
|
|
position.top = winH - btnInfo.value.height - getGap('bottom');
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
position.left = winW - btnInfo.value.width - getGap('right');
|
|||
|
|
position.top = winH - btnInfo.value.height - getGap('bottom');
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
btnInfo.value = await $u.getRect('#trigger', instance);
|
|||
|
|
actions.value = await $u.getRect('#actions', instance);
|
|||
|
|
|
|||
|
|
initPosition();
|
|||
|
|
|
|||
|
|
minLeft.value = getGap('left');
|
|||
|
|
minTop.value = getGap('top') + sysInfo.windowTop;
|
|||
|
|
maxLeft.value = sysInfo.windowWidth - btnInfo.value.width - getGap('right');
|
|||
|
|
maxTop.value = effectiveWindowHeight.value - btnInfo.value.height - getGap('bottom');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
toggle: handleBtnClick
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.u-fab {
|
|||
|
|
position: fixed;
|
|||
|
|
|
|||
|
|
.u-fab-trigger {
|
|||
|
|
:deep(.u-fab-trigger-btn) {
|
|||
|
|
width: 112rpx;
|
|||
|
|
height: 112rpx;
|
|||
|
|
border-radius: 112rpx;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border-radius: 112rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-fab-actions {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
visibility: hidden;
|
|||
|
|
opacity: 0;
|
|||
|
|
transform-origin: center;
|
|||
|
|
will-change: transform, opacity;
|
|||
|
|
transition: all 0.28s cubic-bezier(0.3, 0, 0.2, 1);
|
|||
|
|
|
|||
|
|
&.u-fab-actions__show {
|
|||
|
|
visibility: visible;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|