快捷導(dǎo)航

Vue懸浮窗和聚焦登錄組件功能實(shí)現(xiàn)

更新時(shí)間：2022年11月03日 10:35:49 作者：游坦之

這篇文章主要介紹了Vue懸浮窗和聚焦登錄組件經(jīng)驗(yàn)總結(jié),? 本文整理了實(shí)現(xiàn)懸浮窗以及聚焦登錄組件的功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

? 本文整理了實(shí)現(xiàn)懸浮窗以及聚焦登錄組件的功能。

? 為的是方便大家和自己的學(xué)習(xí)。

? 省流：可以只看1.2 和 2的代碼即可

1 懸浮窗

?[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-QHAOwAni-1665545585406)(https://gitee.com/you-tanzhi/pic/raw/master/%E6%9F%90%E5%A5%87%E8%89%BA.gif)]

現(xiàn)在各大流行視頻網(wǎng)站的平臺(tái)都在使用這種懸浮顯示的效果，我就想這種東西是怎樣搞出來(lái)的呢！幾經(jīng)嘗試，終于找到了一個(gè)實(shí)現(xiàn)方式，記錄一下自己的開(kāi)發(fā)歷程，方便以后的使用，也為了各C友提供便利。

1.1 使用display

嘗試用display實(shí)現(xiàn)，利用display:none和block的切換，來(lái)實(shí)現(xiàn)懸浮窗的顯示/關(guān)閉。

把方法加在div1(懸浮窗)、div2（帶圖片背景的組件）共同的父組件div上，這樣可以實(shí)現(xiàn)懸浮窗的效果

<template>
  <div class="div1" @mousemove="showDiv1()" @mouseout="hideDiv1()">
    <div class="div_header">
      我是懸浮框
    </div>
    <div class="div_main" id="div_main">

    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  methods:{
    showDiv1(){
      var d1 =  document.getElementById('div_main');
      d1.style.cssText = 'display:block;'
    },
    hideDiv1()
    {
      var d1 =  document.getElementById('div_main');
      d1.style.cssText = 'display:none;'
    }
  }
}
</script>

<style scoped>
.div1 {
  height: 50px;
  width: 300px;
  border: 1px solid;
  position: fixed;
  top: 0px;
  right: 100px;
  cursor: pointer;
}

.div_header {
  width: 300px;
  height: 50px;
  /* border: 1px solid; */
  line-height: 50px;
  text-align: center;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

}
.div_main{
  height: 400px;
  width: 300px;
  /* margin-top: 10px; */
  background-image: url('@/assets/十元.png');
  background-size: 300px 400px;
  display: none;
}
</style>

但是一旦兩者之間有了間隙，這樣的效果，就不太好了。這要求你必須有一定的手速，才能實(shí)現(xiàn)想要的效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-OCerYxpc-1665545585416)(https://gitee.com/you-tanzhi/pic/raw/master/2.gif)]

而且這不符合流行網(wǎng)站的形式，因?yàn)樵谑髽?biāo)移出圖標(biāo)的時(shí)候，他總是有一個(gè)"緩沖"效果，延時(shí)片刻，再消失。

這里很容易想到要用動(dòng)畫(huà)的形式，但當(dāng)我添加了動(dòng)畫(huà)效果之后，意外的發(fā)現(xiàn)動(dòng)畫(huà)的效果無(wú)效。在CSDN上搜索了一下，發(fā)現(xiàn)display是不能和動(dòng)畫(huà)一塊使用的，否則就會(huì)無(wú)效。

所以即使這里寫(xiě)了動(dòng)畫(huà)，也是不生效的

利用動(dòng)畫(huà)解決不生效

<template>
  <div class="div1" @mousemove="showDiv1()" @mouseout="hideDiv1()">
    <div class="div_header">
      我是懸浮框
    </div>
    <div class="div_main" id="div_main">

    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  methods:{
    showDiv1(){
      var d1 =  document.getElementById('div_main');
      d1.style.cssText = 'display:block;'
    },
    hideDiv1()
    {
      var d1 =  document.getElementById('div_main');
      d1.style.cssText='animation-name:example; animation-duration:1s;animation-fill-mode: forwards;';
    }
  }
}
</script>
<style>
  @keyframes example{
    from{
      display: block;
    }
    to{
      display: none;
    }
  }
</style>
<style scoped>
.div1 {
  height: 50px;
  width: 300px;
  border: 1px solid;
  position: fixed;
  top: 0px;
  right: 100px;
  cursor: pointer;
}

.div_header {
  width: 300px;
  height: 50px;
  /* border: 1px solid; */
  line-height: 50px;
  text-align: center;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

}
.div_main{
  height: 400px;
  width: 300px;
  margin-top: 10px;
  background-image: url('@/assets/十元.png');
  background-size: 300px 400px;
  display: none;
}
</style>

1.2 使用visibility（☆）

將display:none 改為 visibility: hidden，將display: block;改為visibility: visible;

這樣是可以實(shí)現(xiàn)的，這里我特意把消失的時(shí)間放長(zhǎng)了一下

這是正常的效果

<template>
  <div class="div1" @mousemove="showDiv1()" @mouseout="hideDiv1()">
    <div class="div_header">
      我是懸浮框
    </div>
    <div class="div_main" id="div_main">

    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  methods:{
    showDiv1(){
      var d1 =  document.getElementById('div_main');
      d1.style.cssText = 'visibility: visible;'
    },
    hideDiv1()
    {
      var d1 =  document.getElementById('div_main');
      d1.style.cssText='animation-name:example; animation-duration:0.1s;animation-fill-mode: forwards;';
    }
  }
}
</script>
<style>
  @keyframes example{
    from{
      visibility: visible;

    }
    to{
      visibility: hidden;
    }
  }
</style>
<style scoped>
.div1 {
  height: 50px;
  width: 300px;
  border: 1px solid;
  position: fixed;
  top: 0px;
  right: 100px;
  cursor: pointer;
}

.div_header {
  width: 300px;
  height: 50px;
  /* border: 1px solid; */
  line-height: 50px;
  text-align: center;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

}
.div_main{
  height: 400px;
  width: 300px;
  margin-top: 10px;
  background-image: url('@/assets/十元.png');
  background-size: 300px 400px;
  /* display: none; */
  visibility: hidden;
}
</style>

說(shuō)來(lái)很奇怪，我在實(shí)戰(zhàn)的時(shí)候，將位置設(shè)置為position:fixed；明明不可以，后來(lái)?yè)Q成absolute就可以了，但是再寫(xiě)這篇博客的時(shí)候，換成fixed也是可以的，原來(lái)使用的地方，居然也莫名其妙用fixed可以了，有些莫名其妙。

2 全屏只能點(diǎn)擊登錄組件

原理

有一個(gè)空的div（寬高為0），z-index的等級(jí)大于所有的標(biāo)簽（除了登錄頁(yè)面），點(diǎn)擊登錄按鈕的時(shí)候，設(shè)置div的寬高覆蓋整個(gè)頁(yè)面，同時(shí)顯示出登錄界面，這時(shí)候除了登錄頁(yè)面其他的組件都不能被點(diǎn)擊，因?yàn)槠渌慕M件都被這個(gè)空的div覆蓋了。

剛開(kāi)始的頁(yè)面是這樣的

當(dāng)點(diǎn)擊登錄按鈕的時(shí)候，讓用于隱藏組件具有整個(gè)屏幕的寬高，從而覆蓋怎么屏幕，同時(shí)讓登錄組件展示，因?yàn)榈卿浗M件的層級(jí)大于用于隱藏的組件，所有用于隱藏的組件覆蓋了除登錄組件的所有的組件，這也就也解釋了為什么只有登錄組件可以使用。

關(guān)閉：想要關(guān)閉的時(shí)候，在利用一個(gè)函數(shù)，設(shè)置為不顯示即可,display:none;

代碼

<template>
  <div>
    <div class="div1">
      <div class="div_header" @click="showDiv1()">
        登錄/注冊(cè)
      </div>
      <div class="button_main">
        <button style="cursor: pointer;">點(diǎn)我</button>
        <button style="  cursor: pointer;">點(diǎn)我</button>
      </div>

      
    </div>
    <div class="login_main" id="login_main">
        用戶(hù)名:<input type="text" placeholder="用戶(hù)名" />
        <br>
        密&nbsp;&nbsp;碼: <input type="password" placeholder="密碼">
      </div>
    <div class="hide_main" id="hide_main"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    showDiv1() {
      var d1 = document.getElementById('login_main');
      var d2 = document.getElementById('hide_main');

      d2.style.height = "100vh";
      d2.style.width = "100%";
      d2.style.display = "block";
      d1.style.cssText = 'display:block'
    },

  }
}
</script>
 
<style scoped>
.div1 {
  height: 50px;
  width: 300px;
  border: 1px solid;
  position: fixed;
  top: 0px;
  right: 100px;
  cursor: pointer;
}

.div_header {
  width: 300px;
  height: 50px;
  /* border: 1px solid; */
  line-height: 50px;
  text-align: center;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

}

.login_main {
  width: 500px;
  height: 400px;
  display: none;
  background-color: aquamarine;
  position: fixed;
  top: 100px;
  left: 500px;
  z-index:1050;

}

.hide_main {
  border: solid 3px green;
  /* background: #000; */
  position: fixed;
  display: none;
  top: 0;
  z-index: 1040;
}

.button_main {
  position: fixed;
  width: 100px;
  height: 200px;
  top: 100px;
  left: 50px;
}
</style>

到此這篇關(guān)于Vue懸浮窗和聚焦登錄組件經(jīng)驗(yàn)總結(jié)的文章就介紹到這了,更多相關(guān)vue懸浮窗和聚焦登錄組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: