前端巧技 | 有點複雜的穿梭框

image.png

前言

項目背景:VUE + 基於elementUI 的 Transfer 組件.

實現功能

  1. 穿梭框 增加按鈕
  2. 穿梭框 編輯字段
  3. 穿梭框 輸入框自動獲取焦點
  4. 穿梭框 回車確認修改內容
  5. 穿梭框 失焦提示未提交內容

image.png

1. 穿梭框增加按鈕

elementUI 的 Transfer 組件，UI是不分左右的。需求是只有穿梭到右邊的字段才有編輯的操作。找遍天也沒有看到有slot，或者暴露區分左右的鉤子。大膽的說 【render-content 自定義數據項渲染函數】是不滿足的。

解決思路

利用穿梭框已穿梭字段數組，在HTML元素寫一個v-if。控制這個按鈕的隱藏與顯示。

<el-transfer
    filterable
    :titles="transferTitles"
    :filter-method="filterMethod"
    v-model="selectSourceFileArr"
    :data="sourceFileData"
    @change="handleChangeFileTransfer"
    class="field-transfer"
    >
      <span
        v-if="selectSourceFileArr.includes(option.key)"   // 關鍵代碼！！！！
        class="el-icon-edit field-transfer__icon"
      ></span>
</el-transfer>
運行效果

image.png

2. 穿梭框編輯字段

增加了按鈕只是一個開關，需求是點擊小圖標可以修改字段名稱。用戶可以輸入，那就是input標籤。這個小圖標控制input的顯示與隱藏

解決方案

小圖標綁定點擊事件 @click.stop.prevent="rename(option)"這裡一定要注意阻止冒泡噢，不然你可能永遠也觸發不了這個事件。v-show="option.showInput" 這個字段後端是不會提供的，需要在接口數據回來自己forEach加上去切記哦~~~

    filterable
    :titles="transferTitles"
    :filter-method="filterMethod"
    v-model="selectSourceFileArr"
    :data="sourceFileData"
    @change="handleChangeFileTransfer"
    class="field-transfer"
    >
    <span>
    <span v-show="!option.showInput"> {{ option.label }}</span>
      <span v-show="option.showInput" class="field-transfer__input"> // 控制是否顯示input
        <el-input v-model="option.label"></el-input>
        <i class="el-icon-close" @click.stop.prevent="closeInput(option)"></i> // 取消修改內容
        <i class="el-icon-check" @click.stop.prevent="checkInput(option)"></i>// 保存修改內容
      </span>
      <span
        v-if="selectSourceFileArr.includes(option.key)"   
        @click.stop.prevent="rename(option)"  // 關鍵代碼！！！！！！！！
        class="el-icon-edit field-transfer__icon"
      ></span>
    </span>
</el-transfer>
運行效果

image.png

3. 穿梭框 輸入框自動獲取焦點

需求是點擊小圖標，顯示input，但是它的焦點是不在這個輸入框上面的。

解決方案

自動獲取焦點少不了focus(),input是循環渲染出來的，不可直接寫ref,那就用賦值變量好啦~<el-input :ref='option.id'></el-input>。上面點擊小圖標不是有一個@click.stop.prevent="rename(option)"直接寫在rename方法裏面就行。效果就不放了，親測有效！

//將輸入框自動獲取焦點
option 為入參
this.$nextTick(() => {
    this.$refs[option.id].focus()
})

4. 回車確認修改內容

單獨把這個回車事件都拿出來寫，是不是有點？

  1. input + vue 監聽回車事件 @keyup.13/@keyup.enter
  2. el-input + vue 監聽回車事件 @keyup.13.native/@keyup.enter.native

5.穿梭框 失焦提示未提交內容

這個拿出寫，我承認是有點那啥了，但是我的穿梭框就是有這玩意。又回車又失焦又。。。
就一個@blur打擾了，嗚嗚嗚嗚

image.png

芳妮醬總結

這幾個方法其實不僅僅用在穿梭框上，雖然挺簡單的，但有時候一時沒有想到也挺鬧心的。比如第一個如何在已有的穿梭框上多加一個小icon，而且只有右邊有。一不留神el-input上面寫@keyup.enter 沒有寫 .native。都是一些非常細節的小問題，你看一遍下一回就留意了!

Tags:

VirMach 便宜 VPS

QNews

QNews