vue+elementui实现一个随机密码生成器代码
代码语言:html
所属分类:其他
代码描述:vue+elementui实现一个随机密码生成器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: url(//repo.bfw.wiki/bfwrepo/image/61dec27e73ccc.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" @click="passwordtext = ''; $message.success('成功清空');" round>清空密码</el-button> <el-button type="primary" @click="copy" round>复制文本</el-button> <el-button type="success" @click="generate_pw" round>生成密码</el-button> </el-row> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script> <script> var Main = { data() { return { form: { english: ['大写', '小写'], number: true, special: true, no_repeat: false, append_pw: false, hope: '', must: '', avoid: '', password_length: 32, count_num: 2 }, default_form_data: { english: ['大写', '小写'], number: true, special: true, no_repeat: false, append_pw: false, hope: '', must: '', avoid: '', password_length: 32, count_num: 2 }, letter_capital_array: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ], letter_lowercase_array: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ], number_array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'], special_char_array: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '?', '_', '-'], // ↓用户输入的字符串 hope_char_array: [], must_char_array: [], //最终生成的密码 passwordtext: '' }; }, watch: { "form.hope": "hope_replace_avoid_str", "form.must": "must_replace_avoid_str", "form.avoid": ["hope_rep.........完整代码请登录后点击上方下载按钮下载查看
网友评论0