效果如下图：
在线预览
APIs
FloatButton
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| top | 按钮定位的上边距，单位 px | number | string | undefined |
| bottom | 按钮定位的下边距，单位 px | number | string | 40 |
| left | 按钮定位的左边距，单位 px | number | string | undefined |
| right | 按钮定位的右边距，单位 px | number | string | 40 |
| zIndex | 设置按钮的 z-index | number | 9 |
| width | 浮动按钮宽度，单位 px | number | string | 44 |
| height | 浮动按钮高度，单位 px | number | string | 44 |
| type | 浮动按钮类型 | ‘default’ | ‘primary’ | ‘default’ |
| shape | 浮动按钮形状 | ‘circle’ | ‘square’ | ‘circle’ |
| icon | 浮动按钮图标 | string | slot | undefined |
| description | 文字描述信息 | string | slot | undefined |
| href | 点击跳转的地址，指定此属性按钮的行为和 a 链接一致 | string | undefined |
| target | 相当于 a 标签的 target 属性，href 存在时生效 | ‘self’ | ‘_blank’ | ‘self’ |
| menuTrigger | 浮动按钮菜单显示的触发方式 | ‘click’ | ‘hover’ | undefined |
| tooltip | 气泡卡片的内容 | sring | slot | undefined |
| tooltipProps | Tooltip 组件属性配置，参考 Tooltip Props | object | {} |
| badgeProps | 带徽标的浮动按钮（不支持 status 以及相关属性），参考 Badge Props | object | {} |
Events
| 名称 | 说明 | 类型 |
|---|---|---|
| click | 点击浮动按钮时的回调 | (e: Event) => void |
| openChange | 浮动按钮菜单展开收起时的回调 | (open: boolean) => void |
创建浮动按钮组件FloatButton.vue
其中引入使用了以下组件和工具函数：
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import Tooltip from '../tooltip'
import Badge from '../badge'
import { useSlotsExist } from '../utils'
interface Props {
top?: number | string // 按钮定位的上边距，单位 px
bottom?: number | string // 按钮定位的下边距，单位 px
left?: number | string // 按钮定位的左边距，单位 px
right?: number | string // 按钮定位的右边距，单位 px
zIndex?: number // 设置按钮的 z-index
width?: number | string // 浮动按钮宽度，单位 px
height?: number | string // 浮动按钮高度，单位 px
type?: 'default' | 'primary' // 浮动按钮类型
shape?: 'circle' | 'square' // 浮动按钮形状
icon?: string // 浮动按钮图标 string | slot
description?: string // 文字描述信息 string | slot
href?: string // 点击跳转的地址，指定此属性按钮的行为和 a 链接一致
target?: '_self' | '_blank' // 相当于 a 标签的 target 属性，href 存在时生效
menuTrigger?: 'click' | 'hover' // 浮动按钮菜单显示的触发方式
tooltip?: string // 气泡卡片的内容 string | slot
tooltipProps?: object // Tooltip 组件属性配置，参考 Tooltip Props
badgeProps?: object // 带徽标的浮动按钮（不支持 status 以及相关属性），参考 Badge Props
}
const props = withDefaults(defineProps<Props>(), {
top: undefined,
bottom: 40,
left: undefined,
right: 40,
zIndex: 9,
width: 44,
height: 44,
type: 'default',
shape: 'circle',
icon: undefined,
description: undefined,
href: undefined,
target: '_self',
menuTrigger: undefined,
tooltip: undefined,
tooltipProps: () => ({}),
badgeProps: () => ({})
})
const showMenu = ref(false)
const emits = defineEmits(['click', 'openChange'])
const slotsExist = useSlotsExist(['icon', 'description', 'tooltip', 'menu'])
const floatBtnWidth = computed(() => {
if (typeof props.width === 'number') {
return `${props.width}px`
}
return props.width
})
const floatBtnHeight = computed(() => {
if (typeof props.height === 'number') {
return `${props.height}px`
}
return props.height
})
const floatBtnLeft = computed(() => {
if (typeof props.left === 'number') {
return `${props.left}px`
}
return props.left
})
const floatBtnRight = computed(() => {
if (props.left) {
return null
} else {
if (typeof props.right === 'number') {
return `${props.right}px`
}
return props.right
}
})
const floatBtnTop = computed(() => {
if (typeof props.top === 'number') {
return `${props.top}px`
}
return props.top
})
const floatBtnBottom = computed(() => {
if (props.top) {
return null
} else {
if (typeof props.bottom === 'number') {
return `${props.bottom}px`
}
return props.bottom
}
})
const showDescription = computed(() => {
return slotsExist.description || props.description
})
const showTooltip = computed(() => {
return slotsExist.tooltip || props.tooltip
})
watch(showMenu, (to) => {
emits('openChange', to)
})
function onClick(e: Event) {
emits('click', e)
if (props.menuTrigger === 'click' && slotsExist.menu) {
showMenu.value = !showMenu.value
}
}
</script>
<template>
<component
:is="href ? 'a' : 'div'"
tabindex="0"
class="m-float-btn"
:class="`float-btn-${type} float-btn-${shape}`"
:style="`
--float-btn-width: ${floatBtnWidth};
--float-btn-height: ${floatBtnHeight};
--float-btn-left: ${floatBtnLeft};
--float-btn-right: ${floatBtnRight};
--float-btn-top: ${floatBtnTop};
--float-btn-bottom: ${floatBtnBottom};
--float-btn-z-index: ${zIndex};
`"
:href="href"
:target="target"
@click="onClick"
@blur="menuTrigger === 'click' ? (showMenu = false) : null"
@mouseenter="menuTrigger === 'hover' ? (showMenu = true) : null"
@mouseleave="menuTrigger === 'hover' ? (showMenu = false) : null"
>
<Tooltip placement="left" v-bind="tooltipProps" class="float-btn-tooltip">
<template v-if="showTooltip" #tooltip>
<slot name="tooltip">{{ tooltip }}</slot>
</template>
<Badge v-bind="badgeProps">
<div class="float-btn-body">
<div class="float-btn-content">
<div v-if="slotsExist.icon" class="float-btn-icon">
<Transition name="fade">
<slot v-if="!showMenu" name="icon"></slot>
<svg
v-else
class="close-svg"
focusable="false"
data-icon="close"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
fill-rule="evenodd"
viewBox="64 64 896 896"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
></path>
</svg>
</Transition>
</div>
<div v-if="showDescription" class="float-btn-description">
<slot name="description">{{ description }}</slot>
</div>
</div>
</div>
</Badge>
</Tooltip>
<Transition v-show="showMenu" name="move">
<div class="float-btn-menu">
<slot name="menu"></slot>
</div>
</Transition>
</component>
</template>
<style lang="less" scoped>
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-from,
.fade-leave-to {
transform: scale(0.75);
opacity: 0;
}
.fade-leave-active {
position: absolute;
}
.move-enter-active,
.move-leave-active {
transform-origin: 0 0;
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.move-leave-active {
pointer-events: none;
}
.move-enter-from,
.move-leave-to {
transform: translate3d(0, var(--float-btn-height), 0);
transform-origin: 0 0;
opacity: 0;
}
.m-float-btn {
position: fixed;
left: var(--float-btn-left);
right: var(--float-btn-right);
top: var(--float-btn-top);
bottom: var(--float-btn-bottom);
z-index: var(--float-btn-z-index);
font-size: 14px;
color: rgba(0, 0, 0, 0.88);
line-height: 1.5714285714285714;
display: inline-block;
width: var(--float-btn-width);
height: var(--float-btn-height);
cursor: pointer;
outline: none;
box-shadow:
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
.float-btn-tooltip {
width: 100%;
height: 100%;
:deep(.tooltip-content) {
width: 100%;
height: 100%;
.m-badge {
vertical-align: top;
width: 100%;
height: 100%;
.m-badge-value:not(.only-dot) {
transform: translate(0, 0);
transform-origin: center;
top: -6px;
right: -6px;
}
}
}
}
.float-btn-body {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
.float-btn-content {
overflow: hidden;
text-align: center;
min-height: var(--float-btn-height);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2px 4px;
.float-btn-icon {
font-size: 18px;
line-height: 1;
.close-svg {
display: inline-block;
vertical-align: bottom;
}
:deep(svg) {
fill: currentColor;
}
:deep(img) {
vertical-align: bottom;
}
}
}
}
.float-btn-menu {
position: absolute;
bottom: 100%;
display: block;
z-index: -1;
.m-float-btn {
position: static;
}
& > * {
margin-bottom: 16px;
}
}
}
.float-btn-default {
background-color: #ffffff;
transition: background-color 0.2s;
& > .float-btn-tooltip {
.float-btn-body {
background-color: #ffffff;
transition: background-color 0.2s;
&:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.float-btn-content {
.float-btn-icon {
color: rgba(0, 0, 0, 0.88);
}
.float-btn-description {
display: flex;
align-items: center;
line-height: 16px;
color: rgba(0, 0, 0, 0.88);
font-size: 12px;
}
}
}
}
}
.float-btn-primary {
background-color: @themeColor;
& > .float-btn-tooltip {
.float-btn-body {
background-color: @themeColor;
transition: background-color 0.2s;
&:hover {
background-color: #4096ff;
}
.float-btn-content {
.float-btn-icon {
color: #fff;
}
}
.float-btn-description {
display: flex;
align-items: center;
line-height: 16px;
color: #fff;
font-size: 12px;
}
}
}
}
.float-btn-circle {
border-radius: 50%;
:deep(.m-badge) {
.only-dot {
top: 5.857864376269049px;
right: 5.857864376269049px;
}
}
& > .float-btn-tooltip {
.float-btn-body {
border-radius: 50%;
}
}
}
.float-btn-square {
height: auto;
min-height: var(--float-btn-height);
border-radius: 8px;
:deep(.m-badge) {
.only-dot {
top: 2.3431457505076194px;
right: 2.3431457505076194px;
}
}
& > .float-btn-tooltip {
.float-btn-body {
height: auto;
border-radius: 8px;
}
}
}
</style>
在要使用的页面引入
其中引入使用了以下组件：
<script setup lang="ts">
import FloatButton from './FloatButton.vue'
import {
GlobalOutlined,
QuestionCircleOutlined,
CustomerServiceOutlined,
StarFilled,
SettingOutlined,
SketchOutlined,
MessageOutlined,
CommentOutlined
} from '@ant-design/icons-vue'
function onClick(e: Event) {
console.log('click', e)
}
function onOpenChange(open: boolean) {
console.log('openChange', open)
}
</script>
<template>
<div>
<h1>{{ $route.name }} {{ $route.meta.title }}</h1>
<h2 class="mt30 mb10">基本使用</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton @click="onClick">
<template #icon>
<GlobalOutlined />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">位置</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton>
<template #icon>
<MessageOutlined />
</template>
</FloatButton>
<FloatButton shape="square" :top="40">
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
<FloatButton type="primary" :left="40">
<template #icon>
<MessageOutlined />
</template>
</FloatButton>
<FloatButton type="primary" shape="square" :top="40" :left="40">
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">尺寸</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton :width="56" :height="56" :right="120">
<template #icon>
<MessageOutlined style="font-size: 24px" />
</template>
</FloatButton>
<FloatButton type="primary" shape="square" :width="56" :height="56">
<template #icon>
<CommentOutlined style="font-size: 24px" />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">类型</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton :right="96">
<template #icon>
<QuestionCircleOutlined />
</template>
</FloatButton>
<FloatButton type="primary">
<template #icon>
<QuestionCircleOutlined />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">形状</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton type="primary" :right="96">
<template #icon>
<CustomerServiceOutlined />
</template>
</FloatButton>
<FloatButton type="primary" shape="square">
<template #icon>
<CustomerServiceOutlined />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">图标</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton type="primary" :right="96">
<template #icon>
<StarFilled spin style="color: gold" />
</template>
</FloatButton>
<FloatButton shape="square">
<template #icon>
<SettingOutlined style="color: #1677ff" />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">文字描述信息</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton shape="square" description="HELP" :right="152">
<template #icon>
<GlobalOutlined />
</template>
</FloatButton>
<FloatButton shape="square" description="HELP INFO" :right="96" />
<FloatButton type="primary" shape="square" description="客服">
<template #icon>
<CustomerServiceOutlined />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">链接跳转</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton href="https://themusecatcher.github.io/vue-amazing-ui/" :right="96">
<template #icon>
<img style="width: 1em; height: 1em" src="https://themusecatcher.github.io/vue-amazing-ui/amazing-logo.svg" />
</template>
</FloatButton>
<FloatButton
type="primary"
shape="square"
description="CSDN"
href="https://blog.csdn.net/Dandrose"
target="_blank"
/>
</Card>
<h2 class="mt30 mb10">菜单模式</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton shape="square" description="HELP" :right="96" menu-trigger="click" @openChange="onOpenChange">
<template #icon>
<CustomerServiceOutlined />
</template>
<template #menu>
<FloatButton shape="square">
<template #icon>
<MessageOutlined />
</template>
</FloatButton>
<FloatButton>
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
</template>
</FloatButton>
<FloatButton type="primary" menu-trigger="hover" @openChange="onOpenChange">
<template #icon>
<CustomerServiceOutlined />
</template>
<template #menu>
<FloatButton>
<template #icon>
<MessageOutlined />
</template>
</FloatButton>
<FloatButton>
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">气泡卡片</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton tooltip="Diamond" :right="96">
<template #icon>
<SketchOutlined />
</template>
</FloatButton>
<FloatButton
type="primary"
tooltip="Diamond"
:tooltip-props="{
bgColor: '#fff',
tooltipStyle: {
fontWeight: 500,
color: 'rgba(0, 0, 0, 0.88)'
},
placement: 'top'
}"
>
<template #icon>
<SketchOutlined />
</template>
</FloatButton>
</Card>
<h2 class="mt30 mb10">徽标数</h2>
<Card width="50%" style="height: 300px; transform: translate(0)">
<FloatButton :badge-props="{ dot: true }" :right="152">
<template #icon>
<MessageOutlined />
</template>
</FloatButton>
<FloatButton :badge-props="{ value: 5, color: 'blue' }" :bottom="100">
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
<FloatButton :badge-props="{ value: 5 }">
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
<FloatButton :badge-props="{ value: 123 }" :right="96">
<template #icon>
<CommentOutlined />
</template>
</FloatButton>
</Card>
</div>
</template>
扫一扫
3639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
