vue+element-ui实现的密码生成器效果代码-html代码-BFW代码库

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