vue-loading

Code

var size = '.4rem'
var color = '#6caf90'
var vueLoading = new Vue({
  el: '#module',
  template: '<div>' +
  '   <loading :size="cSize" :color="cColor"/><br>' +
  '   Size: <vue-input v-model="size" class="vue-input"/>' +
  '   Color: <vue-input v-model="color" class="vue-input"/>' +
  '</div>',
  data: function () {
    return {
      size: size,
      color: color
    }
  },
  computed: {
    cSize: function () {
      if (+this.size || /^\d*(\.\d+)?(rem|em|px|pt)$/.test(this.size)) {
        return size = this.size
      }
      return size
    },
    cColor: function () {
      var that = this
      var reg1 = /^#[0-9a-fA-F]{3,4}$/
      var reg2 = /^#[0-9a-fA-F]{6}$/
      var reg3 = /^#[0-9a-fA-F]{8}$/
      var reg4 = /^rgba\(\s*(\d{1,2}|[01]\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|[01]\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|[01]\d{2}|2[0-4]\d|25[0-5])\s*,\s*\d*(\.\d+)?\s*\)$/
      var reg5 = /^rgb\(\s*(\d{1,2}|[01]\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|[01]\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|[01]\d{2}|2[0-4]\d|25[0-5])\s*\)$/
      var matched = [reg1, reg2, reg3, reg4, reg5].some(function (r) {
        return r.test(that.color)
      })
      if (matched) {
        return color = this.color
      }
      return color
    }
  },
  components: { 'loading': VueLoading, 'vue-input': VueInput }
})