Vue懸浮窗和聚焦登錄組件功能實現(xiàn)
更新時間：2022年11月03日 10:35:49 作者：游坦之
這篇文章主要介紹了Vue懸浮窗和聚焦登錄組件經(jīng)驗總結,? 本文整理了實現(xiàn)懸浮窗以及聚焦登錄組件的功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
? 本文整理了實現(xiàn)懸浮窗以及聚焦登錄組件的功能。
? 為的是方便大家和自己的學習。
? 省流：可以只看1.2 和 2的代碼即可
1 懸浮窗
![?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QHAOwAni-1665545585406)(https://gitee.com/you-tanzhi/pic/raw/master/%E6%9F%90%E5%A5%87%E8%89%BA.gif)]](http://img.jbzj.com/file_images/article/202211/20221103103507106.gif)
現(xiàn)在各大流行視頻網(wǎng)站的平臺都在使用這種懸浮顯示的效果，我就想這種東西是怎樣搞出來的呢！幾經(jīng)嘗試，終于找到了一個實現(xiàn)方式，記錄一下自己的開發(fā)歷程，方便以后的使用，也為了各C友提供便利。
1.1 使用display
嘗試用display實現(xiàn)，利用display:none和block的切換，來實現(xiàn)懸浮窗的顯示/關閉。
把方法加在div1(懸浮窗)、div2（帶圖片背景的組件）共同的父組件div上，這樣可以實現(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>
但是一旦兩者之間有了間隙，這樣的效果，就不太好了。這要求你必須有一定的手速，才能實現(xiàn)想要的效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OCerYxpc-1665545585416)(https://gitee.com/you-tanzhi/pic/raw/master/2.gif)]](http://img.jbzj.com/file_images/article/202211/20221103103507108.gif)
而且這不符合流行網(wǎng)站的形式，因為在鼠標移出圖標的時候，他總是有一個"緩沖"效果，延時片刻，再消失。
這里很容易想到要用動畫的形式，但當我添加了動畫效果之后，意外的發(fā)現(xiàn)動畫的效果無效。在CSDN上搜索了一下，發(fā)現(xiàn)display是不能和動畫一塊使用的，否則就會無效。
所以即使這里寫了動畫，也是不生效的
利用動畫解決不生效
<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;
這樣是可以實現(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 = '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>
說來很奇怪，我在實戰(zhàn)的時候，將位置設置為position:fixed；明明不可以，后來換成absolute就可以了，但是再寫這篇博客的時候，換成fixed也是可以的，原來使用的地方，居然也莫名其妙用fixed可以了，有些莫名其妙。
2 全屏只能點擊登錄組件
原理
有一個空的div（寬高為0），z-index的等級大于所有的標簽（除了登錄頁面），點擊登錄按鈕的時候，設置div的寬高覆蓋整個頁面，同時顯示出登錄界面，這時候除了登錄頁面其他的組件都不能被點擊，因為其他的組件都被這個空的div覆蓋了。
剛開始的頁面是這樣的
當點擊登錄按鈕的時候，讓用于隱藏組件具有整個屏幕的寬高，從而覆蓋怎么屏幕，同時讓登錄組件展示，因為登錄組件的層級大于用于隱藏的組件，所有用于隱藏的組件覆蓋了除登錄組件的所有的組件，這也就也解釋了為什么只有登錄組件可以使用。
關閉：想要關閉的時候，在利用一個函數(shù)，設置為不顯示即可,display:none;
代碼
<template>
<div>
<div class="div1">
<div class="div_header" @click="showDiv1()">
登錄/注冊
</div>
<div class="button_main">
<button style="cursor: pointer;">點我</button>
<button style=" cursor: pointer;">點我</button>
</div>
</div>
<div class="login_main" id="login_main">
用戶名:<input type="text" placeholder="用戶名" />
<br>
密 碼: <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>
到此這篇關于Vue懸浮窗和聚焦登錄組件經(jīng)驗總結的文章就介紹到這了,更多相關vue懸浮窗和聚焦登錄組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3中的路由傳參有兩種方式:query和params,下面這篇文章主要給大家介紹了關于如何在vue3+ts項目中使用query和params傳參的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
在vue框架下使用指令vue add element安裝element報錯問題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
本文主要介紹了Vue3管理后臺項目使用高德地圖選點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了Vue?插件及瀏覽器本地存儲，插件通常用來為Vue添加全局功能，包含install方法的一個對象。更多相關介紹，需要的小伙伴可以參考下面文章內(nèi)容2022-05-05
前段時間一直在學習vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關于vue項目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue如何實現(xiàn)上傳圖片和顯示圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue和webpack打包項目相對路徑修改的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
我們項目開發(fā)中經(jīng)常遇到樣式里面會使用less和scss寫法, less,scss和stylus都是css的預處理器,這篇文章主要給大家介紹了關于Vue3中引入SCSS和LESS依賴的基本步驟和注意事項,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12