注册阿里云账号
参照滑动验证demo
滑动验证在vue中使用步骤
1、在vue-cli安装的项目中，index.html页面引入js

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>防伪码验证</title>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
    <!-- 国内使用 -->
        <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
         <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
        <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
</html>

2、组件中引用
在这里插入图片描述

<script>
export default {
        name: "组件名",
        mounted(){
          this.init();
        },
        methods:{
        	init(){
        	//里边放阿里云滑动验证js代码
        	var nc_token = ["xxxxxxxxxxxxxxxxxxxxxx", (new Date()).getTime(), Math.random()].join(':');
	       var NC_Opt = 
	        {
	            renderTo: "#captcha",
	            appkey: "xxxxxxxxxxxxxxxxxxxxxx",
	            scene: "nc_other",
	            token: nc_token,
	            customWidth: 300,
	            trans:{"key1":"code0"},
	            elementID: ["usernameID"],
	            is_Opt: 0,
	            language: "cn",
	            isEnabled: true,
	            timeout: 3000,
	            times:5,
	            apimap: {
	                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
	                // 'get_captcha': '//b.com/get_captcha/ver3',
	                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
	                // 'get_img': '//c.com/get_img',
	                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
	                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
	                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
	                // 'umid_serUrl': 'https://g.com/service/um.json'
	            },   
	            callback: function (data) { 
	                window.console && console.log(nc_token)
	                window.console && console.log(data.csessionid)
	                window.console && console.log(data.sig)
	            }
	        }
	        var nc = new noCaptcha(NC_Opt)
	        nc.upLang('cn', {
	            _startTEXT: "请按住滑块，拖动到最右边",
	            _yesTEXT: "验证通过",
	            _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
	            _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
	        })
	   }
        }
      }
</script>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue