在这里插入图片描述
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的同学

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