快捷導(dǎo)航

vue3生成隨機(jī)密碼的示例代碼

更新時(shí)間：2022年06月20日 10:22:58 作者：Ayanokouji

本文主要介紹了vue3生成隨機(jī)密碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)現(xiàn)效果

實(shí)現(xiàn)思路

完成布局
完成生成隨機(jī)數(shù)的方法
完成生成隨機(jī)密碼的方法

完成布局

布局直接用element-plus組件庫里的el-from+checkbox完成一個(gè)簡單的表單布局即可。

完成生成隨機(jī)數(shù)的方法

這里我們要四種隨機(jī)數(shù)，大寫字母、小寫字母、數(shù)字、特殊符號。這里實(shí)現(xiàn)有兩種方式。

第一種直接定義四個(gè)字符串，第一個(gè)字符串存所有的大寫字母、第二個(gè)字符串存所有的小寫字母、第三個(gè)所有的數(shù)字、第四個(gè)所有的特殊符號。

第二種使用Unicode編碼。將隨機(jī)數(shù)對應(yīng)大寫字母、小寫字母、數(shù)字Unicode編碼的范圍取出對應(yīng)的結(jié)果。大寫字母是65-90、小寫字母是97-122，數(shù)字是48-57。

這兩種都要使用Math.floor(Math.random()) 獲取隨機(jī)數(shù)。我這里用第二種方法

完成生成隨機(jī)密碼的方法

定義一個(gè)數(shù)組對象。每個(gè)對象有funcName：對應(yīng)隨機(jī)數(shù)方法名，label：左側(cè)標(biāo)簽名，checked：選中狀態(tài)。循環(huán)密碼長度，每次增加選擇密碼種類數(shù)量，遍歷定義的數(shù)組對象，判斷是否是選中狀態(tài)，如果是調(diào)用該種類的隨機(jī)方法，每次將返回的值拼接。循環(huán)完隨機(jī)密碼生成成功。

部分代碼

<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: '包括數(shù)字',
        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>