公司里有一個項目要求用這個vaptcha作為驗證碼，前端框架選用的是vue，登錄時要求傳遞驗證碼token。我看到文檔里面寫要用 vaptchaObj.getToken()來獲取token，但是在methods里面使用時報錯。怎么樣在模版文件里注冊 vaptchaObj 這個函數(shù)？updated () {
vaptcha({ //配置參數(shù)
vid: '**********', // 驗證單元id
type: 'click', // 展現(xiàn)類型 點擊式
container: '#vaptcha-container' // 按鈕容器，可為Element 或者 selector
}).then(function (vaptchaObj) {
vaptchaObj.render();//執(zhí)行該方法, 生成驗證碼
})
},
methods:{
login: function(){
var token = vaptchaObj.getToken();
...
}
}
2 回答
慕慕森
TA貢獻(xiàn)1856條經(jīng)驗 獲得超17個贊
vaptcha我沒用過 但是它的包我看了一下 是非模塊化的
所以問題變成了如何處理一個非模塊化的包
那么辦法就2種咯
第一個就是在html里用script標(biāo)簽直接引入
然后webpack里配置一下 具體你可以關(guān)鍵字搜索"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',
},
}第二種么
為了好看點，讓你能夠?qū)憘€import vaptcha from 'vaptcha'
可以用webpack別名的配置alias指定路徑，這種方法會打在一起 不需要額外在script里引入
大致如下
resolve: { //...
alias: { 'vaptcha': "你的路徑/你的文件名.js"
}
},plugins: [ //...
new webpack.ProvidePlugin({ vaptcha: 'vaptcha', 'window.vaptcha': 'vaptcha'
})
],
幕布斯7119047
TA貢獻(xiàn)1794條經(jīng)驗 獲得超8個贊
這個很基礎(chǔ)的問題，明顯你這個vaptchaObj是在then方法里面獲取的，就把值放在data里面啊
data(){ return { vaptchaObj: null
}
},
updated () { var it = this;
vaptcha({ //配置參數(shù)
vid: '**********', // 驗證單元id
type: 'click', // 展現(xiàn)類型 點擊式
container: '#vaptcha-container' // 按鈕容器，可為Element 或者 selector
}).then(function (vaptchaObj) {
it.vaptchaObj = vaptchaObj
vaptchaObj.render();//執(zhí)行該方法, 生成驗證碼
})
},methods:{ login: function(){ var token = this.vaptchaObj.getToken();
...
}
}添加回答
舉報
0/150
提交
取消