前端|vue锁屏功能

  1. 创建组件文件数据:前端|vue锁屏功能
    文章图片
1.1 lockscreen.vue文件内容

1.2 styles中unlock.scss文件内容
.unlock-body-con { position: absolute; width: 400px; height: 100px; left: 50%; top: 50%; margin-left: -200px; margin-top: -200px; transform-origin: center center; z-index: 10000; .unlock-avator-con { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 2px solid white; cursor: pointer; transition: all 0.5s; z-index: 12; box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3); .unlock-avator-img { width: 100%; height: 100%; display: block; z-index: 7; } .unlock-avator-cover { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 11600; position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.2s; color: white; span { display: block; margin: 20px auto 5px; text-align: center; } p { text-align: center; font-size: 16px; font-weight: 500; } } &:hover .unlock-avator-cover { opacity: 1; transition: opacity 0.2s; } } .unlock-avator-under-back { position: absolute; left: 50%; top: 50%; transform: translate(-45px, -50%); box-sizing: border-box; width: 100px; height: 100px; border-radius: 50%; background:rgb(16, 22, 44); ; transition: all 0.5s; z-index: 5; } .unlock-input-con { position: absolute; height: 70px; width: 350px; top: 15px; right: 0px; .unlock-input-overflow-con { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; .unlock-overflow-body { position: absolute; top: 0; right: 0; width: 100%; height: 100%; transition: all 0.5s ease 0.5s; .unlock-input { float: left; display: block; box-sizing: content-box; height: 22px; width: 230px; font-size: 18px; outline: none; padding: 11px 10px 11px 30px; border: 2px solid #e2ddde; margin-top: 10px; } .unlock-btn { float: left; display: block; font-size: 20px; padding: 7px 30px; cursor: pointer; border-radius: 0 25px 25px 0; border: 2px solid #e2ddde; border-left: none; background: #2d8cf0; outline: none; transition: all 0.2s; margin-top: 10px; &:hover { background: #5cadff; box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.2); } } .click-unlock-btn { background: #2b85e4 !important; } } } } .unlock-locking-tip-con { width: 100px; height: 30px; text-align: center; position: absolute; left: 50%; margin-left: -50px; bottom: -50px; color: white; font-size: 18px; } } @keyframes unlock-in { 0% { transform: scale(0); } 80% { transform: scale(0); } 88% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes unlock-out { 0% { transform: scale(1); } 60% { transform: scale(1.2); } 100% { transform: scale(0); } } .show-unlock-enter-active { animation: unlock-in 1.4s ease; } .show-unlock-leave-to { opacity: 0; } .show-unlock-leave-active { transition: opacity 0.2s; } .unlock-con { width: 100%; height: 100%; }

1.3 components中locking-page.vue文件内容

【前端|vue锁屏功能】1.4 components中unlock.vue文件内容
@import "../styles/unlock.scss"; .unlock-btn { height: 50px; }

2. 在html中引入内容

3. js引入
import lockScreen from '@/components/lockscreen/lockscreen.vue';

components: { lockScreen },

4. 锁屏点击触发事件
//锁屏 lockScreenAction(){ this.$refs.lockScreen.lockScreen() },

效果图:
前端|vue锁屏功能
文章图片

前端|vue锁屏功能
文章图片


    推荐阅读