基于vue的驗(yàn)證碼組件

pekonchan 發(fā)布于2019-08-23 14:52 / 946人閱讀

摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時(shí)候需要一個(gè)驗(yàn)證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個(gè)。

最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時(shí)候需要一個(gè)驗(yàn)證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個(gè)。

演示

分析驗(yàn)證碼組件

分析驗(yàn)證碼功能

隨機(jī)出現(xiàn)的數(shù)字大小寫字母（基礎(chǔ)功能）

不同的數(shù)字或者字母有不同的顏色 (功能優(yōu)化)

不同的數(shù)字或者字母有不同的字體大寫 (功能優(yōu)化)

不同的數(shù)字或者字母有不同的邊距 (功能優(yōu)化)

不同的數(shù)字或者字母有不同的傾斜角度 (功能優(yōu)化)

更多功能優(yōu)化...

分析組件功能

可以設(shè)置生成驗(yàn)證碼的長度 (基本功能)

可以設(shè)置驗(yàn)證碼組件的寬高 (基本功能)

編寫驗(yàn)證碼組件

template

最外層div綁定點(diǎn)擊事件，點(diǎn)擊后刷新驗(yàn)證碼。
span是單個(gè)驗(yàn)證碼的載體，樣式動態(tài)綁定

methods

refreshCode 刷新驗(yàn)證碼的方法
createdCode 生成驗(yàn)證碼的方法
getStyle 為每個(gè)元素生成動態(tài)的樣式

  methods: {
    refreshCode () {
      this.createdCode()
    },
    createdCode () {
      let len = this.length,
        codeList = [],
        chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
        charsLen = chars.length
      // 生成
      for (let i = 0; i < len; i++) {
        let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)), // 隨機(jī)碼
          color: `rgb(${rgb})`, // 隨機(jī)顏色
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`, // 隨機(jī)字號
          padding: `${[Math.floor(Math.random() * 10)]}px`, // 隨機(jī)內(nèi)邊距
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)` // 隨機(jī)旋轉(zhuǎn)角度
        })
      }
      // 指向
      this.codeList = codeList
      // 將當(dāng)前數(shù)據(jù)派發(fā)出去
      this.$emit("update:value", codeList.map(item => item.code).join(""))
    },
    // 動態(tài)綁定樣式
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    }
  }

完整代碼

使用

組件

源碼地址
演示地址模仿思否寫的網(wǎng)站，點(diǎn)注冊可看到驗(yàn)證碼