preface

Project background :VUE + Transfer component based on elementUI.

Realize the function

  1. Added button to shuttle box
  2. Shuttle box edit field
  3. The shuttle box input box automatically gets focus
  4. Enter the shuttle box to confirm the modification
  5. The shuttle box is out of focus indicating that no content has been submitted

1. Add a button to the shuttle box

The Transfer component of elementUI, UI is left and right. The requirement is that you only edit the field to the right. No slot in sight, no left and right hooks exposed. It is bold to say that the render-content custom data item rendering function is not sufficient.

solution

Write a V-if in the HTML element using the shuttle box to navigate through the array of fields. Controls the hide and display of this button.

<el-transfer filterable :titles="transferTitles" :filter-method="filterMethod" v-model="selectSourceFileArr" :data="sourceFileData" @change="handleChangeFileTransfer" class="field-transfer" > <span V - if = "selectSourceFileArr. Includes (option. The key)" / / key code!!!!!!!!!! class="el-icon-edit field-transfer__icon" ></span> </el-transfer>Copy the code
Running effect

2. Edit fields in the shuttle box

Added button is just a switch, the requirement is to click the small icon can modify the field name. The user can type, and that’s the input tag. This small icon controls the display and hiding of input

The solution

Small icon bind click event @click.stop.prevent=”rename(option)” be careful to prevent bubbling, otherwise you may never trigger this event. V-show =”option.showInput” this field is not provided by the backend, you need to forEach the interface data back to remember oh ~~~

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"> // Control whether input <el-input V-model ="option.label"></el-input> < I class="el-icon-close" @click.stop.prevent="closeInput(option)"></ I > @ click. Stop. Prevent = "checkInput (option)" > < / I > / / save the changes < / span > < span v - if = "selectSourceFileArr. Includes (option. The key)" @click.stop.prevent="rename(option)" // key code ！！！！！！！！ class="el-icon-edit field-transfer__icon" ></span> </span> </el-transfer>Copy the code
Running effect

3. The shuttle box input box automatically obtains the focus

The requirement is to click on the little icon to show input, but its focus is not on the input field.

The solution

@click.stop.prevent=”rename(option)” in the rename method. The effect is not put, pro test effective!

$nextTick(() => {this.$refs[option.id].focus()})Copy the code

4. Press Enter to confirm the modification

Is it a little bit odd to write out the carriage return event in isolation?

  1. input + vueListen for carriage return events@keyup.13/@keyup.enter
  2. el-input + vueListen for carriage return events@keyup.13.native/@keyup.enter.native

5. The shuttle box is out of focus, indicating that no content is submitted

I admit it’s a bit of a mess, but I have it in my shuttle box. Return and out of focus and… I’m sorry to bother you with just one @blur. This is not easy to use, so I removed it today (2021.6.17).

Fonnie sauce summary

In fact, these methods are not only used in the shuttle box, although very simple, but sometimes did not think of it is also very disturbing. For example, the first one is how to add a small icon to the existing shuttle box, and only the right side. El-input: @keyup.enter: not.native. Are some very detailed small problems, you read the next time to pay attention to! Then, two days later, there is a more complex requirement (in short, the business complex code is complex).