chore: update deps
This commit is contained in:
@@ -14,6 +14,7 @@ defineOptions({ name: 'BackTop' });
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
bottom: 40,
|
||||
isGroup: false,
|
||||
right: 40,
|
||||
target: '',
|
||||
visibilityHeight: 200,
|
||||
@@ -31,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
|
||||
<VbenButton
|
||||
v-if="visible"
|
||||
:style="backTopStyle"
|
||||
class="bg-accent fixed bottom-5 right-5 h-10 w-10 rounded-full"
|
||||
class="bg-accent data fixed bottom-10 right-5 h-10 w-10 rounded-full"
|
||||
size="icon"
|
||||
variant="icon"
|
||||
@click="handleClick"
|
||||
|
@@ -31,6 +31,7 @@ export const backtopProps = {
|
||||
|
||||
export interface BacktopProps {
|
||||
bottom?: number;
|
||||
isGroup?: boolean;
|
||||
right?: number;
|
||||
target?: string;
|
||||
visibilityHeight?: number;
|
||||
|
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const isMenuOpen = ref(false);
|
||||
const menuItems = ref(['1', '2', '3', '4']);
|
||||
|
||||
const toggleMenu = () => {
|
||||
isMenuOpen.value = !isMenuOpen.value;
|
||||
};
|
||||
|
||||
const handleMenuItemClick = (_item) => {
|
||||
// console.log(111, item);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed bottom-5 right-5 flex flex-col-reverse items-center gap-2">
|
||||
<button
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white transition-transform duration-300"
|
||||
:class="{ 'rotate-45': isMenuOpen }"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
<div
|
||||
class="absolute bottom-16 right-0 flex flex-col-reverse gap-2 transition-all duration-300"
|
||||
:class="{
|
||||
'visible translate-y-0 opacity-100': isMenuOpen,
|
||||
'invisible translate-y-2 opacity-0': !isMenuOpen,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
v-for="(item, index) in menuItems"
|
||||
:key="index"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white"
|
||||
@click="handleMenuItemClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 可以在这里添加任何需要的额外样式 */
|
||||
</style>
|
@@ -0,0 +1 @@
|
||||
export { default as VbenFloatingButtonGroup } from './floating-button-group.vue';
|
@@ -7,6 +7,7 @@ export * from './button';
|
||||
export * from './checkbox';
|
||||
export * from './context-menu';
|
||||
export * from './dropdown-menu';
|
||||
export * from './floating-button-group';
|
||||
export * from './full-screen';
|
||||
export * from './hover-card';
|
||||
export * from './icon';
|
||||
|
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { VbenAvatar } from '../avatar';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Logo 图标 alt
|
||||
@@ -42,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
alt: 'Vben',
|
||||
collapse: false,
|
||||
href: 'javascript:void 0',
|
||||
logoSize: 32,
|
||||
logoSize: 36,
|
||||
src: '',
|
||||
text: '',
|
||||
theme: 'light',
|
||||
@@ -59,13 +57,12 @@ const logoClass = computed(() => {
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 font-semibold leading-normal transition-all duration-500"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<VbenAvatar
|
||||
<img
|
||||
v-if="src"
|
||||
:src="src"
|
||||
:alt="alt"
|
||||
:height="logoSize"
|
||||
:width="logoSize"
|
||||
class="relative size-9 rounded-none bg-transparent"
|
||||
class="relative rounded-none bg-transparent"
|
||||
/>
|
||||
<span
|
||||
v-if="!collapse"
|
||||
|
@@ -33,6 +33,7 @@
|
||||
opacity: 0;
|
||||
transform: translateX(30px) skewX(-30deg);
|
||||
}
|
||||
|
||||
/*
|
||||
.breadcrumb-transition-move,
|
||||
.breadcrumb-transition-enter-active {
|
||||
|
Reference in New Issue
Block a user