math.js在Vue项目中的使用和封装
项目中出现金额的四则运算精度错误问题,引入math.js来解决,并封装四则运算方法。引入方式一:在main.js中,import*asmathfrom'mathjs'; // 亲测importmathfrom'mathjs';不可取,朋友指出是因为math.js源码导出为模块化导出。Vue.prototype.$math=math; //挂在到原型之后可以在其...
项目中出现金额的四则运算精度错误问题,引入math.js来解决,并封装四则运算方法。
安装: npm install mathjs
引入方式一:在main.js中, //网上查询得来
import * as math from 'mathjs'; // 亲测import math from 'mathjs';不可取,朋友指出是因为math.js源码导出为模块化导出。
Vue.prototype.$math = math; //挂在到原型
之后可以在其他页面中 直接使用 this.$math.add(a,b)加,this.$math.subtract(a,b) 减,this.$math.multiply(a,b)乘,this.$math.divide(a,b)除。 a和b需要使用this.$math.bignumber();格式化一下数据类型。
例如: this.$math.add(this.$math.bignumber(a),this.$math.bignumber(b)); 太繁琐了,所以方便起见将其封装一下子。
引入方法二:在main.js中, //网上查询得来
const { create, all } = require('mathjs')
const config = {
number:'BigNumber',
precision:20 //精度 20。 precision: BigNumbers的最大有效位数。
}
const math = create(all,config);
Vue.prototype.$math = math;
使用同上。
引入方法三:在使用的页面中
let math = require('mathjs'); //网上查询得来
math.add(math.bignumber(a),math.bignumber(b));
math.subtract(math.bignumber(a),math.bignumber(b));
math.multiply(math.bignumber(a),math.bignumber(b));
math.divide(math.bignumber(a),math.bignumber(b));
封装方法一:先在arithmetic.js(名称随意),中引入math.js(参考上面引入方法,并不用挂载到原型上)
let arithmetic = {
//加法
add(a,b){
return math.add(math.bignumber(a), math.bignumber(b));
},
//减法
subtract(a,b){
return math.subtract(math.bignumber(a), math.bignumber(b));
},
// 乘法
multiply(a,b){
return math.subtract(math.bignumber(a), math.bignumber(b));
},
// 除法
divide(a,b){
return math.subtract(math.bignumber(a), math.bignumber(b));
}
}
export default arithmetic;
使用:import arithmetic from "../utils/arithmetic";
arithmetic.add(a,b);
arithmetic.subtract(a,b);
arithmetic.multiply(a,b);
arithmetic.divide(a,b); //看起来简洁方便很多。
封装方法二:引入math.js ,在arithmetic.js中
//加法
function add(a,b){
return math.add(math.bignumber(a), math.bignumber(b));
};
//减法
function subtract(a,b){
return math.subtract(math.bignumber(a), math.bignumber(b));
};
// 乘法
function multiply(a,b){
return math.subtract(math.bignumber(a), math.bignumber(b));
};
// 除法
function divide(a,b){
return math.subtract(math.bignumber(a), math.bignumber(b));
};
module.exports = {
add,
subtract,
multiply,
divide
}; //模块导出
使用:import {add,subtract,multiply,divide} from "../utils/arithmetic" //按需引入 ,使用哪个方法引入哪个。
add(a,b);
subtract(a,b);
multiply(a,b);
divide(a,b);
以上引入方法,都是网上查资料学习得来,只是总结归纳一下,也希望能帮到其他人,谢谢。
封装方法也是自己学习方法的封装和使用,并练习一下而已。
更多推荐
所有评论(0)