vue表单验证组件,vue短信验证码组件

　　这篇文章主要为大家详细介绍了某视频剪辑软件验证码组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件验证码组件使用的具体实现代码，供大家参考，具体内容如下

　　代码如下：

　　模板

　　div class=join_formitem

　　label class=查询验证码span:/span/label

　　div class=验证码

　　输入类型=text placeholder=请输入验证码class= yanzhengma _ input v-model= picLyanzhengma /

　　输入type= button @ click= created code class= verification v-model= check code /

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data(){

　　返回{

　　代码：,

　　校验码：,

　　picLyanzhengma: //.验证码图片

　　}

　　},

　　已创建(){

　　this.createdCode()

　　},

　　方法：{

　　//图片验证码

　　createdCode(){

　　//先清空验证码输入

　　this.code=

　　this.checkCode=

　　this.picLyanzhengma=

　　//验证码长度

　　常量代码长度=4

　　//随机数

　　常量随机=新数组(0，1，2，3，4，5，6，7，8，9，“A”，“B”，“C”，“D”，“E”，“F”，“G”，“H”，“I”，“J”，“K”，“L”，“M”，“N”，“O”，“P”，“Q”，“R”，“S”，“T”，“U”，“V”，“W”，“X”，“Y”，“Z”)

　　对于(设I=0；我代码长度；i ){

　　//取得随机数的索引(0~35)

　　设index=math。地板(数学。random()* 36)

　　//根据索引取得随机数加到密码上

　　this.code=random[index]

　　}

　　//把密码值赋给验证码

　　这个。校验码=this .代码

　　}

　　}

　　}

　　/脚本

　　风格。yanzhengma_input{

　　字体系列： Exo 2 ，无衬线；

　　边框：1px固体# fff

　　颜色：# fff

　　大纲：无；

　　边框半径：12px

　　字母间距：1px

　　字体大小：17px

　　字体粗细：正常；

　　背景色：rgba(82，56，76，15);

　　填充：5px 0 5px 10px

　　左边距：30px

　　高度：30px

　　边距-顶部：25px

　　边框：1px纯色# e6e6e6

　　}。验证{

　　边框半径：12px

　　宽度：100像素

　　字母间距：5px

　　左边距：50px

　　高度：40px

　　transform: translate(-15px，0)；

　　}。验证码{

　　高度：50px

　　文本对齐：对齐；

　　}

　　/风格

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。