一 npm安装
npm i
[
vue-currency-input@1.21.0
](mailto:vue-currency-input@1.21.0)
二 Main.js文件内全局挂载
import VueCurrencyInput from 'vue-currency-input'
Vue.use(VueCurrencyInput)
三 页面中使用
1.// 在input框标签内加入
v-currency="addFeeOnMoney"
<el-input v-model="对象.对象属性" ref=‘input’ v-currency="FeeOnMoney />
2. Js导入 import { setValue, getValue,parse } from "vue-currency-input";
//setValue 修改方法 需要传入参数ref对象
//getValue 获取方法 需要传入参数ref对象
//parse 数值转换 需要传入参数String，配置项 FeeOnMoney
3.计算属性中定义对象：
computed: {
FeeOnMoney() {
return {
currency: null, // 显示的货币代码 默认'EUR'
distractionFree: true, // 是否忽略多余的小数 默认true
valueAsInteger: false, // 是否作为整数处理 默认false
autoDecimalMode: false, // 输入时，是否默认添加小数点 默认false
precision: 2, // 小数位 默认undefined
valueRange: {min: 0, max: 999999999.99}, // 数据范围 默认undefined
allowNegative: false // 是否允许负数 默认false
};
}},
4.提交数据
//对象.对象属性为 $1,000.00 提交时需转换为数值 1000 用
**
parse
**
方法转换
//参数1为字符串，参数2
**
FeeOnMoney 配置项
**
对象
.对象属性=parse(val,**
FeeOnMoney
**
)
5.赋值
//参数1为refs对象, 2数值
setValue(this.refs.input) + value)
四：封装为公共方法
1.utils文件下面创建Currency.js
2.导入
import { setValue, getValue,parse } from "vue-currency-input";
3.封装js
const CurrencyInpu={
updateValue: function(refs,value){ //参数1 ref对象，参数2 数值
setValue(refs, getValue(refs) + value)
},
formattedValue:function(val,type){ //参数1 String，参数2 币种
return parse(val,this.returnConfig(type))
},
clearableValue:function(refs){ //参数 ref对象
setValue(refs, null)
}
,
returnConfig:function(type){
let obj= {locale:'en-US',
currency: type==1?'JPY':'USD', // 显示的货币代码 默认'EUR'
currencyDisplay: 'symbol',
distractionFree: true, // 是否忽略多余的小数 默认true
valueAsInteger: false, // 是否作为整数处理 默认false
autoDecimalMode: false, // 输入时，是否默认添加小数点 默认false
precision: 2, // 小数位 默认undefined
valueRange: {min: 0, max: 999999999.99}, // 数据范围 默认undefined
allowNegative: false // 是否允许负数 默认false
}
return obj
}}
export default CurrencyInpu
//导出CurrencyInpu方法
综合以上，有不懂的可以提问
