VueJS实现一个货币结算自定义控件
Posted 乌梅
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueJS实现一个货币结算自定义控件相关的知识,希望对你有一定的参考价值。
Vue.component(\'currency-input\', { template: \'\\ <div>\\ <label v-if="label">{{ label }}</label>\\ $\\ <input\\ ref="input"\\ v-bind:value="value"\\ v-on:input="updateValue($event.target.value)"\\ v-on:focus="selectAll"\\ v-on:blur="formatValue"\\ >\\ </div>\\ \', props: { value: { type: Number, default: 0 }, label: { type: String, default: \'\' } }, mounted: function () { this.formatValue() }, methods: { updateValue: function (value) { var result = currencyValidator.parse(value, this.value) if (result.warning) { this.$refs.input.value = result.value } this.$emit(\'input\', result.value) }, formatValue: function () { this.$refs.input.value = currencyValidator.format(this.value) }, selectAll: function (event) { // Workaround for Safari bug // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome setTimeout(function () { event.target.select() }, 0) } } }) new Vue({ el: \'#app\', data: { price: 0, shipping: 0, handling: 0, discount: 0 }, computed: { total: function () { return (( this.price * 100 + this.shipping * 100 + this.handling * 100 - this.discount * 100 ) / 100).toFixed(2) } }
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js"></script> <div id="app"> <currency-input label="Price" v-model="price" ></currency-input> <currency-input label="Shipping" v-model="shipping" ></currency-input> <currency-input label="Handling" v-model="handling" ></currency-input> <currency-input label="Discount" v-model="discount" ></currency-input> <p>Total: ${{ total }}</p> </div>
以上是关于VueJS实现一个货币结算自定义控件的主要内容,如果未能解决你的问题,请参考以下文章