前端巧技 | 有点复杂的穿梭框
前言
项目背景: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.enter
el-input + vue
监听回车事件@keyup.13.native/@keyup.enter.native
5.穿梭框 失焦提示未提交内容
这个拿出写,我承认是有点那啥了,但是我的穿梭框就是有这玩意。又回车又失焦又。。。
就一个@blur
打扰了,呜呜呜呜
芳妮酱总结
这几个方法其实不仅仅用在穿梭框上,虽然挺简单的,但有时候一时没有想到也挺闹心的。比如第一个如何在已有的穿梭框上多加一个小icon
,而且只有右边有。一不留神el-input
上面写@keyup.enter
没有写 .native
。都是一些非常细节的小问题,你看一遍下一回就留意了!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
2019-06-19 TCP/IP 这猝不及防的爱情