vue页面右下角添加悬浮按钮组件的方法代码
作者：BigBigHang
这篇文章主要介绍了vue页面右下角添加悬浮按钮组件的方法代码,在Vue项目中,通过在顶层路由文件中添加代码,可以实现页面左下角悬浮按钮的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
效果图：
如上图所示，需要在页面的左下角添加一个悬浮按钮，鼠标放上去时候展示更多详细按钮，点击触发相应方法。
<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><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项目的顶层路由文件中添加即可。
总结
到此这篇关于vue页面右下角添加悬浮按钮组件的文章就介绍到这了,更多相关vue右下角添加悬浮按钮组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！