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('請先輸入轉發的服務名！')

  }

},

}