基于Vue3开发悬浮固定按钮组件

阅读量：

目录

一、需求说明
- 二、代码解析
- 三、成果呈现

一、需求描述与分析

页面右侧需设置五个固定的悬浮圆形元素。
当鼠标悬停在圆形上方时，将触发对应的文字提示信息。
其中一个圆形为返回顶部功能按钮，当用户滚动至页面底部时自动显示，点击该按钮可使页面跳转至顶部位置。
点击相关按钮将触发弹窗界面的显示。

二、代码解析与理解

复制代码

    <template>
      <div class="circle-container">
    <Tooltip title="返回顶部" placement="left">
      <div v-show="showTop" class="circle" @click="scrollToTop">
        <SvgIcon icon-name="icon-fanhuidingbu"></SvgIcon>
      </div>
    </Tooltip>
    <Tooltip title="GitHub" placement="left">
      <div class="circle" @click="navigateToGitHub">
       <SvgIcon icon-name="icon-github"

全部评论 (0)

还没有任何评论哟~