【vue】在页面右下角添加悬浮按钮组件

效果图:

如上图所示,需要在页面的左下角添加一个悬浮按钮,鼠标放上去时候展示更多详细按钮,点击触发相应方法。

html 复制代码
<div class="floating-component">
    <!-- 悬浮内容 -->
    <el-tooltip placement="left" effect="light" popper-class="too">
      <div slot="content">
        <el-button icon="el-icon-s-comment" class="butto" @click="handleQuestion">问题反馈 </el-button>
        <br/>
        <el-button icon="el-icon-question" class="butto" @click="handleHelp">帮助手册 </el-button>
      </div>
      <el-button icon="el-icon-menu" circle class="but"></el-button>
    </el-tooltip>
</div>
html 复制代码
<style scoped>
.floating-component {
  position: fixed; /* 固定位置 */
  bottom: 5%; /* 下边距 */
  right: 1%; /* 右边距 */
  padding: 0;
  border-radius: 50%; /* 圆角 */
  z-index: 10000; /* 设置 z-index 确保悬浮在顶层 */
}
.but {
  font-size: larger;
  color: rgb(0,119,216);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); /* 阴影 */
}
.butto {
  border: 0;
  padding: 10px;
  margin: 0;
}
</style>

<style>
.too.el-tooltip__popper.is-light {
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  padding: 5px
}
/* 修改箭头边框 这里方位是left,所以 x-placement^="left" 并且是设置 border-right-color 的颜色*/
.too.el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow {
  border-left-color: #eaeaea !important;
}
.too.el-tooltip__popper[x-placement^="left"] .popper__arrow {
  border-left-color: #eaeaea !important;
}
</style>

如果需要在所有页面上层展示,在vue项目的顶层路由文件中添加即可。

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui