Steven_Ju
Steven_Ju
  • 发布:2020-03-13 16:26
  • 更新:2020-03-13 16:44
  • 阅读:1047

自定义Input组件无法获得value

分类:uni-app

form中加入自定义的 RInput
通过 @submit 事件中获取不到 value

其中 在input 中 有 name
但是在form中无法获取到

下面是RInput 组件的代码

<template>  
  <view class="rinput-wrap-box">  
    <view class="must_img_box">  
      <!-- 如果是非必要的则不展示 -->  
      <image v-show="required" class="input-must-img" src="../../static/card/must_img.png" mode="widthFix"></image>  
    </view>  

    <view class="rinput-input-box">  
      <input :class="{  
        inputFocus:isFocus,  
        inputFail:isFail  
      }" @focus="handleFocus" @blur="handleBlur"  
        @input="doInput" :name="name" value="" :type="type" :placeholder="placeholder" placeholder-class="placeholder-class" />  
      <view v-if="hasError" class="error-msg-box">  
        {{errorMsg}}  
      </view>  
    </view>  

    <view class="title-box" v-if="hasTitle">  
      <text class="title-text">  
        {{titleMsg}}  
      </text>  
    </view>  
  </view>  
</template>  

<script>  
  // UNI-APP 并不能很好的支持ES6 import   
  const validator = require('@/utils/validator.js');  

  export default {  
    created: function() {},  
    props: {  
      required: {  
        type: Boolean  
      },  
      'titleMsg': {  
        type: String  
      },  
      'errorMsg': {  
        type: String  
      },  
      name: {  
        type: String  
      },  
      type: {  
        type: String,  
        default: () => 'text'  
      },  
      placeholder: {  
        type: String  
      },  
      vType: {  
        type: [String, Function]  
      }  
    },  
    data() {  
      return {  
        hasError: false,  
        hasTitle: false,  
        isFocus: false,  
        isFail: false  
      };  
    },  
    methods: {  
      handleFocus: function() {  
        this.hasTitle = true;  
        this.hasError = false;  
        this.isFocus = true;  
      },  
      handleBlur: function(inputParams) {  
        this.hasTitle = true;  
        this.isFocus = false;  
        this.doInput(inputParams);  
      },  
      doInput: function(inputParams) {  
        if (this.required) {  
          this.validateInput(inputParams);  
        }  
      },  
      validateInput: function(inputParams) {  
        const value = inputParams.detail.value;  
        const vType = this.vType;  
        // 如果不存在验证,按照验证成功处理  
        if (!vType) {  
          this.validateSuccess()  
        }  

        const isOK = this.doValidate(vType, value);  
        if (isOK) {  
          this.validateSuccess()  
          return;  
        }  

        this.validateFail();  
      },  
      doValidate: function(vType, value) {  

        if (!vType || vType === '') {  
          return true;  
        }  

        if (typeof vType === 'string') {  
          // 使用 : 作为分隔符,区分name和参数  
          let vArr = vType.split(':')  
          let name = vArr[0];  
          let params = '';  
          if (vArr[1]) {  
            params = vArr[1].split(',')  
          }  

          const validateFn = validator()[name];  
          if (typeof validateFn != 'function') {  
            return true;  
          }  
          return validateFn(params).test(value);  
        }  

        if (typeof vType === 'function') {  
          return vType(value)  
        }  
      },  
      validateSuccess: function() {  
        this.hasError = false;  
        this.isFail = false;  
      },  
      validateFail: function() {  
        this.hasError = true;  
        this.hasTitle = false;  
        this.isFail = true;  
      }  
    },  
    components: {}  
  };  
</script>  

FORM 的代码

<template>  
  <!-- 产品试用 -->  
  <form class="form-box" @submit="sumbitTrial">  
    <view class="close-box" @click="goClose">  
      <image class="close-box-img" src="../../static/card/close.png" mode="widthFix"></image>  
    </view>  
    <view class="trial-banner-box">  
      <view class="horizontal"></view>  
      <view class="trial-banner-text">免费申请试用</view>  
      <view class="horizontal"></view>  
    </view>  
    <view class="input-item">  
      <RInput vType="notEmpty" name="company_name" :required="true" errorMsg="请填写公司名称" titleMsg="公司名称" placeholder="您的公司名称"></RInput>  
    </view>  
    <view class="input-item">  
      <input name="province_id" type="text">  
      <!-- <RInput vType="notEmpty" name="company_name" :required="true" errorMsg="请填写省份" titleMsg="省份" placeholder="省份"></RInput> -->  
    </view>  
    <view class="input-item">  
      <RInput vType="notEmpty" name="contact_name" :required="true" errorMsg="请填写姓名" titleMsg="姓名" placeholder="您的姓名"></RInput>  
    </view>  
    <view class="input-item">  
      <RInput vType="notEmpty" name="position" :required="true" errorMsg="请填写您的职位" titleMsg="职位" placeholder="您的职位"></RInput>  
    </view>  
    <view class="input-item">  
      <RInput vType="notEmpty" name="tel" :required="false" errorMsg="请填写您的固话" titleMsg="您的固话" placeholder="您的固话"></RInput>  
    </view>  
    <view class="input-item">  
      <RInput vType="notEmpty" name="phone" :required="true" errorMsg="请填写您的手机" titleMsg="手机" placeholder="您的手机"></RInput>  
    </view>  
    <view class="input-item">  
      <view class="getCheckNum-input-box">  
        <RInput class="getCheckNum-input" vType="notEmpty" name="check" :required="true" errorMsg="验证码有误或已失效" titleMsg=" "  
          placeholder="手机验证码"></RInput>  
        <view class="getCheckNum" @click="getCheckNumFn">  
          {{checkNumStr}}  
        </view>  
      </view>  
    </view>  
    <view class="submit-box"> <button class="submit-button" form-type="submit">提交</button></view>  
    <!-- 点击maskClick是否取消 -->  
    <uni-popup ref="confirmBox" type="center" :maskClick="true">  

      <view class="confirm-box">  
        <text class="confirm-text">提交成功,请等待工作人员与你联系!</text>  
        <view @click="closeConfirm" class="confirm-button">  
          好的  
        </view>  
      </view>  
    </uni-popup>  
  </form>  
</template>  

<script>  
  import RInput from '@/components/rcc-common/RInput.vue';  
  export default {  
    props: {  

    },  
    data() {  
      return {  
        checkNumStr: '获取验证码',  
        isLoadCheckNum: false  
      };  
    },  
    methods: {  
      goClose: function() {  
        this.$emit('go-close');  
      },  
      getCheckNumFn: function() {  
        let timer = null;  
        if (this.isLoadCheckNum) {  
          return;  
        }  
        this.isLoadCheckNum = true;  
        let counter = 59;  
        timer = setInterval(() => {  
          this.checkNumStr = `重新获取(${counter}s)`;  
          counter--;  
          if (counter === 0) {  
            clearInterval(timer);  
            this.isLoadCheckNum = false;  
          }  
        }, 1000)  
      },  
      sumbitTrial: function(res) {  

        console.log(res)  
        // 要去请求;成功后进行关闭  
        this.$refs.confirmBox.open();  
      },  
      closeConfirm: function() {  
        this.$refs.confirmBox.close();  
        this.goClose();  
      }  
    },  
    components: {  
      RInput  
    }  
  };  
</script>  

<style lang="scss">  
  .form-box {  
    width: 100%;  
    height: 980rpx;  
    position: relative;  
    @include fcbox-center;  
    justify-content: space-between;  
    z-index: 1;  
    background-color: #fff;  
  }  

  .trial-banner-box {  
    width: 700rpx;  
    height: 160rpx;  
    @include fbox-center;  
    justify-content: space-around;  
  }  

  // 水平线  
  .horizontal {  
    width: 163rpx;  
    height: 2rpx;  
    background-color: #B3B0B3;  
  }  

  // 申请试用的文字  
  .trial-banner-text {  
    font-size: 33rpx;  
    font-family: PingFang-SC-Heavy, PingFang-SC;  
    font-weight: 800;  
    color: rgba(74, 144, 226, 1);  
    line-height: 46rpx;  
    letter-spacing: 1rpx;  
  }  

  // 关闭按钮  
  .close-box {  
    width: 32rpx;  
    height: 32rpx;  
    position: absolute;  
    top: 32rpx;  
    right: 30rpx;  
    align-self: flex-end;  
  }  

  .close-box-img {  
    width: 32rpx;  
    height: 32rpx;  
  }  

  .input-item {  
    width: 700rpx;  
    height: 100rpx;  
  }  

  .submit-box {  
    width: 100%;  
    height: 140rpx;  
    @include fbox-center;  
  }  

  .submit-button {  
    width: 292rpx;  
    height: 68rpx;  
    @include fbox-center;  
    border-radius: 33rpx;  
    background-color: rgba(203, 203, 203, 1);  
    color: #FFFFFF;  
  }  

  .getCheckNum-input-box {  
    width: 92%;  
    height: 100%;  
    @include fbox-center;  
    justify-content: space-between;  
  }  

  .getCheckNum-input {  
    margin-left: 4rpx;  
  }  

  .getCheckNum-input input {  
    margin-left: 20rpx;  
  }  

  .getCheckNum {  
    width: 230rpx;  
    height: 63rpx;  
    @include fbox-center;  
    background: #FFFFFF;  
    border: 1rpx solid rgba(203, 203, 203, 1);  
    color: rgba(155, 155, 155, 1);  
    border-radius: 10rpx;  
  }  

  .confirm-box {  
    width: 609rpx;  
    height: 239rpx;  
    @include fcbox-center;  
    justify-content: space-around;  
    background: #FFFFFF;  
    border-radius: 20rpx;  
  }  

  .confirm-text {  
    font-size: 30rpx;  
    font-family: PingFangSC-Semibold, PingFang SC;  
    font-weight: 600;  
    color: rgba(81, 90, 110, 1);  
    line-height: 42rpx;  
    letter-spacing: 2rpx;  
  }  

  .confirm-button {  
    width: 212rpx;  
    height: 58rpx;  
    @include fcbox-center;  
    background: rgba(214, 78, 83, 1);  
    border-radius: 33rpx;  
    font-size: 32rpx;  
    font-family: PingFangSC-Medium, PingFang SC;  
    font-weight: 500;  
    color: rgba(255, 255, 255, 1);  
    letter-spacing: 2rpx;  
  }  
</style>  

如果直接用 input 标签可以
但是使用自定义的input 就获取不到了
有解决方案吗?
附件里有代码和截图

2020-03-13 16:26 负责人:无 分享
已邀请:
Steven_Ju

Steven_Ju (作者) - Hello

https://github.com/dcloudio/uni-app/issues/481

在github上找到解决方案;
自定义Input 需要特别注意! 文档最好能标注一下;!

该问题目前已经被锁定, 无法添加新回复