vue+elementui实现一个随机密码生成器代码

代码语言:html

所属分类:其他

代码描述:vue+elementui实现一个随机密码生成器代码

代码标签: 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-for.........完整代码请登录后点击上方下载按钮下载查看

网友评论0