6月22日，上海·源创会，云技术专场火热报名中

forked from smallwei / avue-doc

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

verify.md 1.74 KB

<script>
export default {
  data(){
    return {
      data:null,
      len:6,
    }
  },
  mounted(){
    setTimeout(()=>{
      this.$refs.video.startRecord();
      setTimeout(()=>{
        this.$refs.video.stopRecord();
      },5000)
    },3000)
  },
  methods:{
    dataChange(data) {
        function dataURLtoFile(dataurl, filename) {
          let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new File([u8arr], filename, {
            type: mime
          });
        }
        var client = new window.OSS({
          region: 'oss-cn-beijing',
          endpoint: 'oss-cn-beijing.aliyuncs.com',
          accessKeyId: 'DVVDfw5e3GK53rxt',
          accessKeySecret: 'T3xEVl1BPOOmBSEfz8w0Qpp9lqmyHa',
          bucket: 'avue'
        });
        var file=dataURLtoFile(data,new Date().getTime()+'.mp4');
        client.put(file.name, file);
    }
  }
}
</script>

# Verify 验证码
结合video组件来做一些活体认证，或则是其他方面的验证
:::tip
 2.1.0
::::

:::demo 
```html
    <el-button @click="$refs.verify.randomn()" type="primary">随机验证码</el-button>
    <br /><br />
    <span style="font-size: 24px;line-height: 24px;color: #333;">请使用普通话朗读下方验证码</span>
    <br /><br />
    <avue-verify v-model="data" :len="len" ref="verify"></avue-verify>
    <br /><br />
    <avue-video background="https://avuejs.com/images/face.png" @data-change="dataChange" ref="video"></avue-video>
<script>
export default {
  data(){
    return {
      data:null,
      len:6,
    }
  }
}
</script>

```
:::

一键复制编辑原始数据按行查看历史

提交于 2020-05-30 20:51 . init docs

<script> export default { data(){ return { data:null, len:6, } }, mounted(){ setTimeout(()=>{ this.$refs.video.startRecord(); setTimeout(()=>{ this.$refs.video.stopRecord(); },5000) },3000) }, methods:{ dataChange(data) { function dataURLtoFile(dataurl, filename) { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } var client = new window.OSS({ region: 'oss-cn-beijing', endpoint: 'oss-cn-beijing.aliyuncs.com', accessKeyId: 'DVVDfw5e3GK53rxt', accessKeySecret: 'T3xEVl1BPOOmBSEfz8w0Qpp9lqmyHa', bucket: 'avue' }); var file=dataURLtoFile(data,new Date().getTime()+'.mp4'); client.put(file.name, file); } } } </script>

Verify 验证码

结合video组件来做一些活体认证，或则是其他方面的验证 :::tip 2.1.0 ::::

:::demo

    <el-button @click="$refs.verify.randomn()" type="primary">随机验证码</el-button>
    <br /><br />
    <span style="font-size: 24px;line-height: 24px;color: #333;">请使用普通话朗读下方验证码</span>
    <br /><br />
    <avue-verify v-model="data" :len="len" ref="verify"></avue-verify>
    <br /><br />
    <avue-video background="https://avuejs.com/images/face.png" @data-change="dataChange" ref="video"></avue-video>
<script>
export default {
  data(){
    return {
      data:null,
      len:6,
    }
  }
}
</script>

:::

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/86zhangdong/avue-doc.git

git@gitee.com:86zhangdong/avue-doc.git

86zhangdong

avue-doc

avue-doc

master