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 就获取不到了
有解决方案吗?
附件里有代码和截图