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

FannieGirl發表於2021-06-19
前端

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。都是一些非常細節的小問題，你看一遍下一回就留意了!

相關文章