字符明码英文免费素材下载 vue随秘密码天生器

vue随秘密码天生器殊效源码是一款基于VUE + JS + element-ui制造网页版随秘密码天生器对象代码。蕴含英文、数字、非凡符号、字符、天生长度、天生个数等抉择性能。

1. 引入CSS

<link rel="stylesheet" href="../css/random_pw.css">
<link rel="stylesheet" href="../external/element-ui/css/index.css">

2. 引入JS

<script src="../external/element-ui/js/vue.js"></script>
<script src="../external/element-ui/js/index.js"></script>
<script src="../js/random_pw.js"></script>

3. HTML代码

<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>

倡议实用阅读器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 没有支持Safari、IE8及如下阅读器。