VUE实现吸附侧边栏效果

默认初始状态：按钮吸附侧边栏 隐藏效果

 鼠标移入：显示按钮

 点击按钮执行相应操作：显示测试区域

鼠标移出按钮：恢复初始按钮吸附状态

完整代码

<template> <div class="home" id="home"> <div :class="{'hand':true,'fold':true,'fode2-choose':foldClass}" @click="show" @mouseover="mouseOver" @mouseleave="leave"><i :class="icon"></i></div> <transition name="el-zoom-in-top"> <div v-show="icon!='el-icon-arrow-up'" class="transition-box">测试</div> </transition> </div> </template> <script> export default{ name:"Home", data () { return { icon:'el-icon-arrow-up', foldClass:false, } }, methods:{ show(){ this.icon=this.icon=='el-icon-arrow-up'?'el-icon-arrow-down':'el-icon-arrow-up' }, mouseOver(){ this.foldClass=true }, leave(){ this.foldClass=false } } } </script> <style scoped> #home{ width:100% ; height: 100%; } #cesiumContainer{ position: relative; } #home >>> .fold{ height: 18px; width: 40px; background-color: rgba(90,90,90,.85); position: absolute; top:-18px; left: 50%; z-index: 100; border: 1px solid #DCDFE6; border-radius: 3px; border-color: #; color: #fff; text-align: center; line-height: 18px; font-size: 12px; } #home >>> .fold:hover { border-color: #a6a9ad; } #home >>> .fode2-choose{ top:0; } </style> <style> .transition-box { width: 100%; height: 100%; background-color: #409EFF; text-align: center; color: #fff; position: absolute; top: 0; left: 0; } </style>

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11190.html