加入“GenRandomStr”工具
This commit is contained in:
@@ -43,7 +43,7 @@ let navTools = {
|
||||
title: '生成随机字符串',
|
||||
desc: '生成随机组合的字符串,可用于密码',
|
||||
component: 'GenRandomStr',
|
||||
enabled: false
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
166
src/components/tools/GenRandomStr.vue
Normal file
166
src/components/tools/GenRandomStr.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="tool-elem">
|
||||
|
||||
<div class="info">
|
||||
<div class="title">配置选项 & 结果</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>
|
Reference in New Issue
Block a user