vue+element-ui实现的密码生成器效果代码
代码语言：html
所属分类：表单美化
代码描述：vue+element-ui实现的密码生成器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background: url(//repo.bfw.wiki/bfwrepo/image/6085fa955c872.png);
background-size: 100% 100%;
background-attachment: fixed;
margin-top: 20px;
}
#app {
width: 40%;
margin: auto;
background: white;
padding-top: 1px;
border-radius: 25px;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
</head>
<body>
<div id="app">
<h3 style="text-align:center">随机密码生成器</h3>
<div style="width: 70%;margin: auto;">
<el-form :model="form" :inline="true" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="包含英文">
<el-checkbox-group v-model="form.english">
<el-checkbox label="大写" name="english"></el-checkbox>
<el-checkbox label="小写" name="english"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="包含数字">
<el-switch v-model="form.number"></el-switch>
</el-form-item>
<el-form-item label="特殊符号">
<el-switch v-model="form.special"></el-switch>
</el-form-item>
<el-form-item label="不重复">
<el-switch v-model="form.no_repeat"></el-switch>
</el-form-item>
<el-form-item label="追加结果">
<el-switch v-model="form.append_pw"></el-switch>
</el-form-item>
<el-form-item label="希望字符">
<el-input v-model.trim="form.hope" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入希望生成的字符"></el-input>
</el-form-item>
<el-form-item label="必须字符">
<el-input v-model.trim="form.must" placeholder="请输入必须包含的字符"></el-input>
</el-form-item>
<el-form-item label="排除字符">
<el-input v-model.trim="form.avoid" placeholder="请输入不能生成的字符"></el-input>
</el-form-item>
<el-form-item label="生成长度">
<el-select v-model="form.password_length" placeholder="活动区域">
<el-option :label="item +' 位'" :value="item" v-for="item in 60" :key="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="生成个数">
<el-select v-model="form.count_num" placeholder="活动区域">
<el-option :label="item +' 个'" :value="item" v-for="item in 100" :key="item"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<el-divider></el-divider>
<div style="margin: 20px 0;"></div>
<div style="width: 80%;margin: auto;">
<el-row>
<el-input ref="input_passwordtext_ref" id="input_passwordtext" type="textarea" :autosize="{ minRows: 2, maxRows: 2}"
placeholder="生成密码输出位置" resize="none" v-model.trim="passwordtext">
</el-input>
</el-row>
</div>
<div style="margin: 20px 0;"></div>
<el-row style="text-align:center;padding-bottom: 20px;">
<el-button type="danger" @click="form=default_form_data;$message.success('成功恢复默认设置');" round>恢复默认</el-button>
<el-button type="info&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0