悬浮按钮 Float Button

悬浮按钮之于网站就像芥末之于三文鱼——可以不用，但是不能没有

如果你的悬浮按钮想设计在右下角，那么这个组件会很适合你

基本用法

悬浮按钮使用固定定位position:fixed，你可以在右下角看到默认效果

使用时在内部首先指定主样式，然后在menu模板中使用t-float-item定义所有的子元素样式

展开查看

<template>
    <t-float-button>
        <svg viewBox="0 0 1024 1024">
            <path
                d="M439.264 208a16 16 0 0 0-16 16v67.968a239.744 239.744 0 0 0-46.496 26.896l-58.912-34a16 16 0 0 0-21.856 5.856l-80 138.56a16 16 0 0 0 5.856 21.856l58.896 34a242.624 242.624 0 0 0 0 53.728l-58.88 34a16 16 0 0 0-6.72 20.176l0.848 1.68 80 138.56a16 16 0 0 0 21.856 5.856l58.912-34a239.744 239.744 0 0 0 46.496 26.88V800a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-67.968a239.744 239.744 0 0 0 46.512-26.896l58.912 34a16 16 0 0 0 21.856-5.856l80-138.56a16 16 0 0 0-4.288-20.832l-1.568-1.024-58.896-34a242.624 242.624 0 0 0 0-53.728l58.88-34a16 16 0 0 0 6.72-20.176l-0.848-1.68-80-138.56a16 16 0 0 0-21.856-5.856l-58.912 34a239.744 239.744 0 0 0-46.496-26.88V224a16 16 0 0 0-16-16h-160z m32 48h96v67.376l28.8 12.576c13.152 5.76 25.632 12.976 37.184 21.52l25.28 18.688 58.448-33.728 48 83.136-58.368 33.68 3.472 31.2a194.624 194.624 0 0 1 0 43.104l-3.472 31.2 58.368 33.68-48 83.136-58.432-33.728-25.296 18.688c-11.552 8.544-24.032 15.76-37.184 21.52l-28.8 12.576V768h-96v-67.376l-28.784-12.576c-13.152-5.76-25.632-12.976-37.184-21.52l-25.28-18.688-58.448 33.728-48-83.136 58.368-33.68-3.472-31.2a194.624 194.624 0 0 1 0-43.104l3.472-31.2-58.368-33.68 48-83.136 58.432 33.728 25.296-18.688a191.744 191.744 0 0 1 37.184-21.52l28.8-12.576V256z m47.28 144a112 112 0 1 0 0 224 112 112 0 0 0 0-224z m0 48a64 64 0 1 1 0 128 64 64 0 0 1 0-128z"></path>
        </svg>
        <template #menu>
            <t-float-item>
                <svg viewBox="0 0 1024 1024">
                    <path
                        d="M631.466667 295.466667a123.52 123.52 0 0 1 38.186666 96.213333 132.053333 132.053333 0 0 1-25.173333 79.786667 642.346667 642.346667 0 0 1-56.106667 52.693333 128 128 0 0 0-31.36 36.693333 47.573333 47.573333 0 0 0-2.346666 50.56V640h-64v-28.586667a109.013333 109.013333 0 0 1 11.093333-59.306666 261.76 261.76 0 0 1 68.906667-79.146667c9.173333-9.173333 16.853333-17.28 23.253333-24.746667a87.466667 87.466667 0 0 0 19.84-53.76 85.333333 85.333333 0 0 0-22.613333-64 90.88 90.88 0 0 0-67.626667-23.893333A88.96 88.96 0 0 0 448 341.333333a138.24 138.24 0 0 0-21.333333 85.333334h-55.253334a170.666667 170.666667 0 0 1 40.32-122.453334 149.333333 149.333333 0 0 1 114.56-45.013333 146.773333 146.773333 0 0 1 105.173334 36.266667z m-85.333334 391.04a42.666667 42.666667 0 0 1 0 58.026666 42.666667 42.666667 0 0 1-29.44 11.733334 41.173333 41.173333 0 0 1-41.6-40.96 36.266667 36.266667 0 0 1 12.373334-28.8 38.4 38.4 0 0 1 29.226666-11.52 39.893333 39.893333 0 0 1 29.44 11.52z"></path>
                </svg>
            </t-float-item>
            <t-float-item>顶部</t-float-item>
        </template>
    </t-float-button>
</template>

定位与间距

通过设置bottom和right可调整悬浮按钮的位置，通过设置gap调整元素间距

展开查看

<template>
    <div class="box">
        <t-float-button :bottom="10" :right="10" :gap="50">
            <svg viewBox="0 0 1024 1024">
                <path
                    d="M782.921143 359.365486l-124.1088-124.1088a29.257143 29.257143 0 0 0-41.3696 0L48.508343 804.176457a29.257143 29.257143 0 0 0 0 41.3696l124.1088 124.1088c5.719771 5.719771 13.194971 8.572343 20.6848 8.572343s14.965029-2.852571 20.6848-8.572343l568.9344-568.905143a29.257143 29.257143 0 0 0 0-41.384228zM193.316571 907.600457l-82.7392-82.7392 444.796343-444.796343 82.7392 82.7392-444.796343 444.796343z m465.466515-465.481143l-82.7392-82.7392 62.069028-62.069028 82.7392 82.7392-62.069028 62.069028zM758.1696 240.669257l30.544457 14.555429 23.303314 24.561371a58.514286 58.514286 0 0 0 42.437486 18.241829h0.014629a58.499657 58.499657 0 0 0 42.437485-18.241829l23.288686-24.561371 30.529829-14.555429a58.528914 58.528914 0 0 0 26.229028-80.749714L960.8192 130.194286l-4.417829-33.543315a58.543543 58.543543 0 0 0-68.681142-49.912685l-33.265372 6.173257-33.28-6.158629a58.5728 58.5728 0 0 0-45.070628 10.196115 58.485029 58.485029 0 0 0-23.610515 39.716571L748.090514 130.194286l-16.149943 29.725257a58.528914 58.528914 0 0 0 26.229029 80.749714z m46.518857-92.072228l5.822172-44.309943 43.944228 8.148114 43.9296-8.148114 5.822172 44.309943 21.328457 39.263085-40.330972 19.221943-30.763885 32.431543-30.778515-32.431543-40.330971-19.221943 21.357714-39.263085zM390.831543 230.473143l18.563657 8.835657 14.145829 14.921143a58.528914 58.528914 0 0 0 42.422857 18.2272h0.014628c16.047543 0 31.392914-6.582857 42.422857-18.212572l14.160458-14.921142 18.578285-8.850286a58.528914 58.528914 0 0 0 26.229029-80.764343l-9.815772-18.037029-2.677028-20.3776a58.587429 58.587429 0 0 0-58.016914-50.907428c-3.554743 0-7.124114 0.321829-10.664229 0.980114l-20.216686 3.744914-20.202057-3.744914a58.558171 58.558171 0 0 0-68.681143 49.898057l-2.691657 20.406857-9.815771 18.066286a58.499657 58.499657 0 0 0 26.243657 80.735086z m40.170057-80.413257l4.096-31.144229 30.866286 5.7344 30.880914-5.7344 4.081371 31.144229 14.994286 27.604114-28.350171 13.5168-21.635657 22.776686-21.621029-22.776686-28.350171-13.5168 15.038171-27.604114zM967.138743 497.386057l-2.677029-20.3776a58.587429 58.587429 0 0 0-58.016914-50.907428c-3.554743 0-7.124114 0.321829-10.664229 0.980114l-20.216685 3.744914-20.202057-3.744914a58.558171 58.558171 0 0 0-68.681143 49.898057l-2.691657 20.406857-9.815772 18.066286a58.499657 58.499657 0 0 0 26.243657 80.735086l18.563657 8.835657 14.145829 14.921143a58.528914 58.528914 0 0 0 42.422857 18.2272h0.014629c16.047543 0 31.392914-6.582857 42.422857-18.212572l14.160457-14.921143 18.578286-8.850285a58.528914 58.528914 0 0 0 26.229028-80.764343l-9.815771-18.037029z m-69.9392 59.4944l-21.635657 22.776686-21.621029-22.776686-28.350171-13.5168 14.979657-27.604114 4.096-31.144229 30.866286 5.7344 30.880914-5.7344 4.081371 31.144229 14.994286 27.604114-28.291657 13.5168z"></path>
                <path
                    d="M469.942857 511.663543a14.613943 14.613943 0 0 0-20.6848 0l-32.914286 32.914286a14.613943 14.613943 0 1 0 20.6848 20.6848l32.914286-32.914286a14.613943 14.613943 0 0 0 0-20.6848zM376.1152 584.8064l-219.428571 219.428571a14.613943 14.613943 0 1 0 20.6848 20.6848l219.428571-219.428571a14.613943 14.613943 0 1 0-20.6848-20.6848z"></path>
            </svg>
            <template #menu>
                <t-float-item>按钮A</t-float-item>
                <t-float-item>按钮B</t-float-item>
            </template>
        </t-float-button>
    </div>
</template>

<style lang="less" scoped>
.box {
    background-color: rgb(225, 225, 225);
    height: 300px;
    transform: rotate(360deg);
}
</style>

动画

通过animation可设置origin, edge, none（默认）动画效果

边缘

原点

默认

展开查看

<template>
    <div class="box">
        <t-float-button :bottom="20" :right="10" animation="edge">
            边缘
            <template #menu>
                <t-float-item>按钮A</t-float-item>
                <t-float-item>按钮B</t-float-item>
            </template>
        </t-float-button>
        <t-float-button :bottom="20" :right="160" animation="origin">
            原点
            <template #menu>
                <t-float-item>按钮A</t-float-item>
                <t-float-item>按钮B</t-float-item>
            </template>
        </t-float-button>
        <t-float-button :bottom="20" :right="310" animation="none">
            默认
            <template #menu>
                <t-float-item>按钮A</t-float-item>
                <t-float-item>按钮B</t-float-item>
            </template>
        </t-float-button>
    </div>
</template>

<style lang="less" scoped>
.box {
    background-color: rgb(225, 225, 225);
    height: 300px;
    transform: rotate(360deg);
}
</style>

相关属性

属性名	说明	类型	默认值
bottom	底部偏移量	number	60
right	右侧偏移量	number	45
gap	按钮间距	number	45
animation	按钮动画	'origin' | 'edge' | 'none'	'none'