VueJS實現一個貨幣結算自訂控制項

標籤：one   ops   template   data   image   put   war   component   logs   

 

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實現一個貨幣結算自訂控制項