如何将Vue悬浮窗与聚焦登录组件功能巧妙融合？

本文共计1739个文字，预计阅读时间需要7分钟。

目录+前言+1 悬浮窗+1.1 使用display+1.2 使用visibility（隐藏）+2 全屏只能点击登录组件+原理+代码+前言+本文整体理解了实现悬浮窗以及聚焦登录组件的功能。+为的是方便大家学习和实践。

目录

• 前言
• 1 悬浮窗
• 1.1 使用display
• 1.2 使用visibility（☆）
• 2 全屏只能点击登录组件
• 原理
• 代码

前言

​ 本文整理了实现悬浮窗以及聚焦登录组件的功能。

​ 为的是方便大家和自己的学习。

​ 省流：可以只看1.2 和 2的代码即可

1 悬浮窗

现在各大流行视频网站的平台都在使用这种悬浮显示的效果，我就想这种东西是怎样搞出来的呢！几经尝试，终于找到了一个实现方式，记录一下自己的开发历程，方便以后的使用，也为了各C友提供便利。

1.1 使用display

尝试用display实现，利用display:none和block的切换，来实现悬浮窗的显示/关闭。