vuejs input text example

inputText.js

// Component
var VInputText = Vue.extend({
    props: {
        value: { type: String, required: true, default:'' },
        placeholder: { type: String, required: true, default:'請輸入資料' },
        maxLength:  { type: Number, required: false, default:10},
        minLength:  { type: Number, required: false, default:0},
        regx: { type: String, required: false, default: "" },
        regxMsg: { type: String, required: false, default: "格式錯誤" },
        hasButton: { type: Boolean, required: false, default: false },
        buttonWord: { type: String, required: false, default: false, default: "送出" },
        buttonEvent: { type: Function, required: false},
    },
    template: `<li class="list-group-item list-group-item-primary">
                <div>
                  <input type="num" ref="datedom" v-bind:placeholder="placeholder" v-model="value" />
                  <button type="button" class="btn btn-primary ml-md-3" v-on:click="buttonEvent(value)" v-text="buttonWord"></button>
                </div>      
                <div class="w-100 d-inline p-2 mt-1 bg-danger text-white" v-if="msg">
                  <span v-text="msg"></span>
                </div>
              <li>`,
    data: () => data = { msg: ''},
    created: function(){},
    mounted: function() {
      console.log("test func",typeof buttonEvent);
       this.$nextTick(function () {
        this.checkLength(this.value);
        this.checkRegx(this.value);
      })
    },
    methods: {
      checkRegx: function(data) {
        if(!!this.regx) {
          // 有格式檢查
          console.log(this.regxMsg)
          if(!new RegExp(this.regx).test(data)) {
            this.msg = this.regxMsg;
          } else {
            this.msg = '';
          }
        }
      },
      checkLength: function(data) {
        if(data.length > this.maxLength) {
          console.log("b",data.length, this.minLength);
          this.msg = `字數必須少於${this.maxLength}`;
          return false;
        }
        
        if(data.length < this.minLength) {
          console.log("l",data.length, this.minLength);
          this.msg = `字數最少要${this.minLength}`;
          return false;
        }
        
        if(data.length >= this.minLength && data.length <= this.maxLength ) {
          this.msg = '';
          return true;
        }

        return true;
      }
    },
    watch: {
        value: function(newValue, oldValue){
          // 檢查長度
          if(!this.checkLength(newValue)) {
            this.value = oldValue;
            this.$emit('update:value', oldValue)
          } else {
            this.$emit('update:value', newValue)
          }
          //檢查格式
          this.checkRegx(newValue);
        }
    }
})

// register
Vue.component('v-input-text', VInputText)
    // create a root instance
new Vue({
    el: '#example',
    data: {
        inputData: ["hello"]
    },
    methods:{
      test: function(value) {
        console.log(value);
      }
    }
})