Vue-based verification code components sample code

Recently writes a page yourself, you need a verification code component when you think about your forum, and then write log in to the UI. Go to the search. I didn’t find anything right, and most of them were based on the backend, so I wrote one.

基于vue的验证码组件的示例代码 Analysis Verification Code Component

Analysis Verification Code Function

Randomly appeared digital uppercase letters (basic functions)

Different colors (functional optimization)
  • different numbers or letters have different Font uppercase (function optimization)
  • Different numbers or alphabets (functional optimization)
  • Different numbers or letters have different tilt angles (function optimization)
  • More Function Optimization …
  • can be set to generate the length (basic function)

can be set Verification code components (basic function)

  • Writing verification code components
  • Template

outermost DIV binding click event , Click to refresh the verification code. Span is a single verification code carrier, style dynamic binding


 Methods   Refreshcode refreshes the method of the verification code 
CREATEDCODE Method for generating a verification code getStyle is each element Generate dynamic style
methods: {refreshCode () {this.createdCode ()}, createdCode () {let len ​​= this.length, codeList = [], chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789’, charsLen = chars.length // generated for (let i = 0 i item.code) .join (”))}, // Dynamic Binding Style GetStyle (DATA) {Return `Color: $ {data.color}; font-size: $ {data.fontsize} Padding: $ {data.padding}; transform: $ {data.transform} `}}

Full code



Export Default {name: ‘validcode’, Props: {width: {type: string, Default: ‘100px’}, Height: {type: string, default: ’40px’},LENGTH: {Type: Number, Default: 4}}, Data () {Return {CODELIST: []}}, mounted () {this.createdcode ()}: {refreshcode () {this.createdcode ()} , createdCode () {let len ​​= this.length, codeList = [], chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789’, charsLen = chars.length // generated for (let i = 0; i
item.code) .join ( ‘ ‘)}}}} {Return `Color: $ {data.color}; font-size: $ {data.fontsize}; paperding: $ {data.padding}; transform: $ {data.padding}; }}

Source address
   The above is all the content of this article, I hope to help everyone, I hope everyone canSupport TUMI clouds. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment