小编最近做一个功能,输入框输入时弹出textarea框可以进行输入,实现批量查询功能。主要是数据在输入框的展示。
技术栈使用的vue+TS+Naive组件库,这个组件库目前看市面上使用的应该不是很多,有时候查询都搜不到。现在我们看一下如何实现。Naive UI
首先是外面的输入框,因为要聚焦弹出另一个输入框,所以使用的popconfirm组件,以下是页面展示源码:
可以看到结构外部text与弹出框的textarea输入框,还有组件插槽两个按钮清空和查询。以及textarea的插槽用来显示行数和收缩icon。
我们再来分析下两个输入框进行联动的方法事件,这个实现效果我使用的键盘事件进行数据操作和处理。
我们先从里面的textarea输入框来看:
@keydown="handleEnterKey"
@keyup="handleEnterKeyKeyup"
textarea的这两个事件一个是键盘按下,一个是键盘弹起。
主要是按下时候针对个别键盘事件进行处理,实现换行操作,然后键盘弹起进行数据处理,外部输入框显示处理和内部输入框将键盘按下的符号替换为空。
这是在textarea输入时实现的效果,按下(,;、 )进行换行操作,并且不能输入多个空行。
用replace函数+正则进行数据的替换。
现在我们来处理外部输入与弹出框textarea数据的显示:
@keydown="handleEnterKeyinput"
@keyup="handleEnterKeyKeyupinput"
也是键盘按下与弹起事件
和textarea相同只不过相反,进行的相反数据处理。
这是在外部input输入时数据的显示效果。
再看看下面的行数显示和收起效果是怎么实现的:
lineCount是显示行数的,那么我们就要知道需要实时监听输入内容,所以使用Vue的计算属性computed来实现:
const lineCount = computed(() => {
if (textareavalue.value) {
const lines = textareavalue.value.split("\n");
let count = lines.length;
if (lines[count - 1].trim() === "") {
count--;
}
return count;
} else {
return 0;
}
});
通过计算数据来计算换行符来得出当前行数,并且判断最后一行是否有内容,有的话就不计入使用行中。
这里要注意一下,我使用了两个插槽,一个展示行一个展示收起icon,是因为#count插槽层级太低了,在里面放收起icon会点击不到。并且对#count插槽的内容进行了css样式修改所以显示在我们textarea的右侧。
收起效果是给组件绑定Boolean来控制关闭。
好了,就说到这里,大家有好的优化点或者更好的实现效果欢迎来补充。