首页 > 资讯 > 前端开发 > JavaScript >Vue悬浮窗和聚焦登录组件功能实现

618

分享到

Vue悬浮窗和聚焦登录组件功能实现

vue悬浮窗 vue聚焦登录组件 2022-11-13 19:11:17 618人浏览八月长安

摘要

目录前言1 悬浮窗1.1 使用display1.2 使用visibility（☆）2 全屏只能点击登录组件原理代码前言本文整理了实现悬浮窗以及聚焦登录组件的功能。为的是方

前言

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

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

省流：可以只看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)]

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

1.1 使用display

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

把方法加在div1(悬浮窗)、div2（带图片背景的组件）共同的父组件div上，这样可以实现悬浮窗的效果

<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;
  
  line-height: 50px;
  text-align: center;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

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

但是一旦两者之间有了间隙，这样的效果，就不太好了。这要求你必须有一定的手速，才能实现想要的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCerYxpc-1665545585416)(https://gitee.com/you-tanzhi/pic/raw/master/2.gif)]

而且这不符合流行网站的形式，因为在鼠标移出图标的时候，他总是有一个"缓冲"效果，延时片刻，再消失。

这里很容易想到要用动画的形式，但当我添加了动画效果之后，意外的发现动画的效果无效。在CSDN上搜索了一下，发现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;
  
  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;

这样是可以实现的，这里我特意把消失的时间放长了一下

这是正常的效果

<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;
  
  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;
  
  visibility: hidden;
}
</style>

说来很奇怪，我在实战的时候，将位置设置为position:fixed；明明不可以，后来换成absolute就可以了，但是再写这篇博客的时候，换成fixed也是可以的，原来使用的地方，居然也莫名其妙用fixed可以了，有些莫名其妙。

2 全屏只能点击登录组件

原理

有一个空的div（宽高为0），z-index的等级大于所有的标签（除了登录页面），点击登录按钮的时候，设置div的宽高覆盖整个页面，同时显示出登录界面，这时候除了登录页面其他的组件都不能被点击，因为其他的组件都被这个空的div覆盖了。

刚开始的页面是这样的

当点击登录按钮的时候，让用于隐藏组件具有整个屏幕的宽高，从而覆盖怎么屏幕，同时让登录组件展示，因为登录组件的层级大于用于隐藏的组件，所有用于隐藏的组件覆盖了除登录组件的所有的组件，这也就也解释了为什么只有登录组件可以使用。

关闭：想要关闭的时候，在利用一个函数，设置为不显示即可,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>
        密&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;
  
  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;
  
  position: fixed;
  display: none;
  top: 0;
  z-index: 1040;
}

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

到此这篇关于Vue悬浮窗和聚焦登录组件经验总结的文章就介绍到这了,更多相关vue悬浮窗和聚焦登录组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue悬浮窗和聚焦登录组件功能实现

本文链接: https://www.lsjlt.com/news/170665.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue悬浮窗和聚焦登录组件功能实现

目录前言1 悬浮窗1.1 使用display1.2 使用visibility（☆）2 全屏只能点击登录组件原理代码前言本文整理了实现悬浮窗以及聚焦登录组件的功能。为的是方...

99+

2022-11-13

vue悬浮窗 vue聚焦登录组件
Android WindowManger实现桌面悬浮窗功能

目录效果图使用WindowManager实现分析问题参考如果想实现一个在桌面显示的悬浮窗，用Dialog、PopupWindow、Toast等已经不能实现了，他们基本都是在Activ...

99+

2023-05-18

Android桌面悬浮窗 Android WindowManger悬浮窗
Vue如何实现悬浮框自由移动+录音功能

本篇内容介绍了“Vue如何实现悬浮框自由移动+录音功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如下主要功能一个漂浮的球，在全屏幕中...

99+

2023-07-02
JS如何实现百度地图搜索悬浮窗功能

这篇文章将为大家详细讲解有关JS如何实现百度地图搜索悬浮窗功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。这个需求的效果类似下面的截图，主要还是利用百度地图中自定义控件...

99+

2024-04-02
vue实现带自动吸附功能的悬浮球

本文实例为大家分享了vue实现带自动吸附功能的悬浮球，供大家参考，具体内容如下封装的组件代码，可以引到页面直接使用 <template> <div ...

99+

2024-04-02
Vue登录功能实现

目录写在前面登录概述登录业务流程登录业务的相关技术点登录—token原理分析登录功能实现登录表单的布局登录表单的数据绑定登录表单的验证规则登录表单的重置登录预验证登录组件配置弹窗提示...

99+

2024-04-02
怎么使用electron实现百度网盘悬浮窗口功能

这篇文章将为大家详细讲解有关怎么使用electron实现百度网盘悬浮窗口功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。相关依赖里面使用了vuex vue vue-ro...

99+

2024-04-02
Vue实现悬浮框自由移动+录音功能的示例代码

目录效果如下主要功能实现1.封装第一个漂浮组件FloatBall.vue2.封装第二个组件录音组件Audio.vue3.recorder.js效果如下主要功能 1.一个漂浮的球...

99+

2024-04-02
springboot+vue实现登录功能

本文实例为大家分享了springboot+vue实现登录功能的具体代码，供大家参考，具体内容如下目录结构前端端口：8080 后端端口：8900 login.vue <...

99+

2024-04-02
Vue+Vux实现登录功能

一、准备工作请参照 Vue前端框架搭建使用模板创建框架。二、创建登录页 1.main.js 中引入全局 ToastPlugin、LoadingPlugin 插件 import ...

99+

2024-04-02
vue+springboot实现登录功能

本文实例为大家分享了vue+springboot实现登录功能的具体代码，供大家参考，具体内容如下 1. 登录功能的实现实现提交表单的代码如下： async submitForm...

99+

2024-04-02
怎么使用Vue实现鼠标悬浮更换图片功能

今天小编给大家分享一下怎么使用Vue实现鼠标悬浮更换图片功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先将所有的选中后...

99+

2023-07-04
vue+springboot+shiro+jwt实现登录功能

目录1.导入依赖2.JWTToken 替换 Shiro 原生 Token3.JWT token 工具类，提供JWT生成、校验、获取token存储的信息4.JWTFilter请求拦截5...

99+

2024-04-02
vue+tp5实现简单登录功能

本文实例为大家分享了vue+tp5实现简单登录功能的具体代码，供大家参考，具体内容如下准备工作：安装vue-cli,element-ui，package.json中如图所示，看着安...

99+

2024-04-02
springboot+vue如何实现登录功能

小编给大家分享一下springboot+vue如何实现登录功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！目录结构前端端口：8080后端端口：8900login.vue<template> &nbs...

99+

2023-06-15
ECSHOP中如何实现ajax弹窗登录功能

这篇文章将为大家详细讲解有关ECSHOP中如何实现ajax弹窗登录功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在ECSHOP中的user.PHP中有处理用户登录的请...

99+

2024-04-02
如何用vue代码实现表格缩略图悬浮放大功能

这篇文章主要介绍了如何用vue代码实现表格缩略图悬浮放大功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何用vue代码实现表格缩略图悬浮放大功能文章都会有所收获，下面我们一起来看看吧。element-ui界...

99+

2023-07-04
vue中如何实现element-ui表格缩略图悬浮放大功能

这篇文章给大家分享的是有关vue中如何实现element-ui表格缩略图悬浮放大功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。element-ui界面非常简洁和美观，提供的组...

99+

2024-04-02
Vue怎么实现微信聊天窗口展示组件功能

这篇文章主要介绍“Vue怎么实现微信聊天窗口展示组件功能”，在日常操作中，相信很多人在Vue怎么实现微信聊天窗口展示组件功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么实现微信聊天窗口展示组件功能...

99+

2023-07-04
Vue PC前端扫码登录功能实现

目录需求描述思路解析PC 扫码原理？前端功能实现如何生成二维码图片？如何控制二维码的时效性？前端如何获取服务器二维码的状态？参考资料：总结需求描述目前大多数PC端应用都有配套的移动...

99+

2022-12-29

vue扫码登录功能 vue登录功能 vue 扫码登录