uview-pro 0.6.18 → 0.6.19

package/components/u-fab/u-fab.vue

@@ -1,330 +1,330 @@
-<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 '../../';
-import uButton from '../u-button/u-button.vue';
-import uIcon from '../u-icon/u-icon.vue';
-
-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>
+<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 '../../';
+import uButton from '../u-button/u-button.vue';
+import uIcon from '../u-icon/u-icon.vue';
+
+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>