vue实现一个可自定义密码生成器
代码语言:html
所属分类:其他
代码描述:vue实现一个可自定义密码生成器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { font-size: 15px; font-family: Tahoma,Verdana,Segoe,sans-serif; color: #444; background-color: #fefefe; background-image: linear-gradient(-45deg, #018bfd 0%, #3F51B5 100%); background-repeat: no-repeat; background-size: cover; padding: 0 20px; margin: 0; min-height: 100vh; position: relative; } .header { padding: 2em 0; text-align: center; } .header .title { font-size: 1.2em; font-weight: bold; color: #fff; } .header .title img { width: 12px; margin: 0 2px 2px; vertical-align: bottom; } .wrapper { width: 400px; max-width: 100%; min-height: 400px; margin: 40px auto; position: relative; border: 1px solid #eee; border-radius: 3px; padding: 40px 20px; font-size: 0.85em; -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05); background-color: #f4f7fc; position: relative; transition: all ease-in 0.25s; } h1 { text-align: center; margin: 0 0 40px; } .field-wrap { margin-bottom: 20px; } form { overflow: overlay; margin-top: 30px; } label { display: inline-block; min-width: 20%; } .range-slider_wrapper { position: relative; width: 100%; margin: 10px 0 30px; } .range-slider { -webkit-appearance: none; appearance: none; background: #9fd2fa; width: 100%; border-radius: 3px; vertical-align: bottom; margin: 0; height: 6px; cursor: pointer; transition: all ease-in 0.25s; } .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; position: relative; width: 4px; height: 15px; background-color: #2799f3; } .range-slider::-moz-range-thumb { -moz-appearance: none; appearance: none; border-radius: 0; border: 0; position: relative; width: 4px; height: 15px; background-color: #2799f3; } .range-slider:focus { outline: none; } .range-slider:hover::-webkit-slider-thumb, .range-slider:active::-webkit-slider-thumb { top: 0px; } ::-moz-range-track { background: transparent; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } .range-value { text-transform: capitalize; float: right; vertical-align: bottom; min-width: 30px; display: inline-block; text-align: center; border-radius: 3px; font-size: 0.9em; } .slider-bar { position: absolute; height: 6px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: #3fa4f4; left: 0; bottom: 0; pointer-events: none; } .slider-strength .range-slider { cursor: default; } .slider-strength .slider-bar { border-radius: 3px; transition: all ease-in 0.25s; } .slider-strength .range-slider::-webkit-slider-thumb { background-color: transparent; } .slider-strength .range-slider::-moz-range-thumb { background-color: transparent; } .slider-strength.weak .range-slider { background-color: white; } .slider-strength.weak .slider-bar, .slider-strength.weak .slider-bar:after { background-color: #ff6666; } .slider-strength.average .range-slider { background-color: #ffd699; } .slider-strength.average .slider-bar, .slider-strength.average .slider-bar:after { background-color: #ff9800; } .slider-strength.strong .range-slider { background-color: #d5e9bd; } .slider-strength.strong .slider-bar, .slider-strength.strong .slider-bar:after { background-color: #8BC34A; } .slider-strength.secure .range-slider { background-color: #d5e9bd; } .slider-strength.secure .slider-bar, .slider-strength.secure .slider-bar:after { background-color: #8BC34A; } .password-box { width: 100%; min-height: 80px; margin-bottom: 40px; position: relative; text-align: center; border-radius: 3px; background: #fff; letter-spacing: 2px; transition: all ease-in 0.3s; border: 1px solid #bdcce6; } .password-box .password { width: 70%; padding: 1.5em 1em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); word-wrap: break-word; } .regenerate-password, .copy-password { width: 44px; height: 50%; position: absolute; right: 0; transition: all ease-in 0.25s; } .regenerate-password:hover, .copy-password:hover { opacity: 0.8; } .regenerate-password { top: 0; background-color: #fff; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4LjUzOSAyOS4xMjMiIGhlaWdodD0iMjkuMTIzcHgiIGlkPSJDYXBhXzEiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI4LjUzOSAyOS4xMjMiIHdpZHRoPSIyOC41MzlweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iI2NjYyI+PGc+PHBhdGggZD0iTTcuNjMsNy45MzhjMy4yMTUtMy4yMTUsOC4xMzItMy42NzQsMTEuODQ3LTEuNDAyYy0xLjI1OSwxLjI0Ni0yLjcxMSwyLjcwMi0yLjcxMSwyLjcwMiAgIGMtMS4wMTYsMS4yMTksMC4xMjUsMS45MjIsMC43MDUsMS45MDRsNi43ODktMC4wMDJjMC4zNTgsMCwwLjY1MSwwLjAwMiwwLjY1MSwwLjAwMnMwLjI5NiwwLDAuNjU1LDBoMS4zMTcgICBjMC4zNTksMCwwLjY1MS0wLjI5MywwLjY1Mi0wLjY1M1YxLjE1NGMwLjA0Mi0wLjg1NC0wLjg5Ni0xLjY4Mi0xLjg2NC0wLjcyOWMwLDAtMS42MDIsMS41NjEtMi43MDgsMi42NTcgICBDMTcuMzA1LTEuMDUxLDkuMzMxLTAuNTgzLDQuMjIsNC41MjhDMS4yMzgsNy41MS0wLjE1MywxMS40NjYsMC4wMTQsMTUuMzczaDQuODNDNC42NzMsMTIuNzAzLDUuNTg5LDkuOTc5LDcuNjMsNy45Mzh6Ii8+PHBhdGggZD0iTTIzLjY5NSwxMy43NWMwLjE3MSwyLjY3LTAuNzQ1LDUuMzk0LTIuNzg2LDcuNDM1Yy0zLjIxNiwzLjIxNS04LjEzMSwzLjY3NC0xMS44NDYsMS40MDIgICBjMS4yNTgtMS4yNDYsMi43MS0yLjcwMiwyLjcxLTIuNzAyYzEuMDE2LTEuMjE5LTAuMTI1LTEuOTIyLTAuNzA1LTEuOTAzbC02Ljc4OSwwLjAwMmMtMC4zNTgsMC0wLjY1MS0wLjAwMi0wLjY1MS0wLjAwMiAgIHMtMC4yOTYsMC0wLjY1NSwwSDEuNjU0Yy0wLjM1OSwwLTAuNjUxLDAuMjkzLTAuNjUyLDAuNjUydjkuMzM1Yy0wLjA0MSwwLjg1MywwLjg5NiwxLjY4MSwxLjg2NSwwLjcyOCAgIGMwLDAsMS42MDEtMS41NjEsMi43MDgtMi42NTZjNS42Niw0LjEzNCwxMy42MzMsMy42NjYsMTguNzQzLTEuNDQ1YzIuOTgxLTIuOTgyLDQuMzczLTYuOTM4LDQuMjA3LTEwLjg0NUgyMy42OTV6Ii8+PC9nPjwvc3ZnPg=="); background-size: 40%; background-position: center center; background-repeat: no-repeat; transition: all ease-in 0.25s; cursor: pointer; } .regenerate-password:hover { background-color: #fff; } .copy-password { bottom: 0; background-color: #fff; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiNjY2MiPjxwYXRoIGQ9Ik0xMSwyNGMtMi4yMDYsMC00LTEuNzk0LTQtNFY3SDZDNC44OTUsNyw0LDcuODk1LDQsOXYxNmMwLDEuMTA1LDAuODk1LDIsMiwyaDEzYzEuMTA1LDAsMi0wLjg5NSwyLTJ2LTFIMTF6Ii8+PHBhdGggZD0iTTI1LjcwNyw3Ljc5M2wtNS41LTUuNUMyMC4wMTksMi4xMDUsMTkuNzY1LDIsMTkuNSwySDExQzkuODk1LDIsOSwyLjg5NSw5LDR2MTZjMCwxLjEwNSwwLjg5NSwyLDIsMmgxMyAgYzEuMTA1LDAsMi0wLjg5NSwyLTJWOC41QzI2LDguMjM1LDI1Ljg5NSw3Ljk4MSwyNS43MDcsNy43OTN6IE0yMCw5Yy0wLjU1MiwwLTEtMC40NDgtMS0xVjMuOTA0TDI0LjA5Niw5SDIweiIvPjwvc3ZnPg=="); background-size: 50%; background-position: center center; background-repeat: no-repeat; transition: all ease-in 0.25s; cursor: pointer; } .copy-password:hover { background-color: #fff; } .tooltip { font-size: 0.8em; display: block; text-align: center; padding: 0.5em; border-radius: 3px; position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); } .seperator { width: 100%; height: 3px; background-color: #fff; margin: 60px 0 40px; } /* Footer */ footer { width: 100%; text-align: center; color: #fff; } footer a { color: #fff; } .github-links { margin-bottom: 30px; } textarea, textarea:focus { font-size: 16px; } </style> </head> <body translate="no"> <div id="app"> <section class="wrapper"> <h1>The Password Genie</h1> <div class="password-box"> <span id="password" class="password" v-on:click="copyToClipboard">{{ password }}</span> <span class="regenerate-password" v-on:click="generatePassword"></span> <span class="copy-password" v-on:click="copyToClipboard"></span> <span class="tooltip" v-if="copied">Password copied successfuly!</span> </div> <form @keydown.enter.prevent=""> <div class="field-wrap"> <label>Strength</label> <span class="range-value">{{strength.text}}</span> <div class="range-slider_wrapper slider-strength" v-bind:class="strength..........完整代码请登录后点击上方下载按钮下载查看
网友评论0