快捷導(dǎo)航

vue頁(yè)面右下角添加懸浮按鈕組件的方法代碼

更新時(shí)間：2024年11月26日 09:32:53 作者：BigBigHang

這篇文章主要介紹了vue頁(yè)面右下角添加懸浮按鈕組件的方法代碼,在Vue項(xiàng)目中,通過在頂層路由文件中添加代碼,可以實(shí)現(xiàn)頁(yè)面左下角懸浮按鈕的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

效果圖：

如上圖所示，需要在頁(yè)面的左下角添加一個(gè)懸浮按鈕，鼠標(biāo)放上去時(shí)候展示更多詳細(xì)按鈕，點(diǎn)擊觸發(fā)相應(yīng)方法。

<div class="floating-component">
    <!-- 懸浮內(nèi)容 -->
    <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">幫助手冊(cè) </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; /* 設(shè)置 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" 并且是設(shè)置 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>

如果需要在所有頁(yè)面上層展示，在vue項(xiàng)目的頂層路由文件中添加即可。

總結(jié)

到此這篇關(guān)于vue頁(yè)面右下角添加懸浮按鈕組件的文章就介紹到這了,更多相關(guān)vue右下角添加懸浮按鈕組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
解析Vue2.0雙向綁定實(shí)現(xiàn)原理
本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
Vue3 Element Plus表格默認(rèn)顯示一行實(shí)例
這篇文章主要介紹了Vue3 Element Plus表格默認(rèn)顯示一行實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-07-07
解決vue動(dòng)態(tài)為數(shù)據(jù)添加新屬性遇到的問題
今天小編就為大家分享一篇解決vue動(dòng)態(tài)為數(shù)據(jù)添加新屬性遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過程
vue-cli 默認(rèn)只提供了 dev 和 prod 兩種環(huán)境。這篇文章主要介紹了vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過程,需要的朋友可以參考下
2018-10-10
vue?codemirror實(shí)現(xiàn)在線代碼編譯器效果
這篇文章主要介紹了vue-codemirror實(shí)現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
現(xiàn)在很多14寸的筆記本，出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目，自己開發(fā)的時(shí)候都是按照100%比例來開發(fā)的，上線了就會(huì)發(fā)現(xiàn)這個(gè)問題，今天就這個(gè)問題給出解決方案，感興趣的朋友跟隨小編一起看看吧
2022-11-11
vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實(shí)例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下
2020-02-02
在IDEA中安裝vue插件全過程
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
分析 Vue 中的 computed 和 watch 的區(qū)別
這篇文章分析 Vue 的 computed 和 watch 的區(qū)別，computed 用來監(jiān)控自己定義的變量，頁(yè)面上可直接使用。watch 是監(jiān)測(cè) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)，通俗地講，就是檢測(cè) data 內(nèi)聲明的數(shù)據(jù),需要的朋友可以參考一下
2021-09-09