快捷導(dǎo)航

關(guān)于vue中輸入框的使用場(chǎng)景總結(jié)

更新時(shí)間：2022年05月31日 14:30:33 作者：huangpb0624

這篇文章主要介紹了關(guān)于vue中輸入框的使用場(chǎng)景總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

輸入框的使用場(chǎng)景總結(jié)

1. 自動(dòng)聚焦

第1種方法：使用 $nextTick

<input ref="myInput" v-model="text"/>

mounted() {
  this.$nextTick(function () {
    this.$refs.myInput.focus();
  });
},

第2種方法：自定義 v-focus 指令

為了方便，這里用到了 jquery

Vue.directive('focus', {
  inserted(el) {
    // 兼容 Element 基于原生 input 封裝的輸入框組件
    let innerInput = el.querySelector('input');
    if (innerInput) {
      innerInput.focus();
    // 兼容原生 input
    } else {
      el.focus();
    }
  },
});

如果你有一個(gè)按鈕可以控制輸入框的顯示和隱藏，需要每次顯示的時(shí)候都自動(dòng)聚焦，那要 v-if 而不能使用 v-show，因?yàn)橹挥?v-if 才能觸發(fā)自定義指令的 inserted 生命周期函數(shù)。

<input v-if="visible" v-focus v-model="text"/>

2. 如何優(yōu)雅的實(shí)現(xiàn)下面效果

效果描述：我們?cè)陂_發(fā)表格的時(shí)候經(jīng)常會(huì)遇到一個(gè)輸入框，輸入框聚焦的時(shí)候會(huì)顯示輸入框后面的“保存”按鈕，失焦的時(shí)候后面的“保存”按鈕隱藏。點(diǎn)擊保存，保存輸入框里面的內(nèi)容。輸入框失焦的時(shí)候（點(diǎn)擊保存按鈕保存成功除外），輸入框里面的內(nèi)容要顯示原先的內(nèi)容。

這里實(shí)現(xiàn)的時(shí)候會(huì)遇到一些比較惡心的地方，比如說，點(diǎn)擊保存按鈕，輸入框失焦了，保存按鈕先隱藏了，就不會(huì)觸發(fā)按鈕上綁定的點(diǎn)擊事件，等等。話不多說，直接上代碼，看怎么優(yōu)雅的去實(shí)現(xiàn)它。

代碼實(shí)現(xiàn)：

<template>
  <div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        label="商家編碼"
        width="200"
      >
        <template slot-scope="{row, $index}">
          <input
            style="width: 100px;"
            v-model="row.skuOuterId"
            @focus="toggleFocus($event, $index, row, true)"
            @blur="toggleFocus($event, $index, row, false)"
          />
          <el-button
            :class="`J_saveBtn_${$index}`"
            :ref="'saveBtn_' + $index"
            v-show="row.showSaveBtn"
            type="primary"
          >保存
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          skuOuterId: '123',
          oldSkuOuterId: '123',
          showSaveBtn: false,
        }
      ]
    };
  },
  methods: {
    toggleFocus(e, $index, data = {}, isFocus = false) {
      // 聚焦
      if (isFocus) { 
        data.showSaveBtn = true;
      // 失焦
      } else { 
        // 點(diǎn)擊“保存”失焦（判斷失焦時(shí)關(guān)聯(lián)的目標(biāo)元素是不是輸入框后面的保存按鈕）
        if (e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el) {
          axios.post('/updateSkuOuterId', {skuOuterId: data.skuOuterId}).then(res => {
            // 保存成功
            data.oldSkuOuterId = data.skuOuterId;
          }).catch(() => {
            data.skuOuterId = data.oldSkuOuterId;
          });
        // 點(diǎn)擊其他地址失焦
        } else {
          data.skuOuterId = data.oldSkuOuterId;
        }
        data.showSaveBtn = false;
      }
    },
  },
};
</script>

上面的代碼在有橫向滾動(dòng)條的時(shí)候，如果出現(xiàn)了 e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el 為 false，但我們感覺失焦的目標(biāo)元素就是保存按鈕的情況，我們可以把判斷條件這么改一下：

e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el
// 改成（下面使用了jQuery） 
$(e.relatedTarget).hasClass(`J_saveBtn_${$index}`）

這樣就 OK 了！

關(guān)于輸入框的一些操作

關(guān)于輸入框

監(jiān)聽輸入

失去焦點(diǎn)的事件

<template>
  <div class="orderinfo">
  <input type="text" v-model="text" @blur="blur()">
  </div>
</template>

<script>
export default {
  name: "Orderinfo",
  data() {
    return {
      text:''
    };
  },
 
  mounted() {},
  watch: {
    // 監(jiān)聽輸入框輸入
    text: function(val) {
      if (val.length > 0) {
        console.log('顯示刪除')
      } else {
         console.log('不顯示刪除')
      }
    }
  },
 
  methods: {
    //失去焦點(diǎn)
    blur(){
      console.log(this.text)
    }
  }
};
</script>
 
<style scoped lang="scss">
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: