vueパッケージinputコンポーネント

関連する知識点は、親子コンポーネント間の属性と方法の使用です.
ステップ1:componentsディレクトリの下にサブコンポーネント(field.vue)を新規作成します.

  export default {
    name: 'formCell',
    props: {
      type: {},
      label: {},
      leftIcon: {},
      clearIcon: {}, //     
      successIcon: {}, //           
      placeHolder: {}, // input placeholder
      errorMsg: {}, //       
      inputBgColor: { // input      
        type: String,
        default: '#F5F5F5'
      },
      cellBgColor: {}, //     
      success: { //     
        type: Boolean,
        default: false
      },
      showVerify: {}, //      
      showCodeBtn: {}, //          
      authTime: {},
      options: { //     
        type: Array
      }
    },
    data () {
      return {
        showClear: false,
        inputRef: '',
        value: ''
      }
    },
    methods: {
      setValue (val) {
        this.$emit('input', val);
      },

      //      
      changeSelect (val) {
        this.$emit('change', val, this.label);
      },

      //   input value 
      updateValue (val) {
        if (val) {
          this.showClear = true;
        } else {
          this.showClear = false;
        }
        this.setValue(val);
      },

      //   input     
      clickInput () {
        this.inputRef.focus();
      },

      //     
      onFocus () {
        this.$emit('watchFocus');
      },

      //     
      onBlur () {
        this.$emit('watchBlur');
      },

      //   input value 
      clearValue () {
        this.inputRef.value = '';
        this.inputRef.focus();
        this.updateValue('');
      },

      getVerifyCode () {
        this.$emit('getVerifyCode')
      }
    },
    created () {
      let _this = this;
      this.$nextTick(() => {
        _this.inputRef = this.$refs.input;
      })
    }
  };

ステップ2、親コンポーネントfieldコンポーネントの使用

  import infoCell from '@/components/addresses/infoCell';
  import { _debounce } from '../../../mixins/utils';

  export default {
    name: '',
    components: {
      infoCell
    },
    data() {
      return {
        showVerify: true,
        showCodeBtn: true,
        clearAble: true, // input    
        authTime : 0,
        //     
        formData: {
          name: {
            value: '',
            err: '',
            success: false
          },
          idCard: {
            value: '',
            err: '',
            success: false
          },
          phone: {
            value: '',
            err: '',
            success: false
          },
          verifyCode: {
            value: '',
            err: '',
            success: false
          }
        }
      };
    },
    computed: {
      isPassAll () {
        if (
          this.formData.name.success && this.formData.idCard.success &&
          this.formData.phone.success && this.formData.verifyCode.success
        ) {
          return true
        } else {
          return false
        }
      }
    },
    created() {
    },
    methods: {
      //       
      setErrMsg (value) {
        return value ? true : false;
      },

      clearValue () {
      },

      //   input      
      watchInputFocus (flag) {
        switch (flag) {
          case 'name':
            this.formData.name.success = false;
            break;
          case 'id':
            this.formData.idCard.success = false;
            break;
          case 'phone':
            this.formData.phone.success = false;
            break;
          case 'verify':
            this.formData.verifyCode.success = false;
            break;
          default:
            break;
        }
      },

      //   input      
      watchInputBlur (value, flag) {
        switch (flag) {
          case 'name':
            this.formData.name.err = this.setErrMsg(value) ? '' : '     ';
            this.formData.name.success = this.setErrMsg(value) ? true : false;
            break;
          case 'id':
            this.formData.idCard.err = '';
            let idEmpty = this.setErrMsg(value);
            let isId = this.regIdCard(value);
            if (idEmpty) {
              if (!isId) {
                this.formData.idCard.err = '         '
              }
            } else {
              this.formData.idCard.err = '        '
            }
            this.formData.idCard.success = idEmpty && isId ? true : false;
            break;
          case 'phone':
            let phoneEmpty = this.setErrMsg(value);
            let isPhone = this.regPhoneNumber(value);
            this.formData.phone.err = '';
            if (phoneEmpty) {
              if (!isPhone) {
                this.formData.phone.err = '       ';
              }
            } else {
              this.formData.phone.err = '       ';
            }
            this.formData.phone.success = phoneEmpty && isPhone ? true : false;
            break;
          case 'verify':
            this.formData.verifyCode.err = '';
            this.formData.verifyCode.err = this.setErrMsg(value) ? '' : '      ';
            this.formData.verifyCode.success = this.setErrMsg(value) ? true : false;
            break;
          default:
            break;
        }
      },

      /**
       *      
       * 60s   
       */
      getVerifyCode () {
        if (this.showCodeBtn) {
          this.showCodeBtn = false;
          this.authTime = 59;
          let authTimer = setInterval(() => {
            this.authTime--;
            if (this.authTime <= 0) {
              this.showCodeBtn = true;
              clearInterval(authTimer);
            }
          }, 1000);
        }
      },
      //   
      commitData: _debounce(function() {
        if (this.isPassAll) {
          console.log('      ！');
        }
      }, 800),
    }
  };