vue3生成随机密码的示例代码
实现效果
实现思路
- 完成布局
- 完成生成随机数的方法
- 完成生成随机密码的方法
完成布局
布局直接用element-plus组件库里的el-from+checkbox完成一个简单的表单布局即可。
完成生成随机数的方法
这里我们要四种随机数,大写字母、小写字母、数字、特殊符号。这里实现有两种方式。
第一种直接定义四个字符串,第一个字符串存所有的大写字母、第二个字符串存所有的小写字母、第三个所有的数字、第四个所有的特殊符号。
第二种使用Unicode编码。将随机数对应大写字母、小写字母、数字Unicode编码的范围取出对应的结果。 大写字母是65-90、小写字母是97-122,数字是48-57。
这两种都要使用Math.floor(Math.random()) 获取随机数。我这里用第二种方法
完成生成随机密码的方法
定义一个数组对象。每个对象有funcName:对应随机数方法名,label:左侧标签名,checked:选中状态。循环密码长度,每次增加选择密码种类数量,遍历定义的数组对象,判断是否是选中状态,如果是调用该种类的随机方法,每次将返回的值拼接。循环完随机密码生成成功。
部分代码
<script> import { reactive, toRefs } from "vue"; export default { components: {}, setup() { const state = reactive({ form: { padLength: 8 }, typeList: [ { id: 1, funcName:'IsUpper', label: '包括大写字母', checked: true }, { id: 2, funcName:'IsLower', label: '包括小写字母', checked: true }, { id: 3, funcName:'Isnumber', label: '包括数字', checked: true }, { id: 4, funcName:'IsCharacter', label:'包括符号', checked: true } ], password: '' }); const getRandomLower = () => { return String.fromCharCode(Math.floor(Math.random() * 26) + 97) } const getRandomUpper = () => { return String.fromCharCode(Math.floor(Math.random() * 26) + 65) } const getRandomNumber = () => { return String.fromCharCode(Math.floor(Math.random() * 10) + 48) } const getRandomCharacter = () => { const characters = '!@#$%^&*(){}[]=<>/,.' return characters[Math.floor(Math.random() * characters.length)] } let randomFunc = { IsUpper: getRandomUpper, IsLower: getRandomLower, Isnumber: getRandomNumber, IsCharacter: getRandomCharacter } const getPassword = () => { state.password = '' let typesCount = 0 state.typeList.forEach(v=>{ typesCount += v.checked }) if(typesCount === 0) { state.password = '' } for(let i = 0; i < state.form.padLength; i += typesCount) { state.typeList.forEach(item => { if(item.checked){ state.password += randomFunc[item.funcName]() } }) } } return { ...toRefs(state), getRandomLower, getRandomUpper, getRandomNumber, getRandomCharacter, getPassword }; }, }; </script>
总结
- Math.floor、Math.random生成随机数的使用
- unicode编码、String.fromCharCode方法的使用
到此这篇关于vue3生成随机密码的示例代码的文章就介绍到这了,更多相关vue3生成随机密码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3中关于getCurrentInstance的大坑及解决
这篇文章主要介绍了Vue3中关于getCurrentInstance的大坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04VUE中的export default和export使用方法解析
export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但是,在一个文件或模块中export,import可以有多个,export default却只能有一个。2022-12-12uniapp使用scroll-view下拉刷新无法取消的坑及解决
这篇文章主要介绍了uniapp使用scroll-view下拉刷新无法取消的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05vue项目使用axios发送请求让ajax请求头部携带cookie的方法
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09vue3中defineEmits与defineProps的用法实例
这篇文章主要介绍了vue3中defineEmits/defineProps的用法实例,需要的朋友可以参考下2023-12-12vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法
使用Vue时我们前端如何处理后端返回的文件流,下面这篇文章主要给大家介绍了关于vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论