152 lines
3.1 KiB
Vue
152 lines
3.1 KiB
Vue
<template>
|
|
<view class="fix-suspension" :style="baseStyle">
|
|
<view class="menu" :style="innerStyle" @click="toggleMenu">
|
|
<image class="icon" :src="list[0].icon"></image>
|
|
</view>
|
|
<view class="menu-slide">
|
|
<view
|
|
v-for="(item, index) in visibleItems"
|
|
:key="index"
|
|
class="sub-menu"
|
|
:style="subMenuStyle(index)"
|
|
@click="toPath(item.link)"
|
|
>
|
|
<image class="icon" :src="item.icon"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" name="fix-suspension" setup>
|
|
import { computed, ref, type PropType } from "vue";
|
|
import type { Form } from "../../types/form";
|
|
|
|
const props = defineProps({
|
|
mode: {
|
|
type: String,
|
|
default: "left",
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: "rgba(0, 0, 0, 0.8)",
|
|
},
|
|
offsetBottom: {
|
|
type: Number,
|
|
default: 50,
|
|
},
|
|
shadow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
list: {
|
|
type: Array as PropType<Form.Suspension[]>,
|
|
default: () => [
|
|
{
|
|
icon: "https://tsb-yx.oss-cn-guangzhou.aliyuncs.com/app/mini/float-menu.png",
|
|
tips: "宽高128px",
|
|
link: {
|
|
name: "",
|
|
type: "",
|
|
appid: "",
|
|
page: "",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
const emits = defineEmits(["jump"]);
|
|
|
|
const baseStyle = computed(() => {
|
|
return {
|
|
bottom: `${props.offsetBottom}rpx`,
|
|
[props.mode]: "10px",
|
|
};
|
|
});
|
|
|
|
const innerStyle = computed(() => {
|
|
return {
|
|
background: props.backgroundColor,
|
|
boxShadow: props.shadow ? "0 4px 10px rgba(0, 0, 0, 0.3)" : undefined,
|
|
};
|
|
});
|
|
|
|
const isMenuOpen = ref(false);
|
|
const toggleMenu = () => {
|
|
if (props.list.length > 1) {
|
|
isMenuOpen.value = !isMenuOpen.value;
|
|
} else {
|
|
toPath(props.list[0].link);
|
|
}
|
|
};
|
|
|
|
// 控制显示的子按钮
|
|
const visibleItems = computed(() => {
|
|
return isMenuOpen.value ? props.list.slice(1) : [];
|
|
});
|
|
|
|
// 子菜单项的样式和动画效果
|
|
const subMenuStyle = (index: number) => {
|
|
const offset = 90; // 每个子菜单项的高度
|
|
return {
|
|
transition: `transform 0.3s ease, opacity 0.3s ease`,
|
|
transform: isMenuOpen.value ? `translateY(-${(index + 1) * offset}rpx)` : "translateY(0)",
|
|
opacity: isMenuOpen.value ? 1 : 0,
|
|
background: props.backgroundColor,
|
|
boxShadow: props.shadow ? "0 4px 10px rgba(0, 0, 0, 0.3)" : undefined,
|
|
};
|
|
};
|
|
|
|
function toPath(link: Form.Link) {
|
|
emits("jump", link);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fix-suspension {
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
z-index: 400;
|
|
|
|
.menu {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
user-select: none;
|
|
}
|
|
|
|
.menu-slide {
|
|
position: absolute; /* 依赖于父元素定位 */
|
|
bottom: 80rpx; /* 让子菜单从主菜单上方展开 */
|
|
left: 0; /* 根据需要调整位置 */
|
|
width: 80rpx; /* 确保子菜单能够展示 */
|
|
transition: all 0.3s ease;
|
|
overflow: visible; /* 确保子菜单不被裁剪 */
|
|
}
|
|
|
|
.sub-menu {
|
|
position: absolute;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
z-index: 100;
|
|
opacity: 0;
|
|
transition:
|
|
transform 0.3s ease,
|
|
opacity 0.3s ease;
|
|
}
|
|
}
|
|
</style>
|