Vue实现靠边悬浮球(PC端)
我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种。
实现是这个样子:
手边没有球形图。所以用的毕设PPT扣的 校~,今年毕业,功能这里演示的为单机悬浮球注销登录
嗯,具体代码:
<div
:class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']"
@mouseleave="uploadleave"
@mouseenter="uploadenter"
v-if="uploadShow"
@click.stop="logout"
>
<img :src="require('@/assets/1.png')"/>
</div>
data
uploadShow: false,
uploadflag: true,
js方法
uploadenter() {
this.uploadflag = true;
},
uploadleave() {
this.uploadflag = false; },
uploadanimated() {
setTimeout(() => {
this.uploadShow = true;
setTimeout(() => {
this.uploadleave();
}, 1000);
}, 1000);
},
css
.off{
-webkit-animation:1s seconddiv;
background: transparent;
} @keyframes seconddiv{
0% {transform: scale(1.4,1.4);}
10% {transform: scale(1,1);}
25% {transform: scale(1.2,1.2);}
50% {transform: scale(1,1);}
70% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);}
}
.meun-switch {
position: fixed;
top: 90px;
left: 0px;
z-index:;
cursor: pointer;
width: 150px;
height: 150px;
padding: 5px;
transition: all 0.25s; &.leave {
left: -65px;
} &.active {
left:;
} &:hover {
transform: scale(1.02);
} img {
width: 120px;
height: 120px;
}
}
页面代码:
<template>
<div id="app">
<transition name="el-zoom-in-center">
<div v-show="show3">
<div class="sidebar">
<!-- <card></card>-->
<list></list>
<div
:class="['meun-switch animated flex-row ys-float-btn',uploadflag ? 'active rubberBand off' : 'leave jello']"
@mouseleave="uploadleave"
@mouseenter="uploadenter"
v-if="uploadShow"
@click.stop="logout"
>
<img :src="require('@/assets/logo.png')"/>
</div>
</div>
<div class="main">
<message></message>
<usertext></usertext>
</div>
</div>
</transition> </div>
</template> <script> import list from '../../components/chat/list.vue'
import message from '../../components/chat/message.vue'
import usertext from '../../components/chat/usertext.vue'
import screenfull from 'screenfull' export default {
name: 'pageChat',
data() {
return {
//默认不全屏
isFullscreen: false,
show3: false,
uploadShow: false,
uploadflag: true,
}
},
created() { },
mounted: function () {
this.uploadanimated();
this.$store.dispatch('connect');
this.inintview();
},
methods: {
/*注销*/
logout () {
this.$confirm('此操作注销登录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.getRequest('/logout');
window.sessionStorage.removeItem("user");
// 清除缓存
this.$router.replace("/");
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
inintview() {
setTimeout(() => {
this.show3 = true;
}, 1000)
},
uploadenter() {
this.uploadflag = true;
},
uploadleave() {
this.uploadflag = false; },
uploadanimated() {
setTimeout(() => {
this.uploadShow = true;
setTimeout(() => {
this.uploadleave();
}, 1000);
}, 1000);
},
click() {
// 如果不允许进入全屏,发出不允许提示 浏览器不能全屏
if (!screenfull.enabled) {
this.$message({
message: '浏览器不能全屏',
type: 'warning'
})
return false
}
screenfull.toggle()
this.$message({
message: '全屏啦',
type: 'success'
})
} },
components: {
list,
message,
usertext
}
}
</script> <style lang="scss" scoped>
.off{
-webkit-animation:1s seconddiv;
background: transparent;
} @keyframes seconddiv{
0% {transform: scale(1.4,1.4);}
10% {transform: scale(1,1);}
25% {transform: scale(1.2,1.2);}
50% {transform: scale(1,1);}
70% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);}
}
.meun-switch {
position: fixed;
top: 90px;
left: 0px;
z-index: 2001;
cursor: pointer;
width: 150px;
height: 150px;
padding: 5px;
transition: all 0.25s; &.leave {
left: -65px;
} &.active {
left: 0;
} &:hover {
transform: scale(1.02);
} img {
width: 120px;
height: 120px;
}
} #particles-js {
width: 100%;
height: calc(100% - 100px);
position: absolute;
overflow: hidden;
} #app {
/*背景裁剪在背景边框内部*/
background-clip: padding-box;
/*// 边框样式*/
border: 1px solid #eaeaea;
/*// 边框阴影*/
box-shadow: 0 0 25px #cac6c6;
margin: 20px auto;
width: 1100px;
height: 100%;
overflow: hidden;
border-radius: 10px;
overflow-x: hidden; .sidebar,
.main {
height: 100%;
} .sidebar {
float: left;
color: #f4f4f4;
background-color: transparent;
width: 300px;
height: 100%
} .main {
position: relative;
overflow: hidden;
background-color: transparent;
}
}
</style>
Vue实现靠边悬浮球(PC端)的更多相关文章
- vue搭配的UI框架 pc端 + 移动端
PC桌面端UI框架: 1,iview (最新,用户评分高功能多炫酷 解决和避免了其他UI框架出现的一些小问题) 2, bootstrap (使用用户最多样式死板没特色) 3,Element ...
- 【vue】vue +element 搭建项目,要求既支持pc端又支持移动端
使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.client ...
- vue pc端网站项目开发坑点与难度记录
背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非 ...
- vue 项目 切换手机端和pc端。同一个项目,配置不同的路由
1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator. ...
- Vue PC端框架
Vue PC端框架 1. Element 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/ele ...
- 使用vue实现简单键盘,支持移动端和pc端
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <t ...
- vue实现PC端分辨率适配
lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖 首先需要安装 vue-cli 脚手架,这里我安装 ...
- 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示,但是在微信pc端上显示空白
原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
随机推荐
- 软件包管理rpm和yum
rpm的使用: 安装的包相关包信息会保存在/var/lib/rpm目录下的文件中 安装参数: -i install安装 -v 显示详细信息 -h 打印####号 -V 校验软件包,会到/var/lib ...
- 小程序—银行、券商们下一代APP的进阶方向
传统金融机构们的App——尤其以手机银行.手机证券为最,发展到今天,已经产生一系列的问题:从用户角度看,体验普遍不好.高度同质化:从业务运营角度看,几乎没有什么“运营”的抓手:从IT角度看,投入产出比 ...
- Python - Python的基础知识结构,学习方法、难点和重点
[原创]转载请注明作者Johnthegreat和本文链接. 相信大家都知道,Python很容易学,有编程基础的人,最多两个星期就可以很愉快的撸Python的代码了,那么具体涉及的知识有哪些,下面为大家 ...
- 详解 Set接口
(请关注 本人"集合"总集篇博文--<详解 Collection接口>) 在Collection接口的子接口中,最重要的,也是最常见的两个-- List接口 和 Set ...
- secureCRT常用操作
直接在网上搜索下载 连接 选择协议 Telnet Telnet连接时,进入输入密码 串口 连接串口后,查看本机连接的串口号 新建的时候,选择相同的串口号 RTS需要勾选掉 外观字体 选项 => ...
- 3. string
let str = "my string"; 1. str.startsWith('my'); //true2.str.endsWith('my'); //false3.str.i ...
- 云开发网站托管悄悄上线了 Next.js 的支持
我们知道部署web应用程序的最佳方式是作为静态HTML应用程序,因为他对搜索引擎很友好,速度快等等,这对我们写个人博客这样的小型网站无异于非常nice.如果你的应用可以作为静态HTML,那么可以试试N ...
- Kylin on Parquet 介绍和快速上手
Apache Kylin on Apache HBase 方案经过长时间的发展已经比较成熟,但是存在着一定的局限性.Kylin 查询节点当前主要的计算是在单机节点完成的,存在单点问题.而且由于 HBa ...
- php正则匹配到字符串里面的a标签
$cont = preg_replace('/<a href=\"(.*?)\".*?>(.*?)<\/a>/i','',$cont);
- String、String[]、ArrayList<String>之间的转换
1. ArrayList<String> 转换为 String[]: ArrayList<String> list = new ArrayList<>(); li ...