前端巧技 | 有点复杂的穿梭框
前言
项目背景:VUE + 基于elementUI 的 Transfer 组件.
实现功能
- 穿梭框 增加按钮
- 穿梭框 编辑字段
- 穿梭框 输入框自动获取焦点
- 穿梭框 回车确认修改内容
- 穿梭框 失焦提示未提交内容
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>
运行效果
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>
运行效果
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. 回车确认修改内容
单独把这个回车事件都拿出来写，是不是有点？
input + vue监听回车事件@keyup.13/@keyup.enterel-input + vue监听回车事件@keyup.13.native/@keyup.enter.native
5.穿梭框 失焦提示未提交内容
这个拿出写，我承认是有点那啥了，但是我的穿梭框就是有这玩意。又回车又失焦又。。。
就一个@blur打扰了，呜呜呜呜
芳妮酱总结
这几个方法其实不仅仅用在穿梭框上，虽然挺简单的，但有时候一时没有想到也挺闹心的。比如第一个如何在已有的穿梭框上多加一个小icon，而且只有右边有。一不留神el-input上面写@keyup.enter 没有写 .native。都是一些非常细节的小问题，你看一遍下一回就留意了!
