前端巧技 | 有点复杂的穿梭框

前言

项目背景:VUE + 基于elementUI 的 Transfer 组件.

实现功能

1. 穿梭框 增加按钮
2. 穿梭框 编辑字段
3. 穿梭框 输入框自动获取焦点
4. 穿梭框 回车确认修改内容
5. 穿梭框 失焦提示未提交内容

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. 回车确认修改内容

单独把这个回车事件都拿出来写，是不是有点？

1. input + vue 监听回车事件 @keyup.13/@keyup.enter
2. el-input + vue 监听回车事件 @keyup.13.native/@keyup.enter.native

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

这个拿出写，我承认是有点那啥了，但是我的穿梭框就是有这玩意。又回车又失焦又。。。
就一个@blur打扰了，呜呜呜呜

芳妮酱总结

这几个方法其实不仅仅用在穿梭框上，虽然挺简单的，但有时候一时没有想到也挺闹心的。比如第一个如何在已有的穿梭框上多加一个小icon，而且只有右边有。一不留神el-input上面写@keyup.enter 没有写 .native。都是一些非常细节的小问题，你看一遍下一回就留意了!