vue项目固定文字和输入框的组合表单输入

Dear 丶 2023-10-12 13:09 13阅读 0赞

在做前端vue项目的时候，有时为了减少用户的输入时间，开发者会将某些格式固定的表单输入项进行优化，方法就是通过组合固定文字和输入框来尽可能地减少用户的输入字数，进而减少输入时间，先上效果图吧：

![4f6e6cf9c4074551adcd183167a84c72.jpeg][]

![a38d0173be774340b31f92be22973aa1.jpeg][]

上面就是根据单选框的值来切换公司名称的输入格式，这种固定文字和输入框的组合我姑且称之为半输入模式。下面是具体的前端代码（**包括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部分：**

### 二、移动端（使用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部分：**

[4f6e6cf9c4074551adcd183167a84c72.jpeg]: https://img-blog.csdnimg.cn/4f6e6cf9c4074551adcd183167a84c72.jpeg
[a38d0173be774340b31f92be22973aa1.jpeg]: https://img-blog.csdnimg.cn/a38d0173be774340b31f92be22973aa1.jpeg