如何在VUE引入工具类JS

在VUE引入工具类JS

用引入手机号验证为例：

方法一：

【utils.js文件】

import Vue from 'vue'
Vue.prototype.validatePhone = validatePhone;
function validatePhone(rule, value, callback){
	let mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(199[0-9]{8})|(15[0-9]{9})$/;
	if(!mobile.test(value)) {
		return callback(new Error('请填写正确的手机号'));
	} else {
		callback();
	}
};

【需要引用的vue文件中】：使用this.validatePhone

rules: {
					phone: [
						{ required: true,validator:this.validatePhone, trigger: 'blur' }
					]
},

方法二：

【utils.js文件】（利用export default将validatePhone暴露出来，这里我用的时候如果把export default放在定义validatePhone之前会出问题）

var validatePhone = (rule, value, callback) => {
				let mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(199[0-9]{8})|(15[0-9]{9})$/;
				if(!mobile.test(value)) {
					return callback(new Error('请填写正确的手机号'));
				} else {
					callback();
				}

			};
export default{
	validatePhone
}

【需要引用的vue文件中】：（需要import，注意路径；util为自己命名，使用util.validatePhone）

<script>
	import  util from '../../utils/utils.js';
	...
	...
	rules: {
			phone: [
					{ required: true, validator:util.validatePhone, trigger: 'blur' }
			],
	},
	...
	...
</script>