vue项目中根据银行账号识别开户银行

前言：由于项目中输入银行卡号又要填写开户银行体验不好，也不利于验证。因此就在网上找到了bankcardinfo插件。废话不多说下面介绍用法；

步骤一：下载插件。

npm install bankcardinfo

步骤二：引入插件。

根据需求来确定是全局引入还是单一组件引入；

我是单一组件引入，因为只有一个地方用了；

单一组件引入方法：在需求组件中引入；

import getBankcardinfo from 'bankcardinfo'

全局引入方法：需要在main.js里面声明全局；

import getBankcardinfo from 'bankcardinfo'
Vue.prototype.$getBankcardinfo = getBankcardinfo

步骤三：使用插件。

单组件方法：

//err是报错信息， data是未报错返回信息 ，num是银行账号  
getBankcardinfo.getBankBin(num, (err, data) => {
        if (!err) {
          console.log("///",data)
        }
      })

全局引入方法：（err和data说明看上面代码）

this.$getBankcardinfo.getBankBin(num, (err, data) => {
        if (!err) {
          console.log("///",data)
        }
      })

步骤四：结果

图例：

 

完整代码：

	
		inputClick() {
			let num = this.form.proceedsId - 0;
			getBankcardinfo.getBankBin(num, (err, data) => {
				if (!err) {
					this.form.bank = data.bankName;
				}
			});
		},

特别说明：需要注意的是银行账号必须为数字类型，字符串类型会报错。