基于vue+element的金额格式化组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- <script src="./accounting.js"></script> -->
<script src="https://cdn.bootcss.com/accounting.js/0.4.1/accounting.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div style="display:inline-block">
<currency-input v-model="price" :decimal="4" style="width:200px;" @blur="inputBlur"></currency-input>
<el-button type="primary" size="small" @click="cc">提交</el-button>
</div>
</div>
</body>
</html><script>
Vue.component("currency-input", {
template: '\
<div class="el-input el-input--small">\
<input class="el-input__inner"\
v-bind:value="formatValue"\
ref="input"\
v-on:input="updatevalue($event.target.value)"\
v-on:blur="onBlur"\
v-on:focus="selectAll"/>\
</div>\
',
props: {
value: {
type: [String, Number],
default: 0,
desc: '数值'
},
symbol: {
type: String,
default: '',
desc: '货币标识符'
},
decimal: {
type: Number,
default: 2,
desc: '小数位'
}
},
data() {
return {
focused: false,
}
},
computed: {
formatValue() {
if (this.focused) {
return accounting.unformat(this.value);
} else {
return accounting.formatMoney(this.value, this.symbol, this.decimal);
}
}
},
methods: {
updatevalue(value) {
var formatvalue = accounting.unformat(value);
this.$emit("input", formatvalue)
},
onBlur() {
this.focused = false;
this.$emit("blur");
this.dispatch("ElFormItem", "el.form.blur", [this.value]);
},
selectAll(event) {
this.focused = true;
setTimeout(() => {
event.target.select()
}, 0)
},
dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.componentName;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
}
},
})
new Vue({
el: "#app",
data() {
return {
price: ""
}
},
created() {
setTimeout(() => {
this.price = 1100;
}, 1000);
},
methods: {
cc() {
console.log(this.price)
},
inputBlur() {
console.log("触发了自定义事件");
}
},
})
</script>