VUE调用网易易盾滑动拼图initNECaptcha调用未定义问题

这里写自定义目录标题新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1.先在index.html中引用网易易盾&

饶子涵

3470人浏览 · 2020-05-25 10:46:02

饶子涵 · 2020-05-25 10:46:02 发布

在这里插入图片描述
1.先在index.html中引用网易易盾


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <script src="http://cstaticdun.126.net/load.min.js?t=201903281201"></script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.在需要使用网易易盾的地方调用

2.1：在template中
		   <template>
		  <div>
		    <my_header title="更改绑定邮箱" />
		    <div class="main">
		      <div class="Email_change_from">
		        <div>
		          <h4>请输入原邮箱账号</h4>
		          <input type="text" placeholder="请输入原邮箱账号" v-model="rawEmail" disabled />
		        </div>
		        <div>
		          <h4>请输入验证码</h4>
		          <input type="text" placeholder="请输入验证码" />
		          <button ref="popups">获取验证码</button>
		        </div>
		      </div>
		      <div class="Email_change_button">
		        <router-link tag="button" to="Bindingemail">下一步</router-link>
		        <!-- <button>下一步</button> -->
		      </div>
		      <div ref="captcha"></div>
		    </div>
		  </div>
		</template>

2.2：在mounted中使用

	mounted() {
		    var self = this;
		    var options = {
		      element: this.$refs.captcha,
		      captchaId: "您申请的captchaId号码",
		      mode: "popup",
		      width: "320px"
		    };
		    initNECaptcha(options, function onLoad(instance) {
		      console.log(instance);
		      self.instance = instance;
		    });
		    this.$refs.popups.addEventListener("click", function() {
		      self.instance && self.instance.popUp();
		    });
		}

3.如果还没有在vue.config.js中添加 lintOnSave: false,

/*
 * vue.config 配置
 * @author maybe
 */
const path = require('path');
// const fs = require('fs')
// __dirname 总是指向被执行 js 文件的绝对路径
const resolve = dir => {
    return path.join(__dirname, dir)
}


// const BASE_URLS = process.env.NODE_ENV === 'production'
//     ? '/h5'
//     : '/';
module.exports = {
    publicPath: '/',
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
            .set('_c', resolve('src/components'))
            .set('_conf', resolve('config'))
    },
    assetsDir: 'static', //静态资源目录(js,css,img,fonts)这些文件都可以写里面
    // 打包时不生成.map文件
    productionSourceMap: false,
    // 输出文件目录
    outputDir: 'dist',

    devServer: {
        //port: "2202",
        proxy: {
            "": {
                target: "www.baodu.com", // 后台接口域名
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    "/": "",
                },
            },
        },
    },
    //关闭每次保存都进行检测
    lintOnSave: false,
}

4.最后的样式
在这里插入图片描述
希望可以帮到热爱Vue的同学

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}$/, //不连续的两位字母// /^