vue3生成随机密码的示例代码

 更新时间:2022年06月20日 10:22:58   作者:Ayanokouji  
本文主要介绍了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生成随机密码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue + gojs 实现拖拽流程图效果

    vue + gojs 实现拖拽流程图效果

    最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发,这篇文章主要介绍了vue + gojs 实现拖拽流程图,需要的朋友可以参考下
    2023-03-03
  • vue-axios的使用以及axios请求赋值为空的问题

    vue-axios的使用以及axios请求赋值为空的问题

    这篇文章主要介绍了vue-axios的使用以及axios请求赋值为空的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue 实现setInterval 创建和销毁实例

    vue 实现setInterval 创建和销毁实例

    这篇文章主要介绍了vue 实现setInterval 创建和销毁实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue同一个浏览器登录不同账号数据覆盖问题解决方案

    vue同一个浏览器登录不同账号数据覆盖问题解决方案

    同一个浏览器登录不同账号session一致,这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉,这个问题很常见,当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户,对vue同一个浏览器登录不同账号数据覆盖问题解决方法感兴趣的朋友一起看看吧
    2024-01-01
  • 超实用vue中组件间通信的6种方式(最新推荐)

    超实用vue中组件间通信的6种方式(最新推荐)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要介绍了vue中组件间通信的6种方式,需要的朋友可以参考下
    2022-11-11
  • Vue.js 递归组件实现树形菜单(实例分享)

    Vue.js 递归组件实现树形菜单(实例分享)

    本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧
    2016-12-12
  • Vue自动生成组件示例总结

    Vue自动生成组件示例总结

    在Vue中,我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称,这个插件使得在大型代码库中找到和管理组件更加容易和直观,这篇文章主要介绍了Vue自动生成组件示例总结,需要的朋友可以参考下
    2023-12-12
  • 详解element-ui设置下拉选择切换必填和非必填

    详解element-ui设置下拉选择切换必填和非必填

    这篇文章主要介绍了详解element-ui设置下拉选择切换必填和非必填,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue中的循环对象属性和属性值用法

    vue中的循环对象属性和属性值用法

    这篇文章主要介绍了vue中的循环对象属性和属性值用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • element-ui el-dialog嵌套table组件,ref问题及解决

    element-ui el-dialog嵌套table组件,ref问题及解决

    这篇文章主要介绍了element-ui el-dialog嵌套table组件,ref问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论