在做前端vue项目的时候，有时为了减少用户的输入时间，开发者会将某些格式固定的表单输入项进行优化，方法就是通过组合固定文字和输入框来尽可能地减少用户的输入字数，进而减少输入时间，先上效果图吧：
上面就是根据单选框的值来切换公司名称的输入格式，这种固定文字和输入框的组合我姑且称之为半输入模式。下面是具体的前端代码（包括PC端和移动端）实现：
一、PC端（使用element-ui组件）
1、HTML部分：
<template>
<div>
<el-form :ref="company" :rules="rules">
<el-row>
<el-radio-group v-model="cityType" @change="changeCity">
<el-radio label="1" border style="text-align: center">
北京市
</el-radio>
<el-radio label="2" border style="text-align: center">
上海市
</el-radio>
</el-radio-group>
</el-row>
<el-row>
<el-col v-if="showType1">
<el-form-item
label="公司名称："
prop="companyName1"
:required="true"
style="text-align: left;"
>
北京市
<el-input v-model="companyName1" />
有限公司
</el-form-item>
</el-col>
<el-col v-if="showType2">
<el-row type="flex">
<el-form-item
prop="companyName2"
label="公司名称："
style="text-align: left"
>
上海市
<el-input v-model="companyName2" />
有限公司第
</el-form-item>
<el-form-item prop="companyNumber">
<el-input v-model="companyNumber" />
分部
</el-form-item>
</el-row>
</el-col>
</el-row>
</el-form>
</div>
</template>2、js部分：
<script>
import {RadioGroup, Radio, Form, FormItem, Row, Col, Input} from 'element-ui'
export default{
data() {
return{
cityType: '1', //默认选中北京市
showType1: true, //默认显示北京市的公司输入格式
showType2: false, //默认不显示上海市的公司输入格式
//以下输入框的初始值设为空
companyName1: '',
companyName2: '',
companyNumber: '',
rules: {
companyName1: [{required: true, message: '请输入公司名称', trigger:'blur'}],
companyName2: [{required: true, message: '请输入公司名称', trigger:'blur'}],
companyNumber: [{required: true, message: '请输入分部编号', trigger:'blur'}],
}
}
},
components: {
'el-radio-group': RadioGroup,
'el-radio': Radio,
'el-form': Form,
'el-form-item': FormItem,
'el-row': Row,
'el-col': Col,
'el-input': Input,
},
methods: {
//切换城市显示不同的公司输入格式
changeCity() {
if (this.cityType == '1'){
this.showType1 = true
this.showType2 = false
} else {
this.showType1 = false
this.showType2 = true
}
},
//先做表单非空校验
judgeEmpty() {
this.$refs[company].validate((valid) => {
if (valid){
this.commitData() //验证通过后调后台接口
} else {
this.$msgbox({
title: '系统提示',
message: '存在为空的必填项!',
type: 'error',
})
}
})
},
//提交数据至后台
commitData() {
let companyName=''
//拼接字符串后再传到后台
if (this.cityType == '1') {
companyName = '北京市' + this.companyName1 + '有限公司'
} else {
companyName = '上海市' + this.companyName2 + '有限公司第' + this.companyNumber + '分部'
}
console.log('前端输入的公司名称为：', companyName)
axios({
method: "post",
url: "/company/getCompanyName",
params: {'companyName': companyName}
})
.then(function(response) {
this.$msgbox({
title: "系统提示",
message: response.data.message,
type: "success"
});
})
.catch(function(error) {
console.log(error);
});
}
}
}
</script>二、移动端（使用vant移动组件）
1、HTML部分：
<template>
<div>
<van-radio-group
v-model="ciyType"
direction="horizontal"
@change="changeCity"
>
<van-radio name="1">北京市</van-radio>
<van-radio name="2">上海市</van-radio>
</van-radio-group>
<van-cell title="公司名称：" required />
<van-cell v-show="showType1" style="margin-left: 10%;">
北京市
<input v-model="companyName1" style="width: 40%;" />
有限公司
</van-cell>
<van-cell v-show="showType2">
上海市
<input v-model="companyName2" style="width: 28%;" />
有限公司第
<input v-model="companyNumber" style="margin-top: 1%; width: 17%;" />
分部
</van-cell>
</div>
</template>2、js部分：
<script>
import {RadioGroup, Radio, Cell, Dialog} from 'vant'
export default{
data() {
return{
cityType: '1', //默认选中北京市
showType1: true, //默认显示北京市的公司输入格式
showType2: false, //默认不显示上海市的公司输入格式
//以下输入框的初始值设为空
companyName1: '',
companyName2: '',
companyNumber: '',
}
},
components: {
'van-radio-group': RadioGroup,
'van-radio': Radio,
'van-cell': Cell,
},
methods: {
//切换城市显示不同的公司输入格式
changeCity() {
if (this.cityType == '1') {
this.showType1 = true
this.showType2 = false
} else {
this.showType1 = false
this.showType2 = true
}
}
//提交数据至后台
commitData() {
let companyName=''
//拼接字符串后再传到后台
if (this.cityType == '1') {
companyName = '北京市' + this.companyName1 + '有限公司'
} else {
companyName = '上海市' + this.companyName2 + '有限公司第' + this.companyNumber + '分部'
}
console.log('前端输入的公司名称为：', companyName)
axios({
method: "post",
url: "/company/getCompanyName",
params: {'companyName': companyName}
})
.then(function(response) {
Dialog.alert({
title: "系统提示",
message: response.data.message,
});
})
.catch(function(error) {
console.log(error);
});
}
}
}
</script>