怎么样在vue模版文件里注册函数？

Question

公司里有一个项目要求用这个vaptcha作为验证码，前端框架选用的是vue，登录时要求传递验证码token。我看到文档里面写要用 vaptchaObj.getToken()来获取token，但是在methods里面使用时报错。怎么样在模版文件里注册 vaptchaObj 这个函数？updated () {     vaptcha({      //配置参数       vid: '**********', // 验证单元id       type: 'click', // 展现类型 点击式       container: '#vaptcha-container' // 按钮容器，可为Element 或者 selector     }).then(function (vaptchaObj) {       vaptchaObj.render();//执行该方法, 生成验证码     }) }, methods:{     login: function(){         var token = vaptchaObj.getToken();         ...     }     }

Answer 1

vaptcha我没用过 但是它的包我看了一下 是非模块化的
所以问题变成了如何处理一个非模块化的包
那么办法就2种咯
第一个就是在html里用script标签直接引入
然后webpack里配置一下 具体你可以关键字搜索"webpack externals"
大致的例子就是

module.exports = {
  entry: {
    app: './src/main.js',
  },
  output: {
    path: path.resolve(__dirname, '../dist/static'),
    publicPath: './static/',
    filename: '[name].js'
  },
  // CDN
  externals: {    'vaptcha':'vaptcha',
  },
}

第二种么
为了好看点，让你能够写个import vaptcha from 'vaptcha'
可以用webpack别名的配置alias指定路径，这种方法会打在一起 不需要额外在script里引入
大致如下

resolve: {    //...
    alias: {      'vaptcha': "你的路径/你的文件名.js"
    }
},plugins: [    //...
    new webpack.ProvidePlugin({      vaptcha: 'vaptcha',      'window.vaptcha': 'vaptcha'
    })
],

Answer 2

这个很基础的问题，明显你这个vaptchaObj是在then方法里面获取的，就把值放在data里面啊

data(){    return {        vaptchaObj: null
    }
},
updated () {    var it = this;
    vaptcha({      //配置参数
      vid: '**********', // 验证单元id
      type: 'click', // 展现类型 点击式
      container: '#vaptcha-container' // 按钮容器，可为Element 或者 selector
    }).then(function (vaptchaObj) {
      it.vaptchaObj = vaptchaObj
      vaptchaObj.render();//执行该方法, 生成验证码
    })
},methods:{    login: function(){        var token = this.vaptchaObj.getToken();
        ...
    }    
}