Vue 实战-7 Form 表单 一行 input （自适应）+ button （固定）实现 + 改良

开发中遇到一个小问题，就是填写form表单时，每项基本都是input，但是需要我们输入完内容获取下面行的相关内容时，需要我们手动触发，而不是通过@blur事件，这时，就需要在input框右边加一个button点击按钮来触发，而我们发现可以改变input的宽度来实现使其和其他对齐，但是当我们放在不同的分辨率的屏幕上时，发现出现问题了，如何解决呢？

实际开发中的代码实现：

HTML代码：

<el-form-item label="转发到的服务名" required prop="server_name">
  <div class="server-name-div">
    <el-input style="width: 69%" v-model="routeForm.server_name"
              placeholder="转发到后端的服务名" clearable
              class="server-name-input"
              @input="isEnabled"
    ></el-input>
    <el-button :disabled="disabled" @click="getEnvList" class="server-name-button">获取环境</el-button>
  </div>
</el-form-item>

CSS代码：

.server-name-div{
  display: flex;
}
.server-name-button{
  margin-left: 1%;
  width:100px;
  margin-right: 9%;
}
.server-name-input {
  flex-grow: 1;
}

通过调节 server-name-button的样式来实现符合项目的需求；

 

改良版，增加按钮加载功能体验更好：

HTML代码：

<el-form-item label="转发到的服务名" required prop="server_name">
  <div class="server-name-div">
    <el-input style="width: 69%" v-model="routeForm.server_name"
              placeholder="转发到后端的服务名" clearable
              class="server-name-input"
              @input="isEnabled"
    ></el-input>
    <el-button :disabled="disabled" @click="getEnvList"
               class="server-name-button"
               :loading="serverNameLoading"
    >{{loadingText}}</el-button>
  </div>
</el-form-item>

JS代码：

data () {

    disabled: true,

    loadingText: '获取环境',

    serverNameLoading: false,

}

 

methods: {

    getEnvList(){

  var __this = this

  __this.loadingText = '获取中..'

  __this.serverNameLoading = true

  if (this.routeForm.server_name){

    // 获取环境名

    __this.axios.get('/checkservicename?ServiceName=' + this.routeForm.server_name)

      .then(function (response) {

        console.log('env_list=====', response.data)

        if (response.data) {

          if (response.data['cloud'] && response.data['cloud'].length > 0) {

            __this.cloud_env_list = response.data['cloud']

          }

          if (response.data['ksp'] && response.data['ksp'].length > 0) {

            __this.ksp_env_list = response.data['ksp']

          }

          __this.selectStatus = false

          __this.loadingText = '获取成功'

          __this.serverNameLoading = false

        }else{

          __this.cloud_env_list = []

          __this.ksp_env_list = []

          __this.loadingText= '获取环境'

          __this.serverNameLoading = false

          alert('获取环境名为空，请输入正确服务名')

        }

      }).catch(function (error) {

      console.log('addRouteFormBlur error=', error)

      __this.cloud_env_list = []

      __this.ksp_env_list = []

      __this.loadingText= '获取环境'

      __this.serverNameLoading = false

      alert('无法获取环境名，请检查服务名')

    })

  }else{

    alert('请先输入转发的服务名！')

  }

},

}