加入“GenRandomStr”工具

This commit is contained in:
2021-05-04 22:03:21 +08:00
parent 72aeb56fee
commit 58a8c1ea7a
2 changed files with 167 additions and 1 deletions

View File

@@ -43,7 +43,7 @@ let navTools = {
title: '生成随机字符串',
desc: '生成随机组合的字符串,可用于密码',
component: 'GenRandomStr',
enabled: false
enabled: true
}
}
},

View File

@@ -0,0 +1,166 @@
<template>
<div class="tool-elem">
<div class="info">
<div class="title">配置选项 &amp; 结果</div>
<div class="content">
<el-form label-width="6rem">
<!-- 字符串长度 -->
<el-form-item label="字符串长度">
<el-input v-model.number="info.strLength" type="number" min="1" max="1024"></el-input>
</el-form-item>
<!-- 字符串格式 -->
<el-form-item label="字符串格式">
<el-checkbox v-model="info.option.hasNum"
name="option" label="hasNum"
>数字</el-checkbox>
<el-checkbox v-model="info.option.hasChar"
name="option" label="hasChar"
>字母</el-checkbox>
<el-checkbox v-model="info.option.hasSymbol"
name="option" label="hasSymbol"
>其他符号</el-checkbox>
<el-checkbox v-model="info.option.caseSensitive"
name="option" label="caseSensitive"
>大小写</el-checkbox>
<el-checkbox v-model="info.option.lowerCase"
name="option" label="lowerCase"
>全小写需要选择字母且不选择大小写</el-checkbox>
</el-form-item>
<!-- 生成结果 -->
<el-form-item label="生成结果">
<el-input v-model="info.result" type="text" readonly></el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="action">
<div class="title">操作</div>
<div class="content">
<el-button type="primary" @click="btnGenerate()">生成</el-button>
</div>
</div>
<div class="reference">
<div class="title">参考资料</div>
<div class="content">
<el-link href="https://www.cnblogs.com/hankuksui/p/9892729.html" target="_blank" type="primary">博客园 - hankuksui</el-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'GenRandomStr',
data() {
return {
info: {
strLength: 8,
option: {
caseSensitive: false,
hasNum: false,
hasChar: false,
hasSymbol: false,
lowerCase: false
},
result: ''
}
}
},
methods: {
/**
* 生成
*/
btnGenerate() {
var len = this.info.strLength;
var op = this.info.option;
var r = this.genRandomStr(len, op.hasNum, op.hasChar, op.hasSymbol, op.caseSensitive, op.lowerCase);
this.info.result = r;
},
/**
* 生成随机字符串
*
* @param {number} strLength 长度
* @param {boolean} hasNum 是否包含数字
* @param {boolean} hasChar 是否包含字母
* @param {boolean} hasSymbol 是否包含其他符号
* @param {boolean} caseSensitive 是否包含大小写
* @param {boolean} lowerCase 是否全小写(当 caseSensitive 为 false 时起作用)
*
* @returns {string} 生成的字符串
*/
genRandomStr(strLength, hasNum, hasChar, hasSymbol, caseSensitive, lowerCase) {
var result = '请选中数字、字母或其他符号的其中一项!';
if (hasNum == false && hasChar == false && hasSymbol == false) {
return result;
}
result = '';
for (var i = strLength; i > 0; i--) {
let num = Math.floor((Math.random() * 94) + 33);
let flag = ((
(hasNum == false) && ((num >= 48) && (num <= 57))
) || (
(hasChar == false) && ((
(num >= 65) && (num <= 90)
) || (
(num >= 97) && (num <= 122)
))
) || (
(hasSymbol == false) && ((
(num >= 33) && (num <= 47)
) || (
(num >= 58) && (num <= 64)
) || (
(num >= 91) && (num <= 96)
) || (
(num >= 123) && (num <= 127)
)
)));
if (flag) {
i++;
continue;
}
/**
* | CharCode | 符号 |
* | :--------- | :----- |
* | 033 -> 047 | ! -> / |
* | 048 -> 057 | 0 -> 9 |
* | 058 -> 064 | : -> @ |
* | 065 -> 090 | A -> Z |
* | 091 -> 096 | [ -> ` |
* | 097 -> 122 | a -> z |
* | 123 -> 127 | { -> |
*/
result += String.fromCharCode(num);
}
if (caseSensitive == false) {
result = (lowerCase ? result.toLocaleLowerCase() : result.toUpperCase());
}
return result;
}
},
}
</script>
<style lang="less" scoped>
.tool-elem {
.content {
max-width: 30rem;
}
}
</style>