vue頁面右下角添加懸浮按鈕組件的方法代碼
更新時間：2024年11月26日 09:32:53 作者：BigBigHang
這篇文章主要介紹了vue頁面右下角添加懸浮按鈕組件的方法代碼,在Vue項目中,通過在頂層路由文件中添加代碼,可以實現頁面左下角懸浮按鈕的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
效果圖：
如上圖所示，需要在頁面的左下角添加一個懸浮按鈕，鼠標放上去時候展示更多詳細按鈕，點擊觸發(fā)相應方法。
<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右下角添加懸浮按鈕組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了解析Vue2.0雙向綁定實現原理，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Vue3 Element Plus表格默認顯示一行實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-07-07
今天小編就為大家分享一篇解決vue動態(tài)為數據添加新屬性遇到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-cli 默認只提供了 dev 和 prod 兩種環(huán)境。這篇文章主要介紹了vue-cli項目配置多環(huán)境的詳細操作過程,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue-codemirror實現在線代碼編譯器?,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
現在很多14寸的筆記本，出廠默認就是150%的顯示。導致很多時候我們的項目，自己開發(fā)的時候都是按照100%比例來開發(fā)的，上線了就會發(fā)現這個問題，今天就這個問題給出解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue簡單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡單封裝axios插件和接口的統(tǒng)一管理操作,結合具體實例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
分析 Vue 中的 computed 和 watch 的區(qū)別
這篇文章分析 Vue 的 computed 和 watch 的區(qū)別，computed 用來監(jiān)控自己定義的變量，頁面上可直接使用。watch 是監(jiān)測 Vue 實例上的數據變動，通俗地講，就是檢測 data 內聲明的數據,需要的朋友可以參考一下2021-09-09